js、jq、css怎么实现简易下拉菜单功能-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

js、jq、css怎么实现简易下拉菜单功能

本篇内容介绍了“js、jq、css怎么实现简易下拉菜单功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

专注于为中小企业提供做网站、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业湘乡免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

效果图预览

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部分（实现方法二）



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

内容一

内容二

内容三

内容四

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

三、JQ实现

html和jq部分



 
  
  JS下拉菜单
  
 
 
  
   
    首页
   
   
    菜单一
    
     内容一
     内容一
     内容一
    
   
   
    菜单二
    
     
内容二
     内容二
     内容二
    
   
   
    菜单三
    
     
内容三
     内容三
     内容三
    
   
   
    菜单四
   
  
  
      
   $(function(){
    $(".menu li").hover(function(){
     $(this).children("ul").show();
    },function(){
     $(this).children("ul").hide();
    });
   });

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 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、jq、css怎么实现简易下拉菜单功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

本文标题：js、jq、css怎么实现简易下拉菜单功能
标题路径：http://lswzjz.com/article/jsgosg.html

新闻中心

其他资讯