预算有限的公司，网站内容不太多的公司，都可以通过响应式实现一套代码覆盖PC到移动端，这也算是互联网从PC过渡到移动端的产物吧。

现在绝大部分页面都在移动端了，PC端的项目更多的是与专业工作技能有关的，与大众老百姓有关的生活娱乐等页面几乎都移动端化了。

做了很多响应式的页面，今天翻箱底，找到一个入门级的导航条案例，可以放出来。

用手机端查看是这样的，点击菜单图标可以显示隐藏下拉菜单。

PC端是这样的：

可以点击图片看效果。

核心代码：

.header-wrapper{
    display: flex;
    gap: 20px;
    align-items: center;
    height: 70px;
}
.logo-img{
    height: 70px;
}
.nav{
    display: block;
}
.nav-ul{
    display: flex;
}
.nav-li{
    position: relative;
}
@media (any-hover:hover) {
    .nav-li.active .nav-a{
        color: var(--theme-color);
    }
}
.nav-a{
    display: block;
    height: 70px;
    padding: 0 1.5em;
    box-sizing: border-box;
    width: max-content;
    line-height: 70px;
    font-size: 0.875rem;
    border-top: 4px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    color: var(--linkcolor);
}
.subnav-ul{
    position: absolute;
    min-width: 120px;
    background-color: #fff;
    display: none;
    z-index: 100;
}
.subnav-a{
    display: block;
    padding: 0.8em 1.3em;
    color: #7a8e9d;
    font-size: 0.875rem;
}
.nav-a .icon-new{
    position: absolute;
    top: -10px;
    right: 3px;
    color: #f41330;
}
.nav-li-dot .nav-a::after{
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #f41330;
    top: 25px;
    right: 10px;
}
.nav-a .icon-dot{
    font-size: 1.5rem;
}
.nav-aside{
    display: flex;
    margin-left: auto;
}
.upload-ul{
    right: 0;
}
.nav-a .icon-search{
    font-size: 1.5rem;
    color: #d4dce2;
}

.nav-a .icon-upload1{
    color: #d4dce2;
}
.nav-a .icon-user{
    font-size: 1.35rem;
    vertical-align: middle;
    color: var(--theme-color);
}
.user-a{
    color: var(--theme-color);
}
.mobile-menu{
    height: 70px;
    padding:0 1em;
    line-height: 70px;
}
.icon-menu{
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
}
.mobile-menu .icon-close{
    font-size: 1.75rem;
    display: none;
}

@media (any-hover:hover) {
    .nav-a:hover,.nav-li:hover .nav-a{
        border-left-color: #eee;
        border-right-color: #eee;
        border-top-color: var(--theme-color);
        color: var(--linkcolor);
    }
    .nav-li:hover .subnav-ul{
        display: block;
    }
    .subnav-a:hover{
        background-color: #eff3f5;
    }
    .nav-a:hover .icon-search,.nav-a:hover .icon-upload1{
        color: var(--theme-color);
    }
}

@media screen and (max-width:1200px){
    .nav-aside{
        display: none;
    }
}
@media screen and (max-width:1000px){
    .icon-menu{
        display: block;
    }
    .nav{
        position: absolute;
        z-index: 100;
        width: 100%;
        min-width: 375px;
        right: 0;
        top: 70px;
        background-color: rgba(255, 255, 255, 0.5);
        display: none;
    }
    .header-wrapper{
        justify-content: space-between;
    }
    .nav .nav-ul{
        flex-direction: column;
    }
    .subnav-ul{
        position: static;
    }
    .nav-a{
        position: relative;
        line-height: 40px;
        height: 40px;
    }
    .nav-li-dot .nav-a::after{
        top: 8px;
        right: 9px;
    }
}

用了一点点js实现点击图标显示隐藏下拉菜单以及子下拉菜单的切换。

        const oMenu = document.querySelector('.mobile-menu');
        const oIconMenu = document.querySelector('.icon-menu');
        const oIconClose = document.querySelector('.icon-close');
        const oNav = document.querySelector('.nav');
        const oLis = document.querySelectorAll('.nav .nav-li');
        // 主菜单开关
        let isOn = true;
        // 主菜单点击,显示或隐藏下拉菜单
        oMenu.onclick = function () {
            if (isOn) {
                oNav.style.display = 'block';
                oIconMenu.style.display = 'none';
                oIconClose.style.display = 'block';
            } else {
                oNav.style.display = 'none';
                oIconMenu.style.display = 'block';
                oIconClose.style.display = 'none';
                // 把所有子下拉菜单都隐藏
                oLis.forEach(item => {
                    // 为每个li设置状态,下拉菜单默认关闭.
                    item.isOn = false;
                    const oSubMenu = item.querySelector('.subnav-ul');
                    if (oSubMenu) {
                        oSubMenu.style.display = 'none';
                    }
                })
            }
            // 开关的状态每点击一次都要取反，true变成false，false变成true
            isOn = !isOn;
        }

        // 子下拉菜单的显示隐藏
        oLis.forEach(item => {
            // 为每个li设置状态,下拉菜单默认关闭.
            item.isOn = false;
            showOrHideSubMenu(item, 'subnav-ul');
        })

        // 点击li,如果下面有子菜单,则显示或隐藏切换
        function showOrHideSubMenu(title, submenu) {
            if (title) {
                title.addEventListener('touchend', function (e) {
                    // 因为这里下拉菜单还是嵌套结构,导致会冒泡,所以指定了事件对象
                    if (e.target.classList.contains('nav-li') || e.target.classList.contains('nav-a') || e.target.classList.contains('icon-dot')) {
                        const menu = title.querySelector(`.${submenu}`);
                        // console.log(e.target)
                        if (menu) {
                            if (title.isOn) {
                                menu.style.display = 'none';
                            } else {
                                menu.style.display = 'block';
                            }
                        }
                        title.isOn = !title.isOn;
                    }
                })
            }
        }