js小案例-楼层导航-树状菜单/前端

2021-10-10 21:34:44 阅读：157 来源： 互联网

1、楼层导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul,ol,li{
            list-style: none;
        }

        .scrolltop{
            width: 100%;
            height: 100px;
            background: rgba(0,0,0,0.5);
            text-align: center;
            line-height: 100px;
            color: #fff;
            position: fixed;
            top:0;
            left: 0;
            font-size: 50px;
            display: none;
        }

        .storeNav{
            width: 50px;
            position: fixed;
            right: 100px;
            top: 50%;
            transform: translateY(-50%);
            border: 2px solid #000;
            display: none;
        }

        .storeNav>ul>li{
            width: 100%;
            height:50px;
            font-size: 18px;
            border-bottom: 2px solid #000;
            background: aquamarine;
            color:black;
            text-align: center;
        }

        .storeNav>ul>li:last-child{
            border-bottom: none;
        }

        .storeNav>ul>li.active{
            background: red;
            color:#fff;
        }


        .continue{
            width: 1200px;
            margin: 0 auto;
        }

        .header{
            width: 100%;
            height: 100px;
            color: #fff;
            background: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }

        .search{
            width: 100%;
            height: 150px;
            color: #fff;
            background: burlywood;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }

        .banner{
            width: 100%;
            height: 300px;
            color: #fff;
            background: cornflowerblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }

        .storey{
            width: 100%;
        }

        .storey > ul > li{
            margin-top: 50px;
            width: 100%;
        }

        .storey > ul > li > h3{
            width: 100%;
            height: 100px;
            color: #fff;
            background: greenyellow;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }

        .storey > ul > li > div{
            width: 100%;
            height: 400px;
            color: #fff;
            background: orange;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }

        .footer{
            width: 100%;
            height: 300px;
            margin-top: 50px;
            color: #fff;
            background: plum;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }
        

    </style>
</head>
<body>

    <!-- 吸顶div -->
    <div class="scrolltop">
        我是吸顶div内容
    </div>

    <!-- 侧边栏div -->
    <div class="storeNav">
        <ul>
            <li name="other" class="active">京东秒杀</li>
            <li name="other">今日特价</li>
            <li name="other">品牌闪购</li>
            <li name="other">发现好货</li>
            <li name="other">新品首发</li>
            <li name="other">频道广场</li>
            <li name="other">为您推荐</li>
            <li name="back">返回顶部</li>
        </ul>
    </div>

    <!-- 楼层内容div -->
    <div class="continue">
        <!-- 页面的顶部 -->
        <div class="header">顶部导航部分</div>
        <div class="search">顶部搜索栏部分</div>
        <div class="banner">顶部轮播图部分</div>

        <!-- 楼层部分 -->
        <div class="storey">
            <ul>
                <li>
                    <h3>京东秒杀标题</h3>
                    <div>京东秒杀内容</div>
                </li>

                <li>
                    <h3>今日特价标题</h3>
                    <div>今日特价内容</div>
                </li>

                <li>
                    <h3>品牌闪购标题</h3>
                    <div>品牌闪购内容</div>
                </li>

                <li>
                    <h3>发现好货标题</h3>
                    <div>发现好货内容</div>
                </li>

                <li>
                    <h3>新品首发标题</h3>
                    <div>新品首发内容</div>
                </li>

                <li>
                    <h3>频道广场标题</h3>
                    <div>频道广场内容</div>
                </li>

                <li>
                    <h3>为您推荐标题</h3>
                    <div>为您推荐内容</div>
                </li>
            </ul>
        </div>

        <!-- 页面部分 -->
        <div class="footer">
            页面底部内容部分
        </div>
    </div>

    <script src=".././jquery.min.js"></script>

    <script>
        // 获取所有的 侧边栏li标签 添加点击事件
        $('.storeNav li').click(function(e){
            // 如果 点击的是 返回顶部标签 scrollTop 为 0
            if( e.target.getAttribute('name') === 'back' ){
                $('html').animate( {scrollTop :0} , 1000 );

            // 如果 点击的是 其他侧边栏li 设定 scrollTop 为 对应的 楼层li距离html顶部间距
            }else if( e.target.getAttribute('name') === 'other' ){
                $('html').animate( {scrollTop : $('.storey li').eq( $(this).index() ).offset().top - 200} , 1000 );
                
            }
        })

        // 页面滚动监听事件
        $(window).scroll(function(){
            // 当 页面滚动高度大于设定数值时 让 吸顶div 和 侧边栏div 显示
            if( $(window).scrollTop() > 500 ){
                // 当 吸顶div 和 侧边栏div 显示
                // 吸顶div下拉显示
                $('.scrolltop').stop().slideDown( 1000 );
                // 侧边栏div逐渐显示
                $('.storeNav').stop().fadeIn( 1000 );

            // 否则 吸顶div 和 侧边栏div 隐藏
            }else{
                // 吸顶div上卷隐藏
                $('.scrolltop').stop().slideUp( 1000 );
                // 侧边栏div逐渐消失
                $('.storeNav').stop().fadeOut( 1000 );
            }


            // 给 所有的 楼层li 循环遍历 添加事件
            $('.storey li').each(function(key,item){
                // 如果 页面上卷高度 大于 楼层li距离html顶部间距
                if( $(window).scrollTop() + 500 > $(item).offset().top ){
                    // 在侧边栏li中 找索引下标相同的侧边栏li 添加css样式 其他兄弟侧边栏li删除css样式
                    $('.storeNav li').eq( $(item).index() ).addClass('active').siblings().removeClass('active');
                }
            })

        })


    </script>
</body>
</html>

2、树状菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
                * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        ul {
            width: 200px;
            border: 2px solid #000;
            margin: 50px auto;
            padding: 0 0 0 20px;
        }

        ul>li::before {
            content: "+";
        }

        ul>li.active::before {
            content: "-";
        }

        ul>li>ol {
            padding: 0 0 0 20px;
            display: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是一级菜单
            <ol>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ol>
        </li>
        <li>我是一级菜单
            <ol>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ol>
        </li>
        <li>我是一级菜单
            <ol>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ol>
        </li>
        <li>我是一级菜单
            <ol>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ol>
        </li>
    </ul>


    <script src=".././jquery.min.js"></script>
    <script>
        // 给 ul>li 添加点击事件
        $('ul>li').click(function(){
            $(this)                     // 当前点击的 ul>li 
            .toggleClass('active')      // 切换css 也就是 切换 起始的 + / -
            .find('ol')                 // ul>li 中 查询 ol
            .slideToggle()              // 让点击的ul>li 中的 ol标签 切换 显示状态
            .parent()                   // ol标签的父级 也就是 点击的ul>li标签
            .siblings()                 // 找到所有兄弟li标签
            .removeClass('active')      // 删除 class,active 也就是 起始显示的 + 
            .find('ol')                 // 所有兄弟ul>li中查询ol标签
            .slideUp();                 // 显示状态为隐藏状态        
        })

    </script>
</body>
</html>

标签：菜单,center,树状,li,ul,div,js,width
来源： https://blog.csdn.net/Canace_Xyxjjcaw/article/details/120692623

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js小案例-楼层导航-树状菜单/前端