前端开发左边菜单导航教程

web开发前端框架|前端开发导航栏切换页面|拼好货公司需要前端开发人员吗?

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>初识前端与移动开发到项目开发:左边导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /*background: #8d90ef;#0387e0*/
            text-decoration: none;
            list-style: none;
        }
        html {
            overflow-y: hidden;
        }
        a {
            outline: none;
        }
        a:focus {
            outline: none;
        }
        img {
            border: 0;
        }
        body {
            width: 251px;
        }
        body>div {
            width: 251px;
            background: #87C5E1;
        }
        .left-top {
            height: 40px;
            line-height: 40px;
            font-size: small;
            font-weight: bold;
            color: white;
            background: #87C5E1;
            border-bottom: 1px solid white;
            cursor: pointer;
        }
        .left-top>span {
            display: inline-block;
            margin-left: 8px;
            margin-top: 7px;
            margin-right: 8px;
            float: left;
            width: 20px;
            height: 21px;
            background-size: 25px 25px;
        }
        .left-menu {
            width: 250px;
        }
        .left-menu dd span {
            float: left;
            height: 25px;
            margin-left: 20px;
            margin-right: 8px;
            margin-top: 5px;
        }
        .title {
            cursor: pointer;
            width: 249px;
            height: 35px;
            line-height: 35px;
            font-size: small;
            font-weight: bold;
            color: white;
            background: #87C5E1;
            border-bottom: 1px solid #D2D6D7;
        }
        .title img {
            width: 20px;
            height: 20px;
        }
        .menu-son {
            display: none;
            background: white;
        }
        .menu-son>li {
            position: relative;
            cursor: pointer;
            line-height: 30px;
            font-size: small;
        }
        .header {
            margin-left: 40px;
            height: 30px;
            line-height: 30px;
        }
        .header>a {
            display: block;
            color: black;
            font-weight: bold;
        }
        .header:hover>a {
            color: #87C5E1;
        }
        .header>cite {
            display: block;
            float: left;
            width: 16px;
            height: 16px;
            margin-top: 5px;
        }
        .header>cite:after {
            content: “”;
            display: block;
            width: 0;
            height: 0;
            margin-top: 2px;
            border-top: 9px solid transparent;
            border-right: 9px solid black;
            transform: rotate(-45deg);
        }
        .menu-son .active {
            background: #1493B1;
        }
        .menu-son .active cite:after {
            content: “”;
            display: block;
            width: 0;
            height: 0;
            margin-top: 2px;
            border-top: 9px solid transparent;
            border-right: 9px solid white;
            transform: rotate(-45deg);
        }
        .menu-son .active i:after {
            position: absolute;
            top: 8px;
            right: -10px;
            content: “”;
            height: 3px;
            border-top: 15px solid transparent;
            border-right: 15px solid white;
            transform: rotate(135deg);
            z-index: 9999;
        }
        .menu-son .active>div a {
            color: white;
        }
        .sub-menus {
            display: none;
            background: #c9dfdd;
            padding: 10px 0;
            border-bottom: 1px solid #c8c9f7;
        }
        .sub-menus>li a {
            display: block;
            color: #0f0f0f;
            padding-left: 65px;
            font-weight: bold;
        }
        .sub-menus>li:hover>a {
            color: white;
        }
        .sub-menus>li.active {
            background: white;
        }
        .sub-menus>li.active>a {
            color: black;
        }
    </style>
    <script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js”></script>
    <script src=”//cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js”></script>
    <script>
        /**
         * Created by lenovo on 2016/10/8.
         */
        $(function () {
            /*零级菜单点击效果*/
            $(“.left-top”).click(function () {
                if ($(this).next(‘.left-foot’).is(‘:visible’)) {
                    $(this).next(‘.left-foot’).slideUp();
                } else {
                    $(this).next(‘.left-foot’).slideDown();
                }
            });
            /*一级菜单点击效果*/
            $(‘.title’).click(function () {
                var $ul = $(this).next(‘ul’);
                $(‘dd’).find(‘.menu-son’).slideUp().find(‘.sub-menus’).slideUp();
                if ($ul.is(‘:visible’)) {
                    $(this).next(‘.menu-son’).slideUp();
                } else {
                    $(this).next(‘.menu-son’).slideDown();
                }
            });
            /*二级菜单点击效果*/
            $(“.menu-son .header”).click(function () {
                $(“.menu-son li.active”).removeClass(“active”).find(‘.sub-menus’).slideUp();
                $(this).parent().addClass(“active”);
                if (!$(this).next(‘.sub-menus’).is(‘:visible’)) {
                    $(this).next(‘.sub-menus’).slideDown();
                }
            });
            // 三级菜单点击
            $(‘.sub-menus li’).click(function (e) {
                $(“.sub-menus li.active”).removeClass(“active”);
                $(this).addClass(“active”);
            });
            /*滚动效果*/
            $(‘body’).bind(‘mousewheel’, function (event, delta) {
                var step = $(window).height(); //可视区高度
                var cur_top = $(window).scrollTop(); //当前滚过的高度
                var direction = delta > 0 ? -1 : 1;
                var height = direction * step + cur_top;
                var x_height = Math.floor(height / step) * step; //滚过整数倍的可视区大小
                $(“html, body”).stop().animate({
                    scrollTop: x_height
                }, 400);
                return false;
            });
        });
    </script>
