导航菜单栏实现二级下拉菜单

最新推荐文章于 2021-09-26 20:43:56 发布
最新推荐文章于 2021-09-26 20:43:56 发布
阅读量881 收藏 4
点赞数 2
分类专栏： HTML

1.仅使用html和css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{margin:0;padding: 0;list-style: none;text-decoration: none;}
    #nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
    ul{background: #aaa}
    ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
    ul li:hover{background: #cea;}
    ul li ul li{float: none;}
    /*关键一：将二级菜单设置为display：none;*/
    ul li ul{position: absolute;top:40px;left: 0; display: none;}
    ul li ul li:hover{background: red;}
    /*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/
    ul li:hover ul{display: block;}
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">汽车</a>
                <ul>
                    <li><a href="#">奥迪</a> </li>
                    <li><a href="#">道奇</a> </li>
                </ul>
            </li>
            <li><a href="">手机</a>
                <ul>
                    <li><a href="#">vivo</a> </li>
                    <li><a href="#">oppo</a> </li>
                </ul>
            </li>
            <li><a href="">联系我们</a></li>
        </ul>
    </div>   
</body>
</html>

2.使用javascript实现二级下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display:none;}
ul li ul li:hover{background: red;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">汽车</a>
<!-- 关键一：在二级标题从属的一级标题标签内设置时间执行程序，this代表的时这个li元素 -->
<ul>
<li><a href="#">奥迪</a> </li>
<li><a href="#">道奇</a> </li>
</ul>
</li>
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">手机</a>
<ul>
<li><a href="#">vivo</a> </li>
<li><a href="#">oppo</a> </li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>	
<script>
function show(li){
var ul=li.getElementsByTagName("ul")[0];
// 关建二：在li这个对象内查询标签名为ul的标签，由于二级标签只有一个，所以索引为0即可。
ul.style.display="block";
// 关键三：当鼠标划过li时，其子元素ul标签的display为block
}
function hide(li){
var ul=li.getElementsByTagName("ul")[0];
ul.style.display="none";
// 关键四：当鼠标划出li时，其子元素ul的display为none
}
</script>
</body>
</html>

3.用jQuery实现二级下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    *{margin:0;padding: 0;list-style: none;text-decoration: none;}
    #nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
    ul{background: #aaa}
    ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
    ul li:hover{background: #cea;}
    ul li ul li{float: none;}
    ul li ul{position: absolute;top:40px;left: 0; display: none;}
    ul li ul li:hover{background: red;}
</style>
</head>
<body>
    <div id="nav">
    <ul>
        <li><a href="">首页</a></li>
        <li class="navmenu"><a href="">汽车</a>
          <ul>
               <li><a href="#">奥迪</a> </li>
               <li><a href="#">道奇</a> </li>
         </ul>
        </li>
        <li class="navmenu"><a href="">手机</a>
          <ul>
              <li><a href="#">vivo</a> </li>
              <li><a href="#">oppo</a> </li>
         </ul>
        </li>
        <li><a href="">联系我们</a></li>
   </ul>
</div>	
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- 关键一：引入jQuery库文件 -->
<script type="text/javascript">
$(function(){
   $(".navmenu").mouseover(function(){
              $(this).children("ul").show();
})

})
// 关键二：正确使用jQuey的语法完成行为。
$(function(){
   $(".navmenu") .mouseout(function(){
             $(this).children("ul").hide();
})

})
</script>
</body>
</html>

 

anmic123
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS实现二级导航下拉菜单
05-06
纯css实现二级导航下拉菜单，在一级导航的基础上建二级导航。不使用JavaScript，使用纯css来实现。
二级导航菜单
热门推荐
qq_41343536的博客
07-31 1万+
本文用html5+css实现了二级导航菜单，二级导航菜单在网站建设中使用的越来越广泛。 效果图如下： 当鼠标悬停在一级菜单上时，出现二级下拉菜单 二级下拉菜单可以被选中，当鼠标悬停上去时，变色。 html代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-...
导航栏显示二级菜单
weixin_43447266的博客
09-03 676
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } li{ width: 100px;
html 导航二级下拉,html -----二级下拉导航的实现（常用）
weixin_32145817的博客
06-09 139
该楼层疑似违规已被系统折叠隐藏此楼查看此楼二级下拉菜单 .menu {font-family: arial, sans-serif; width:750px;margin:0;margin-left:auto;margin-right:auto;}.menu ul {padding:0;margin:0;list-style-type: none;} .menu ul li {float:lef...
JS中用三种方式实现导航菜单中的二级下拉菜单
10-21
我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单，比如下面这张...那么如何实现导航菜单栏中的二级下拉菜单呢？下面小编给大家分享JS中用三种方式实现导航菜单中的二级下拉菜单，感兴趣的朋友一起看看吧
jquery实现二级导航下拉菜单效果
10-23
主要介绍了jquery实现二级导航下拉菜单效果,具有一定参考借鉴价值,需要的朋友可以参考下
bootstrap实现二级下拉菜单效果
08-28
主要为大家详细介绍了bootstrap实现二级下拉菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery黑色二级下拉导航菜单代码
04-07
jQuery黑色二级下拉导航菜单代码是一款基于responsive-menu插件实现的jQuery网站导航菜单下载。
jquery实现黑色导航二级下拉菜单
06-06
黑色菜单导航，简洁大气，带有漂亮的二级下拉菜单效果
下拉导航菜单+垂直显示二级自菜单
10-25
下拉导航菜单+垂直显示二级自菜单效果： 鼠标移动上去，会垂直显示二级子菜单，效果非常好。 采用HTML+JavaScirp
CSS3二级下拉导航菜单
01-26
CSS3二级下拉导航菜单，鼠标经过一级菜单下拉显示二级菜单。
纯CSS实现超简单的二级下拉导航菜单代码
12-13
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码。分享给大家供大家参考。具体如下： 这是一款纯CSS菜单，二级下拉导航效果，是最简洁的CSS导航菜单，兼容性也很棒，IE7/8、火狐等都支持，而且它还是学习CSS菜单编写的典型教程，让你学会很多CSS技巧。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/css-simple-2l-show-nav-menu-codes/ 具体代码如下： 复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http
json数据创建多级下拉菜单.zip
07-04
json数据创建多级下拉菜单是一款基于jQuery使用json数据格式动态创建多级下拉收缩菜单导航代码。
关于layui导航栏不展示下拉列表的解决方法
10-16
今天小编就为大家分享一篇关于layui导航栏不展示下拉列表的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html二级下拉导航,html -----二级下拉导航的实现（常用）
weixin_30666427的博客
06-10 101
该楼层疑似违规已被系统折叠隐藏此楼查看此楼二级下拉菜单 .menu {font-family: arial, sans-serif; width:750px;margin:0;margin-left:auto;margin-right:auto;}.menu ul {padding:0;margin:0;list-style-type: none;} .menu ul li {float:lef...
html css js实现二级菜单,JS+CSS实现简单的二级下拉导航菜单效果
weixin_27059669的博客
06-26 1345
本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下：这是一款CSS配合JavaScript实现二级下拉导航菜单，好像CSS要配合JS才能写出好效果来，本款菜单同样用到了JS，菜单目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://w...
CSS实现自定义导航栏带二级菜单
缘如风的博客
08-23 2318
代码如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text
HTML+CSS实现导航栏二级下拉菜单图书案例
zabr1314的博客
09-26 3184
一.效果图 二.内容、要求 学习完HTML5+CSS之后，可以考虑设计并实现一个导航栏菜单，对某个项目比如你的个人书籍按类别（硬件类、软件类、语言类、网络类等分法）进行分门别类，其中上面括号中的类别为导航栏的一级菜单，它们各自的二级菜单是你所拥有的或知道的几本可能的属于这些类别的具体书籍。 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
html导航栏二级下拉菜单
最新发布
06-02
HTML导航栏二级下拉菜单是网页设计中经常用到的一种交互方式。在页面顶部或侧边设置一个导航栏，当用户鼠标悬停在某一个菜单项上时，会显示出一个下拉菜单，展示该菜单项下的更多选项。这种二级下拉菜单的实现可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值