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

2023-11-21 23:07:58

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>

码农公寓

相关文章