</head>
<body>
    <div>
        <div class=”left-top”>
            <span></span>通讯录
        </div>
        <div class=”left-foot”>
            <dl class=”left-menu”>
                <dd>
                    <div class=”title”>
                        <span>
                            <img src=”img/leftico01.png”>
                        </span>管理信息
                    </div>
                    <ul class=”menu-son”>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                    </ul>
                </dd>
                <dd>
                    <div class=”title”>
                        <span>
                            <img src=”img/leftico01.png”>
                        </span>管理信息
                    </div>
                    <ul class=”menu-son”>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                    </ul>
                </dd>
                <dd>
                    <div class=”title”>
                        <span>
                            <img src=”img/leftico01.png”>
                        </span>管理信息
                    </div>
                    <ul class=”menu-son”>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                    </ul>
                </dd>
            </dl>
        </div>
        <div class=”left-top”>
            <span></span>通讯录
        </div>
        <div class=”left-foot”>
            <dl class=”left-menu”>
                <dd>
                    <div class=”title”>
                        <span>
                            <img src=”img/leftico01.png”>
                        </span>管理信息
                    </div>
                    <ul class=”menu-son”>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                    </ul>
                </dd>
                <dd>
                    <div class=”title”>
                        <span>
                            <img src=”img/leftico01.png”>
                        </span>管理信息
                    </div>
                    <ul class=”menu-son”>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                    </ul>
                </dd>
                <dd>
                    <div class=”title”>
                        <span>
                            <img src=”img/leftico01.png”>
                        </span>管理信息
                    </div>
                    <ul class=”menu-son”>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                    </ul>
                </dd>
            </dl>
        </div>
        <div class=”left-top”>
            <span></span>通讯录
        </div>
        <div class=”left-foot”>
            <dl class=”left-menu”>
                <dd>
                    <div class=”title”>
                        <span>
                            <img src=”img/leftico01.png”>
                        </span>管理信息
                    </div>
                    <ul class=”menu-son”>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                    </ul>
                </dd>
                <dd>
                    <div class=”title”>
                        <span>
                            <img src=”img/leftico01.png”>
                        </span>管理信息
                    </div>
                    <ul class=”menu-son”>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                    </ul>
                </dd>
                <dd>
                    <div class=”title”>
                        <span>
                            <img src=”img/leftico01.png”>
                        </span>管理信息
                    </div>
                    <ul class=”menu-son”>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                            <ul class=”sub-menus”>
                                <li>
                                    <a href=”javascript:;”>文件管理</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>模型信息配置</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>基本内容</a>
                                </li>
                                <li>
                                    <a href=”javascript:;”>自定义</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                        <li>
                            <div class=”header”>
                                <cite></cite>
                                <a href=”#”>首页模版</a>
                                <i></i>
                            </div>
                        </li>
                    </ul>
                </dd>
            </dl>
        </div>
    </div>
</body>
</html>
2016达内前端开发视频|web前端开发工具ide|前端web开发面试常问的问题
» 本文来自:前端开发者 » 《前端开发左边菜单导航教程》
» 本文链接地址:https://www.rokub.com/4106.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!