形形色色的下拉菜单

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

实现这个导航栏:

首先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()函数,实现鼠标经过一级菜单, 二级菜单显示和隐藏.

在头部添加如下代码:

<script type="text/javascript">
        function ShowSub(li) {
            var subMenu =  li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }

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

    </script>

并在body中调用函数。

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

调用jQuery库;
编写显示子菜单函数;
编写隐藏子菜单函数。

头部:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
  $(function(){
     $(".navmenu").mouseover(function(){
         $(this).children("ul").show();
             
     })
    
     $(".navmenu").mouseout(function(){
         $(this).children("ul").hide();
     })
  })
 
</script>

bootstrap实现响应式菜单:

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

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值