慕课-各种下拉菜单

最新推荐文章于 2022-10-10 10:42:56 发布

原创最新推荐文章于 2022-10-10 10:42:56 发布 · 722 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #css

web前端-下拉菜单专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何创建下拉菜单，包括静态HTML/CSS布局，通过JavaScript和jQuery实现动态效果，特别是详细讲解了jQuery方法来实现下拉菜单的显示与隐藏功能，确保了浏览器的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：
第一步：静态网页的制作(html/css);
第二步：动态特效的实现-下拉菜单的显示与隐藏。
第三步：浏览器的兼容
方式： css方法实现 javascript方法实现 jQuery方法实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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{ line-height:40px; text-align:center; position:relative; float:left; }
 a{ text-decoration:none; color:#000; display:block; width:90px;}
 a:hover{ color:#FFF; background-color:#666;}
 ul li ul li{ float:none;margin-top:2px; background-color:#eee; } 
 ul li ul{width:90px; position:absolute; display:none; }
 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>


**JS方法实现下拉菜单的显示和隐藏**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 ShowSub(li) {
            var subMenu =  var subMenu=li.getElementsByTagName("u1")[0]  ;
            subMenu.style.display = "block ";
        }

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

    </script>
</head>

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

jquery方法实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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{  width:90px; position:absolute; left:0px; top:40px; display:none;}
</style>
<!--重点先引用jQuery库,在定义函数,通过childen()/show()/hide()等方法实现.-->
 <script src="http://apps.bdimg.com/libs/jquery/2.1.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>

</head>

<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>