HTML下拉导航菜单的实现：CSS/Js的实现方案

2020-11-25 12:35:16 阅读：128 来源： 互联网

标签：none color li ul HTML background Js margin CSS

熟练使用导航栏，对于网站排版非常重要,使用css，js，jq等你可以转换成好看的导航栏而不是枯燥的html菜单。

css实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <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>
  <li><a href="#">联系我们</a></li>
 </ul>
</div>
</body>
</html>

js实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
        <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 onm ouseover="displaySubMenu(this)" onm ouseout="hideSubMenu(this)"><a href="#">课程大厅</a>
     <ul>
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">Html/CSS</a></li>
     </ul>  
  </li>
  <li onm ouseover="displaySubMenu(this)" onm ouseout="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>
  <li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>

资源搜索网站大全 https://www.renrenfan.com.cn

jq实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
        <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>
  <li><a href="#">联系我们</a></li>
  </ul>
 </div> 
</body>
</html>

标签：none,color,li,ul,HTML,background,Js,margin,CSS
来源： https://www.cnblogs.com/xiaonian8/p/14035324.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML下拉导航菜单的实现：CSS/Js的实现方案