美文网首页
原生JS+CSS实现一个简单带二级菜单顶部导航

原生JS+CSS实现一个简单带二级菜单顶部导航

作者: Criya | 来源:发表于2018-05-03 14:53 被阅读0次

目标是当鼠标悬浮在导航栏上时,出现指定的二级菜单。



首先先将基本的导航框架写好。
html和css代码

<body>   
    <nav class="clearfix">
        <div class="topNavBar">
            <ul class="clearfix">
                <li>
                    <a>主页</a>
                </li>
                <li>
                    <a>介绍</a>
                </li>
                <li>
                    <a>技能</a>
                </li>
                <li>
                    <a>关于</a>
                </li>
            </ul>
        </div>
    </nav>
</body>
<style>
        .clearfix:after{content: ''; display: block; clear: both;}
        *{margin: 0; padding: 0;}
        ul, ol{list-style: none;}
        a{text-decoration: none; cursor: pointer;}
        nav{position: fixed; box-sizing: border-box; width: 100%; padding:12px; background: #fdf5e6;}
        .topNavBar > ul{float: right;}
        .topNavBar > ul > li{float: left; margin: 0 16px;}
 </style>
效果如下

接下来就是写对应的二级菜单,这个二级菜单ul的位置很关键,可以写在一级导航lia里面

                <li>
                    <a>技能
                        <ul>
                            <li>javascript</li>
                            <li>html</li>
                            <li>css</li>
                        </ul>
                    </a>
                </li>

也可以写在a外面。

                <li>
                    <a>技能</a>
                    <ul>
                        <li>javascript</li>
                        <li>html</li>
                        <li>css</li>
                    </ul>
                </li>

为了不使a标签变得复杂和结构混乱,我们选择后者。(这才是正常人的做法吧- -!)


为了不让二级菜单占据父元素的宽度,我们让它定位以脱离文档流。


.topNavBar > ul > li > ul{
  padding: 8px; 
  position: absolute; 
  top: 100%;
  background: white; 
  white-space: nowrap;
  box- shadow: 0 0 5px rgb(0, 0, 0, 0.5);
}

absolute定位后,li元素会被压缩,nowrap禁止换行。

到目前为止,这个顶部导航栏的主干的html部分和css部分基本完成,就剩下js部分了。
因为我们是想通过鼠标悬浮显示二级菜单,那么我们只需要一开始就把二级菜单隐藏,当鼠标移动到一级导航时显示二级菜单就好了。

<script>
    let liTags = document.querySelectorAll(".topNavBar > ul > li");
    for (let i=0; i<liTags.length; i++){
        liTags[i].onmouseenter = function (e) {
            let li = e.currentTarget;
            li.classList.add("active");
        }
        liTags[i].onmouseleave = function (e) {
            let li = e.currentTarget;
            li.classList.remove("active");
        }
    }
</script>
          .topNavBar > ul > li. > u{
            display: none;
        }    
        .topNavBar > ul > li.active > ul{
            display: block;
        }

现在一个干净简单的导航栏就完成了。

相关文章

  • 原生JS+CSS实现一个简单带二级菜单顶部导航

    目标是当鼠标悬浮在导航栏上时,出现指定的二级菜单。 首先先将基本的导航框架写好。html和css代码 接下来就是写...

  • Qt编写自定义控件39-导航标签

    一、前言 在很多菜单导航界面中,当单击了二级菜单或者三级菜单以后,顶部会显示带箭头或者其他标识的导航标签,可以单击...

  • Android

    顶部导航栏 仿京东搜索 顶部导航栏 今日头条导航栏 导航栏快速实现 瀑布流 搜索框带历史记录 tablayout ...

  • 总结《茶韵》中踩的坑(已解决)

    一.index页面 1.基于jquery的三级导航菜单。 ①先实现二级普通下拉菜单,动态下拉菜单实现步骤: (1)...

  • 视图容器控件

    2019年12月24日 一.view 二.scroll-view 顶部滚动菜单实现 3.顶部导航栏切换效果 三.s...

  • fsLayui菜单导航栏使用说明(一)

    介绍 支持顶部菜单,左边菜单,菜单导航栏等功能,点击子菜单后,自动打开tab页。操作流程:通过顶部菜单,切换左边子...

  • vue 导航菜单切换样式设置

    在使用vue开发的时候,几乎每个项目里面都会有导航菜单切换,不管是顶部导航菜单、还是侧边导航菜单,切换到当前的菜单...

  • iOS菜单滚动定位以及滚动悬浮实现方案

    前言 最近应项目需求,要实现一个类似于淘宝顶部菜单点击定位到相应的section位置的界面效果,如下: 顶部的导航...

  • vue使用bus进行组件通信

    全局引入 在main.js中全局引入 使用场景 在顶部导航栏选择不同的二级菜单,在左侧渲染相对应的三级菜单,就涉及...

  • 仿掘金项目顶部导航

    顶部导航之网站logo 添加导航菜单 导航栏右侧登录注册按钮 头部美化 自定义样式

网友评论

      本文标题:原生JS+CSS实现一个简单带二级菜单顶部导航

      本文链接:https://www.haomeiwen.com/subject/nuwkrftx.html