下拉菜单的实现

Posted 2020-09-16 惊风随笔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉菜单的实现相关的知识，希望对你有一定的参考价值。

CSS实现下拉菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <meta name="author" content="宋添发" />
        <meta name="Genarator" content="Sublime Text"/>
        <meta name="description" content="菜单的实现" />
        <meta name="keywords" content="CSS实现，下拉菜单"/>
<title>CSS实现下拉菜单</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>

JavaScript实现下拉菜单：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
        <meta name="author" content="宋添发" />
        <meta name="Genarator" content="Sublime Text"/>
        <meta name="description" content="菜单的实现" />
        <meta name="keywords" content="javascript实现，下拉菜单"/>
<title>JavaScript实现下拉菜单</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>

JQuery实现下拉菜单：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
        <meta name="author" content="宋添发" />
        <meta name="Genarator" content="Sublime Text"/>
        <meta name="description" content="菜单的实现" />
        <meta name="keywords" content="JQuery实现，下拉菜单"/>
<title>JQuery实现下拉菜单</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>
<script src="jquery-1.12.0.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>
</html>

以上是关于下拉菜单的实现的主要内容，如果未能解决你的问题，请参考以下文章

C#下拉菜单最后一项自定义的实现

用jquery设置下拉不可编辑，但是没起作用，求高手指点，急。。。

jquery实现简易大气3D导航下拉菜单菜单栏效果

jquery实现的点击二级下拉导航菜单

js代码实现下拉菜单

jQuery 如何实现 “鼠标悬浮下拉菜单” 效果？