導航頁面的下拉菜單

時間 2019-11-17

標籤導航頁面下拉菜單简体版

原文原文鏈接

一：用HTML和CSS實現下拉菜單的隱藏和展現：javascript

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

*{ 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;}

二：用javascript實現：java

<body>
<div id="nav">
<ul>
  <li><a href="#">首頁</a></li>
  <li onmouseover="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 onmouseover="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>

*{ 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;}

<script type="text/javascript">
        function ShowSub(li) {
            var subMenu = li.getElementsByTagName("ul")[0]; ;
            subMenu.style.display = "block";
        }

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

    </script>

三：用JQuery實現：jquery

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

*{ 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;}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
  $(function(){
      $(".navmenu").mouseover(function(){
         $(this).children("ul").show();
              
     })
     
     $(".navmenu").mouseout(function(){
         $(this).children("ul").hide();
     })
  })
  
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。