js,jq,css多方面实现简易下拉菜单功能的示例分析-创新互联

这篇文章主要介绍js,jq,css多方面实现简易下拉菜单功能的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

你所需要的网站建设服务，我们均能行业靠前的水平为你提供.标准是产品质量的保证，主要从事做网站、成都做网站、企业网站建设、手机网站制作设计、网页设计、品牌网站设计、网页制作、做网站、建网站。创新互联公司拥有实力坚强的技术研发团队及素养的视觉设计专才。

效果图预览

js,jq,css多方面实现简易下拉菜单功能的示例分析

一、css实现

html代码部分



 
  
  html+css下拉菜单
  
 
 
  
   
    首页
   
   
    菜单一
    
     内容一
     内容一
     内容一
    
   
   
    菜单二
    
     内容二
     内容二
     内容二
    
   
   
    菜单三
    
     内容三
     内容三
     内容三
    
   
   
    菜单四

css部分

*{
 padding: 0;
 margin: 0;
}
a{
 text-decoration: none;
 color: #000;
}
ul,li{
 list-style: none;
}
.menu{
 margin: 50px auto;
 width: 500px;
 height: 35px;
 background-color: #ccc;
 text-align: center;
 line-height: 35px;
}
.menu li{
 float: left;
 width: 20%;
 position: relative;
}
.menu li:hover ul{
 display: block;
}
.menu li a{
 display: block; 
}
.menu li a:hover{
 background-color: burlywood;
}
.menu li ul{
 display: none;
 position: absolute;
}
.menu li ul li{
 width: 100%;
 margin-top: 2px;
 background-color: darkgray;
}
.menu li ul li:hover{
 cursor: pointer;
 background-color: chartreuse;
}

二、js实现

html和js部分（实现方法一）



 
  
  JS下拉菜单
  
 
 
  
   
    首页
   
   
    菜单一
    
     内容一
     内容一
     内容一
    
   
   
    菜单二
    
     
内容二
     内容二
     内容二
    
   
   
    菜单三
    
     
内容三
     内容三
     内容三
    
   
   
    菜单四
   
  
      
   window.onload = function(){ 
    function $(id){
     return typeof id == "string"?document.getElementById(id):id; 
    }
    var menu_li = $("menu").getElementsByTagName("li");    
    for(var i = 0; i < menu_li.length; i++){
     menu_li[i].onmouseover = function(){
      var ss = this.getElementsByTagName("ul")[0];
      if(ss != undefined){
       ss.style.display = "block";
      }
     }
    }
    for(var j = 0; j < menu_li.length; j++){
     menu_li[j].onmouseout = function(){
      var ssa = this.getElementsByTagName("ul")[0];
      if(ssa != undefined){
       ssa.style.display = "none";
      }     
     }
    }    
   }

html和js部分（实现方法二）



 
  
  
 
 
  
   
    
     标题一
     标题二
     标题三
     标题四

内容一

内容二

内容三

内容四

*{ padding: 0; margin: 0; } a{ text-decoration: none; color: #000; } ul,li{ list-style: none; } .menu{ margin: 50px auto; width: 500px; height: 35px; background-color: #ccc; text-align: center; line-height: 35px; } .menu li{ float: left; width: 20%; position: relative; } .menu li a{ display: block; } .menu li a:hover{ background-color: burlywood; } .menu li ul{ display: none; position: absolute; left: 0; } .menu li ul li{ width: 100%; margin-top: 2px; background-color: darkgray; } .menu li ul li:hover{ cursor: pointer; background-color: chartreuse; }

JS下拉菜单

首页

菜单一

内容一
内容一
内容一

菜单二

内容二

菜单三

内容三

菜单四

$(function(){ $(".menu li").hover(function(){ $(this).children("ul").show(); },function(){ $(this).children("ul").hide(); }); });

以上是“js,jq,css多方面实现简易下拉菜单功能的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

重庆分公司，新征程启航

js,jq,css多方面实现简易下拉菜单功能的示例分析-创新互联

其他资讯