分别用js 和 html/css实现下拉菜单特效

Posted 王林飞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了分别用js 和 html/css实现下拉菜单特效相关的知识,希望对你有一定的参考价值。

    在网站的制作过程,我们常常会遇到导航栏中会出现一级菜单,二级菜单这样的现象,到底如何实现呢?接下里我们用两种方法来实现:

1.用js来实现此效果:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}

a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}

ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}

ul li ul{ display:none;}



</style>

 <script type="text/javascript">

        function displaySubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "block";

        }

        function hideSubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "none";

        }

    </script>
</head>

<body>
<div id="nav">
<ul>
  <li><a href="#">首页</a></li>
  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">课程大厅</a>
     <ul>
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">Html/CSS</a></li>
     </ul>  
  </li>
  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><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>
</html>

  此方法主要运用:鼠标经过事件 onmouseover   鼠标离开事件 onmouseout 时调用函数。

 

2.用html/css实现下拉菜单

 

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<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{   display:none; width:90px; position:absolute;}
 ul li:hover ul{ display:block;}
  
 
</style>
</head>

<body>
<div id="menu">
   <ul>
   
  <li><a href="#">首页</a></li>
  <li><a href="#">课程大厅</a>
      <ul>
  
   <li><a href="#">JavaScript</a></li>
  <li><a href="#">jQuery</a></li>
  
      </ul>
  
  </li>
  <li><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>
</html>

  此方式主要运用:设置鼠标指向链接时的形式(display:block/none)

 

以上是关于分别用js 和 html/css实现下拉菜单特效的主要内容,如果未能解决你的问题,请参考以下文章

html+css下拉菜单怎么制作

三种方式实现下拉菜单效果

HTML+CSS导航之下拉菜单方法1——JS

HTML+CSS实现网页的导航栏和下拉菜单

asp 二级联动菜单

原生JS实现悬停下拉菜单