zoukankan      html  css  js  c++  java

  • 导航页面的下拉菜单

    一：用HTML和CSS实现下拉菜单的隐藏和展示：

    <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实现：

    <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实现：

    <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>
  • 相关阅读:
    第三章 属性高级
    第二章 对象高级
    第一章 函数高级
    JavaScript笔记（6）
    Charles断点设置
    Charles安装及设置
    python-uiautomator2（001）
    Pycharm安装及激活
    Postman中Collection Runner添加外部数据文件
    Postman带Token的接口测试
  • 原文地址：https://www.cnblogs.com/JQ330-54864/p/5746801.html
Copyright © 2011-2022 走看看