用jQuery写一个下拉菜单的案例

最新推荐文章于 2024-08-17 23:24:44 发布
原创最新推荐文章于 2024-08-17 23:24:44 发布 · 901 阅读
4 ·
本内容遵循CC 4.0 BY-SA版权协议
标签
#javascript #css #html #前端
javascript 同时被 2 个专栏收录
57 篇文章
订阅专栏
jQuery
2 篇文章
订阅专栏
这是一个实现响应式导航菜单的HTML/CSS/JavaScript代码示例，包括下拉菜单、图标和切换效果。适用于网站配置、文章管理和订单管理等后台操作，支持鼠标悬停和点击事件。代码中使用了jQuery库和自定义图标，同时提供了迷你导航模式。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>下拉菜单</title>
    <!-- 引入iconfont -->
    <link rel="stylesheet" type="text/css" href="font/iconfont.css">
    <!-- 引入jQuery -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style>
        body,
        html {
            height: 100%;
            background: #E2E2E2
        }
        
        body,
        ul {
            margin: 0;
            padding: 0
        }
        
        body {
            font: 14px "微软雅黑", "宋体", "Arial Narrow", HELVETICA;
            -webkit-text-size-adjust: 100%;
        }
        
        li {
            list-style: none
        }
        
        a {
            text-decoration: none;
        }
        /* 以上实际使用若已初始化可删除 */
        /* nav */
        
        .nav {
            width: 220px;
            height: 100%;
            background: #263238;
            transition: all .3s;
        }
        
        .nav a {
            display: block;
            overflow: hidden;
            padding-left: 20px;
            line-height: 46px;
            max-height: 46px;
            color: #ABB1B7;
            transition: all .3s;
        }
        
        .nav a span {
            margin-left: 30px;
        }
        
        .nav-item ul {
            display: none;
            background: rgba(0, 0, 0, .1);
        }
        
        .nav-item.nav-show ul {
            display: block;
        }
        
        .nav-item>a:before {
            content: "";
            position: absolute;
            left: 0px;
            width: 2px;
            height: 46px;
            background: #34A0CE;
            opacity: 0;
            transition: all .3s;
        }
        
        .nav .nav-icon {
            font-size: 20px;
            position: absolute;
            margin-left: -1px;
        }
        /* 此处修改导航图标 可自定义iconfont 替换*/
        
        .icon_1::after {
            content: "\e62b";
        }
        
        .icon_2::after {
            content: "\e669";
        }
        
        .icon_3::after {
            content: "\e61d";
        }
        /*---------------------*/
        
        .nav-more {
            float: right;
            margin-right: 20px;
            font-size: 12px;
            transition: transform .3s;
        }
        /* 此处为导航右侧箭头 如果自定义iconfont 也需要替换*/
        
        .nav-more::after {
            content: "\e621";
        }
        /*---------------------*/
        
        .nav-show .nav-more {
            transform: rotate(90deg);
        }
        
        .nav-show,
        .nav-item>a:hover {
            color: #FFF;
            background: rgba(0, 0, 0, .1);
        }
        
        .nav-show>a:before,
        .nav-item>a:hover:before {
            opacity: 1;
        }
        
        .nav-item li:hover a {
            color: #FFF;
            background: rgba(0, 0, 0, .1);
        }
        /* nav-mini */
        
        .nav-mini.nav {
            width: 60px;
        }
        
        .nav-mini.nav .nav-item>a span {
            display: none;
        }
        
        .nav-mini.nav .nav-more {
            margin-right: -20px;
        }
        
        .nav-mini.nav .nav-item ul {
            position: absolute;
            top: 0px;
            left: 60px;
            width: 180px;
            z-index: 99;
            background: #3C474C;
            overflow: hidden;
        }
        
        .nav-mini.nav .nav-item:hover {
            background: rgba(255, 255, 255, .1);
        }
        
        .nav-mini.nav .nav-item:hover .nav-item a {
            color: #FFF;
        }
        
        .nav-mini.nav .nav-item:hover a:before {
            opacity: 1;
        }
        
        .nav-mini.nav .nav-item:hover ul {
            display: block;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="nav-top">
            <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="images/mini.png"></div>
        </div>
        <ul>
            <li class="nav-item">
                <a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>网站配置</span><i
						class="my-icon nav-more"></i></a>
                <ul>
                    <li><a href="javascript:;"><span>网站设置</span></a></li>
                    <li><a href="javascript:;"><span>友情链接</span></a></li>
                    <li><a href="javascript:;"><span>分类管理</span></a></li>
                    <li><a href="javascript:;"><span>系统日志</span></a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="javascript:;"><i class="my-icon nav-icon icon_2"></i><span>文章管理</span><i
						class="my-icon nav-more"></i></a>
                <ul>
                    <li><a href="javascript:;"><span>站内新闻</span></a></li>
                    <li><a href="javascript:;"><span>站内公告</span></a></li>
                    <li><a href="javascript:;"><span>登录日志</span></a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="javascript:;"><i class="my-icon nav-icon icon_3"></i><span>订单管理</span><i
						class="my-icon nav-more"></i></a>
                <ul>
                    <li><a href="javascript:;"><span>订单列表</span></a></li>
                    <li><a href="javascript:;"><span>打个酱油</span></a></li>
                    <li><a href="javascript:;"><span>也打酱油</span></a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div style="text-align:center;margin:-650px 0; font:normal 14px/24px 'MicroSoft YaHei';">
        <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
    </div>
    <script>
        /* 等到页面加载完成后执行 */
        $(function() {
            /* 点击一级菜单隐藏二级菜单 */
            $(".nav-item a").click(function() {
                    /* 判断有没有nav-show这个类名  如果有就隐藏 没有就显示 */
                    if ($(this).parent().hasClass('nav-show')) {
                        $(this).next().slideUp();
                    } else {
                        $(this).next().slideDown();
                    }
                    //给自己添加nav-show类名的同时，要删除其他兄弟的nav-show类名，同时还要动画效果隐藏兄弟的ul子元素
                    $(this).parent().toggleClass("nav-show").siblings().removeClass("nav-show").children("ul").slideUp();
                })
                //点击左上角的菜单图标， 让导航变成迷你导航。添加nav-mini类。
            $("#mini").click(function() {
                //先让所有的二级菜单隐藏。 行内式删除，nav-show要删除
                $(".nav-item ul").removeAttr("style").parent().removeClass("nav-show");
                $(".nav").toggleClass("nav-mini")
            })
        })
    </script>
</body>

</html>