html 下拉菜单 js,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;

}

li {

list-style: none;

float: left;

}

#tabCon {

clear: both;

}

#tabCon div {

display: none;

}

#tabCon div.fdiv {

display: block;

}

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

内容一

内容二

内容三

内容四

function $(id){

return typeof id=="string"?document.getElementById(id):id;

}

var EventUtil = {

addHandler: function(element, type, handler) {

if(element.addEventListener) {

element.addEventListener(type, handler, false);

} else if(element.attachEvent) {

element.attachEvent("on" + type + handler);

} else {

element["on" + type] = handler;

}

},

removeHandler: function(element, type, handler) {

if(element.removeEventListener) {

element.removeEventListener(type, handler, false);

} else if(element.detachEvent) {

element.detachEvent("on" + type + handler);

} else {

element["on" + type] = null;

}

}

}

var tabs = $("tab").getElementsByTagName("li");

var divs = $("tabCon").getElementsByTagName("div");

for(var i = 0; i < tabs.length; i++) {

var set = function() {

change(this);

}

EventUtil.addHandler(tabs[i], "click", set);

//tabs[i].οnclick=function(){change(this);}

}

function change(obj) {

console.log(obj);

for(var i = 0; i < tabs.length; i++) {

if(tabs[i] == obj) {console.log(tabs[i]);

// tabs[i].style.display = "block";

divs[i].style.display = "block";

} else {

// tabs[i].style.display = "none";

divs[i].style.display = "none";

}

}

}

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;

}

以上就是通过css,js,jq三个方式实现简易下拉菜单的写法，有更好的写法欢迎你的指教。希望大家对脚本之家网站的支持！