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

顺晟科技

2021-09-21 13:15:06

297

熟练使用导航栏，对于网站排版非常重要,使用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 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>
  <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>

上一篇：css html固定上下导航栏下一篇：CSS word-wrap和word

网站建设

Css

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