形形色色的下拉菜单

最新推荐文章于 2024-08-29 07:42:55 发布

Da哒哒

最新推荐文章于 2024-08-29 07:42:55 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_41343876/article/details/84203183

版权

实现下拉菜单的三种方法：

实现这个导航栏：

首先css和body部分是相同的，如下：

<style type="text/css">
*{ margin:0px; padding:0px;}
 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
 ul{ list-style:none;}
 ul li{ float:left;  line-height:40px; text-align:center; position:relative;}
 a{ text-decoration:none; color:#000; display:block; width:90px;}
 a:hover{ color:#FFF; background-color:#666;}
 ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; } 
 ul li ul{  width:90px; position:absolute; left:0px; top:40px; display:none;}
</style>

<body>
<div id="menu">
 <ul>
   <li><a href="#">首页</a></li>
   <li class="navmenu"><a href="#">课程大厅</a>
      <ul>  
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">jQuery</a></li>
      </ul>
  
   </li>
   <li class="navmenu"><a href="#">学习中心</a>
      <ul>
         <li><a href="#">视频学习</a></li>
         <li><a href="#">案例学习</a></li>
         <li><a href="#">交流平台</a></li>
      </ul>
   </li>
   <li><a href="#">经典案例</a></li>
   <li><a href="#">关于我们</a></li>
  
</ul>


</div> 
</body>

1.HTML/css实现下拉菜单：

在css部分添加如下代码：

ul li:hover ul{display:block;}

2.JS方法实现下拉菜单显示和隐藏：

给有二级菜单的一级菜单添加鼠标事件,并调用showsub()/hidesub()函数,实现鼠标经过一级菜单, 二级菜单显示和隐藏.

在头部添加如下代码：

        function HideSub(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }

</script>

并在body中调用函数。

3.jQuery方法实现下拉菜单显示和隐藏：

调用jQuery库；

编写显示子菜单函数；

编写隐藏子菜单函数。

头部：

bootstrap实现响应式菜单：

正确引用bootstrap即可，然而bootstrap样式较为死板，要实现更丰富的响应式布局还要自己改CSS样式和布局。

Da哒哒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