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>
  • 相关阅读:
    如何只通过Sandboxed Solution启动一个定时执行的操作
    创建与SharePoint 2010风格一致的下拉菜单 (续) 整合Feature Custom Action框架
    创建与SharePoint 2010风格一致的下拉菜单
    《SharePoint 2010 应用程序开发指南》第二章预览
    SharePoint 2013 App 开发 (1) 什么是SharePoint App?
    使用Jscex增强SharePoint 2010 JavaScript Client Object Model (JSOM)
    搜索范围的管理
    SharePoint 2010 服务应用程序(Service Application)架构(1)
    SharePoint 2010 服务应用程序(Service Application)架构(2)
    SharePoint 2013 App 开发 (2) 建立开发环境
  • 原文地址:https://www.cnblogs.com/JQ330-54864/p/5746801.html
Copyright © 2011-2022 走看看