首页 > 代码库 > 左边菜单导航

左边菜单导航

<!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="http://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="http://www.mamicode.com/img/leftico01.png"></span>管理信息
                </div>
                <ul class="menu-son">
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#">首页模版</a>
                            <i></i>
                        </div>
                    </li>
                </ul>
            </dd>
            <dd>
                <div class="title">
                    <span><img src="http://www.mamicode.com/img/leftico01.png"></span>管理信息
                </div>
                <ul class="menu-son">
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#">首页模版</a>
                            <i></i>
                        </div>
                    </li>
                </ul>
            </dd>
            <dd>
                <div class="title">
                    <span><img src="http://www.mamicode.com/img/leftico01.png"></span>管理信息
                </div>
                <ul class="menu-son">
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#">首页模版</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="http://www.mamicode.com/img/leftico01.png"></span>管理信息
                </div>
                <ul class="menu-son">
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#">首页模版</a>
                            <i></i>
                        </div>
                    </li>
                </ul>
            </dd>
            <dd>
                <div class="title">
                    <span><img src="http://www.mamicode.com/img/leftico01.png"></span>管理信息
                </div>
                <ul class="menu-son">
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#">首页模版</a>
                            <i></i>
                        </div>
                    </li>
                </ul>
            </dd>
            <dd>
                <div class="title">
                    <span><img src="http://www.mamicode.com/img/leftico01.png"></span>管理信息
                </div>
                <ul class="menu-son">
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#">首页模版</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="http://www.mamicode.com/img/leftico01.png"></span>管理信息
                </div>
                <ul class="menu-son">
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#">首页模版</a>
                            <i></i>
                        </div>
                    </li>
                </ul>
            </dd>
            <dd>
                <div class="title">
                    <span><img src="http://www.mamicode.com/img/leftico01.png"></span>管理信息
                </div>
                <ul class="menu-son">
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#">首页模版</a>
                            <i></i>
                        </div>
                    </li>
                </ul>
            </dd>
            <dd>
                <div class="title">
                    <span><img src="http://www.mamicode.com/img/leftico01.png"></span>管理信息
                </div>
                <ul class="menu-son">
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</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="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#" >首页模版</a>
                            <i></i>
                        </div>
                    </li>
                    <li>
                        <div class="header">
                            <cite></cite>
                            <a href="http://www.mamicode.com/#">首页模版</a>
                            <i></i>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
</div>
</body>
</html>

  

左边菜单导航