css3开发商务滑动垂直侧边栏

web前端群，189394454，有视频、源码、学习方法等大量干货分享

知识点：盒子模型与css样式,CSS3选择器、CSS3伪元素画三角形，DIV+CSS布局基础，html性能优化与布局精解，jQuery插件使用指南等.

👇html代码：

<div class="sidebar">
    <ul>
        <li><a href="javascript:;" style="background-color: #1e282c;">MAIN NAVIGATION</a></li>
        <li><a href="javascript:;">Dashboard</a>
            <ul class="menu">
                <li><a href="javascript:;">ChartJS</a></li>
                <li><a href="javascript:;">Morris</a></li>
                <li><a href="javascript:;">Flot</a></li>
                <li><a href="javascript:;">Inline charts</a></li>
            </ul>
        </li>
        <li><a href="javascript:;">new</a>
            <ul class="menu">
                <li><a href="javascript:;">ChartJS</a></li>
                <li><a href="javascript:;">Morris</a></li>
                <li><a href="javascript:;">Flot</a></li>
                <li><a href="javascript:;">Inline charts</a></li>
            </ul>
        </li>
        <li><a href="javascript:;">Layout Options 4</a>
            <ul class="menu">
                <li><a href="javascript:;">ChartJS</a></li>
                <li><a href="javascript:;">Morris</a></li>
                <li><a href="javascript:;">Flot</a></li>
                <li><a href="javascript:;">Inline charts</a></li>
            </ul>
        </li>
        <li><a href="javascript:;">new</a>
            <ul class="menu">
                <li><a href="javascript:;">ChartJS</a></li>
                <li><a href="javascript:;">Morris</a></li>
                <li><a href="javascript:;">Flot</a></li>
                <li><a href="javascript:;">Inline charts</a></li>
            </ul>
        </li>
        <li><a href="javascript:;">Widgets</a>
            <ul class="menu">
                <li><a href="javascript:;">ChartJS</a></li>
                <li><a href="javascript:;">Morris</a></li>
                <li><a href="javascript:;">Flot</a></li>
                <li><a href="javascript:;">Inline charts</a></li>
            </ul>
        </li>
        <li><a href="javascript:;">new</a>
            <ul class="menu">
                <li><a href="javascript:;">ChartJS</a></li>
                <li><a href="javascript:;">Morris</a></li>
                <li><a href="javascript:;">Flot</a></li>
                <li><a href="javascript:;">Inline charts</a></li>
            </ul>
        </li>
        <li><a href="javascript:;">Calendar</a>
            <ul class="menu">
                <li><a href="javascript:;">ChartJS</a></li>
                <li><a href="javascript:;">Morris</a></li>
                <li><a href="javascript:;">Flot</a></li>
                <li><a href="javascript:;">Inline charts</a></li>
            </ul>
        </li>
        <li><a href="javascript:;">Charts</a>
            <ul class="menu">
                <li><a href="javascript:;">ChartJS</a></li>
                <li><a href="javascript:;">Morris</a></li>
                <li><a href="javascript:;">Flot</a></li>
                <li><a href="javascript:;">Inline charts</a></li>
            </ul>
        </li>

    </ul>
</div>

👇css代码：

    <style type='text/css'>
        * { margin: 0; padding: 0; }
        a{text-decoration:none;}
        .sidebar { width: 230px; float: left; height: 100%; margin: 0; padding: 0; }

        .sidebar ul li { width: 230px; display: block; background-color: #222d32; position: relative; }

        .sidebar ul li:hover > a { background-color: #1e282c; color: #ffffff; border-left-color: #3c8dbc }

        .sidebar > ul > li:after { content: ""; position: absolute; top: 12px; left: 10px; width: 0px; height: 0px; float: left; display: block; border: 8px solid; border-left-color: #ffffff; border-bottom-color: transparent; border-right-color: transparent; border-top-color: transparent; }

        .sidebar > ul > li.on:after { content: ""; position: absolute; top: 14px; left: 5px; width: 0px; height: 0px; float: left; display: block; border-left-color: transparent; border-bottom-color: transparent; border-right-color: transparent; border-top-color: #ffffff; }

        .sidebar ul li a { display: block; padding: 12px 5px 12px 35px; border-left: 3px solid transparent; color: #b8c7ce; font-size: 16px;
            line-height: 14px }

        .sidebar ul li ul.menu > li > a { width: 227px; height: 30px; display: block; background-color: rgba(36, 94, 113, 0.73); position: relative; text-align: center; border-left: 3px solid transparent; color: #b8c7ce; font-size: 14px; display: block; cursor: pointer; padding: 0; line-height: 27px }

        .sidebar ul li ul.menu li:hover a { border-left-color: #ffffff; color: #000000 }

        .sidebar ul li ul { display: none; }
    </style>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

👇javascript代码：

<script>
    var $li = $('.sidebar>ul>li>a');
    $li.click(function () {
        $(this).parents('li').toggleClass('on').children('.menu').slideToggle(300).parents('li').siblings('li').removeClass('on').children('.menu').slideUp(300);
    })
</script>