`

用CSS实现下拉菜单的多种方法

    博客分类：
  • web
CSSIEXHTMLJavaScriptHTML
阅读更多

横向下拉菜单

 

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="zh-CN" /> 
<title>横向下拉菜单</title> 
<style type="text/css"> 
<!-- 
* {margin:0;padding:0;border:0;} 
body { 
font-family: arial, 宋体, serif; 
font-size:12px; 
} 
#nav { 
height: 24px;  list-style-type: none;  padding-left:200px; 
line-height:24px;overflow:hidden;background:#999; 
} 
#nav a { 
display: block; width: 80px; text-align:center; 
} 
#nav a:link  { 
color:#EEE; text-decoration:none; 
} 
#nav a:visited  { 
color:#EEE;text-decoration:none; 
} 
#nav a:hover  { 
color:#FFF;text-decoration:none;font-weight:bold;background:#CCC; 
} 
#nav li { 
float: left; width: 80px; 
} 
#nav li ul { 
line-height: 24px; 
list-style-type: none; 
text-align:left; 
left: -999px; 
width: 520px; //注意,这里一定要设置宽度; 
position: absolute; 
background:#CCC; 
} 
#nav li ul li{ 
float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float 
} 
#nav li ul a{ 
display: block; width: 65px;text-align:left;padding-left:15px; 
} 
#nav li ul a:link  { 
color:#F1F1F1; text-decoration:none; 
} 
#nav li ul a:visited  { 
color:#F1F1F1;text-decoration:none; 
} 
#nav li ul a:hover  { 
color:#FFF;text-decoration:none;font-weight:normal;background:#C00; 
} 
#nav li:hover ul { 
left:25%; 
} 
#nav li.sfhover ul { 
left:25%; 
} 
#content { 
clear: left; 
} 
--> 
</style> 
<script type=text/javascript><!--//--><![CDATA[//><!-- 
function menuFix() { 
var sfEls = document.getElementById("nav").getElementsByTagName("li"); 
for (var i=0; i<sfEls.length; i++) { 
sfEls[i].onmouseover=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseDown=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseUp=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
""); 
} 
} 
} 
window.onload=menuFix; 
//--><!]]></script> 
</head> 
<body> 
<ul id="nav"> 
<li><a href="#">菜单一</a> 
<ul> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单一</a></li> 
</ul> 
</li> 
<li><a href="#">菜单二</a> 
<ul> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单二</a></li> 
</ul> 
</li> 
<li><a href="#">菜单三</a> 
<ul> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单三</a></li> 
</ul> 
</li> 
<li><a href="#">菜单四</a> 
<ul> 
<li><a href="#">菜单四</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#">菜单四</a></li> 
</ul> 
</li> 
<li><a href="#">菜单五</a> 
<ul> 
<li><a href="#">菜单五</a></li> 
<li><a href="#">菜单五</a></li> 
<li><a href="#">菜单五</a></li> 
<li><a href="#">菜单五</a></li> 
<li><a href="#">菜单五</a></li> 
</ul> 
</li> 
<li><a href="#">菜单六</a> 
<ul> 
<li><a href="#">菜单六</a></li> 
<li><a href="#">菜单六</a></li> 
<li><a href="#">菜单六</a></li> 
<li><a href="#">菜单六</a></li> 
<li><a href="#">菜单六</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</body> 
</html>
 

 

CSS下拉导航菜单效果

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS下拉菜单演示</title> 
<style type="text/css"> 
<!-- 
*{margin:0;padding:0;border:0;} 
body { 
font-family: arial, 宋体, serif; 
font-size:12px; 
} 
#nav { 
line-height: 24px; list-style-type: none; background:#666; 
} 
#nav a { 
display: block; width: 80px; text-align:center; 
} 
#nav a:link { 
color:#666; text-decoration:none; 
} 
#nav a:visited { 
color:#666;text-decoration:none; 
} 
#nav a:hover { 
color:#FFF;text-decoration:none;font-weight:bold; 
} 
#nav li { 
float: left; width: 80px; background:#CCC; 
} 
#nav li a:hover{ 
background:#999; 
} 
#nav li ul { 
line-height: 27px; list-style-type: none;text-align:left; 
left: -999em; width: 180px; position: absolute; 
} 
#nav li ul li{ 
float: left; width: 180px; 
background: #F6F6F6; 
} 
#nav li ul a{ wedisplay: block; width: 156px;text-align:left;padding-left:24px; 
} 
#nav li ul a:link { 
color:#666; text-decoration:none; 
} 
#nav li ul a:visited { 
color:#666;text-decoration:none; 
} 
#nav li ul a:hover { 
color:#F3F3F3;text-decoration:none;font-weight:normal; 
background:#C00; 
} 
#nav li:hover ul { 
left: auto; 
} 
#nav li.sfhover ul { 
left: auto; 
} 
#content { 
clear: left; 
} 
--> 
</style> 
<script type=text/javascript> 
<!--//--><![CDATA[//><!-- 
function menuFix() { 
var sfEls = document.getElementById("nav").getElementsByTagName("li"); 
for (var i=0; i<sfEls.length; i++) { 
sfEls[i].onmouseover=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseDown=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseUp=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
""); 
} 
} 
} 
window.onload=menuFix; 
//--><!]]> 
</script> 
</head> 
<body> 
<ul id="nav"> 
<li><a href="#">产品介绍</a> 
<ul> 
<li><a href="#">产品一</a></li> 
<li><a href="#">产品一</a></li> 
<li><a href="#">产品一</a></li> 
<li><a href="#">产品一</a></li> 
<li><a href="#">产品一</a></li> 
<li><a href="#">产品一</a></li> 
</ul> 
</li> 
<li><a href="#">服务介绍</a> 
<ul> 
<li><a href="#">服务二</a></li> 
<li><a href="#">服务二</a></li> 
<li><a href="#">服务二</a></li> 
<li><a href="#">服务二服务二</a></li> 
<li><a href="#">服务二服务二服务二</a></li> 
<li><a href="#">服务二</a></li> 
</ul> 
</li> 
<li><a href="#">成功案例</a> 
<ul> 
<li><a href="#">案例三</a></li> 
<li><a href="#">案例</a></li> 
<li><a href="#">案例三案例三</a></li> 
<li><a href="#">案例三案例三案例三</a></li> 
</ul> 
</li> 
<li><a href="#">关于我们</a> 
<ul> 
<li><a href="#">我们四</a></li> 
<li><a href="#">我们四</a></li> 
<li><a href="#">我们四</a></li> 
<li><a href="#">我们四111</a></li> 
</ul> 
</li> 
<li><a href="#">在线演示</a> 
<ul> 
<li><a href="#">演示</a></li> 
<li><a href="#">演示</a></li> 
<li><a href="#">演示</a></li> 
<li><a href="#">演示演示演示</a></li> 
<li><a href="#">演示演示演示</a></li> 
<li><a href="#">演示演示</a></li> 
<li><a href="#">演示演示演示</a></li> 
<li><a href="#">演示演示演示演示演示</a></li> 
</ul> 
</li> 
<li><a href="#">联系我们</a> 
<ul> 
<li><a href="#">联系联系联系联系联系</a></li> 
<li><a href="#">联系联系联系</a></li> 
<li><a href="#">联系</a></li> 
<li><a href="#">联系联系</a></li> 
<li><a href="#">联系联系</a></li> 
<li><a href="#">联系联系联系</a></li> 
<li><a href="#">联系联系联系</a></li> 
</ul> 
</li> 
</ul> 
</body> 
</html>
 

CSS水平下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>CSS Menu - Horizontal</title> 
<style type="text/css"> 
<!-- 
@import"dhtml-horiz.css"; 
--> 
body { 
margin: 0; 
padding: 30px; 
background: #FFF; 
color: #666; 
} 
h1 { 
font: bold 16px Arial, Helvetica, sans-serif; 
} 
p { 
font: 11px Arial, Helvetica, sans-serif; 
} 
a { 
color: #900; 
text-decoration: none; 
} 
a:hover { 
background: #900; 
color: #FFF; 
} 
/*CSS Code for Menu Begin:*/ 
/* Root = Horizontal, Secondary = Vertical */ 
ul#navmenu { 
margin: 0; 
border: 0 none; 
padding: 0; 
width: 500px; /*For KHTML*/ 
list-style: none; 
height: 24px; 
} 
ul#navmenu li { 
margin: 0; 
border: 0 none; 
padding: 0; 
float: left; /*For Gecko*/ 
display: inline; 
list-style: none; 
position: relative; 
height: 24px; 
} 
ul#navmenu ul { 
margin: 0; 
border: 0 none; 
padding: 0; 
width: 160px; 
list-style: none; 
display: none; 
position: absolute; 
top: 24px; 
left: 0; 
} 
ul#navmenu ul li { 
float: none; /*For Gecko*/ 
display: block !important; 
display: inline; /*For IE*/ 
} 
/* Root Menu */ 
ul#navmenu a { 
border: 1px solid #FFF; 
border-right-color: #CCC; 
border-bottom-color: #CCC; 
padding: 0 6px; 
float: none !important; /*For Opera*/ 
float: left; /*For IE*/ 
display: block; 
background: #EEE; 
color: #666; 
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 
text-decoration: none; 
height: auto !important; 
height: 1%; /*For IE*/ 
} 
/* Root Menu Hover Persistence */ 
ul#navmenu a:hover, 
ul#navmenu li:hover a, 
ul#navmenu li.iehover a { 
background: #CCC; 
color: #FFF; 
} 
/* 2nd Menu */ 
ul#navmenu li:hover li a, 
ul#navmenu li.iehover li a { 
float: none; 
background: #EEE; 
color: #666; 
} 
/* 2nd Menu Hover Persistence */ 
ul#navmenu li:hover li a:hover, 
ul#navmenu li:hover li:hover a, 
ul#navmenu li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover a { 
background: #CCC; 
color: #FFF; 
} 
/* 3rd Menu */ 
ul#navmenu li:hover li:hover li a, 
ul#navmenu li.iehover li.iehover li a { 
background: #EEE; 
color: #666; 
} 
/* 3rd Menu Hover Persistence */ 
ul#navmenu li:hover li:hover li a:hover, 
ul#navmenu li:hover li:hover li:hover a, 
ul#navmenu li.iehover li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover li.iehover a { 
background: #CCC; 
color: #FFF; 
} 
/* 4th Menu */ 
ul#navmenu li:hover li:hover li:hover li a, 
ul#navmenu li.iehover li.iehover li.iehover li a { 
background: #EEE; 
color: #666; 
} 
/* 4th Menu Hover */ 
ul#navmenu li:hover li:hover li:hover li a:hover, 
ul#navmenu li.iehover li.iehover li.iehover li a:hover { 
background: #CCC; 
color: #FFF; 
} 
ul#navmenu ul ul, 
ul#navmenu ul ul ul { 
display: none; 
position: absolute; 
top: 0; 
left: 160px; 
} 
/* Do Not Move - Must Come Before display:block for Gecko */ 
ul#navmenu li:hover ul ul, 
ul#navmenu li:hover ul ul ul, 
ul#navmenu li.iehover ul ul, 
ul#navmenu li.iehover ul ul ul { 
display: none; 
} 
ul#navmenu li:hover ul, 
ul#navmenu ul li:hover ul, 
ul#navmenu ul ul li:hover ul, 
ul#navmenu li.iehover ul, 
ul#navmenu ul li.iehover ul, 
ul#navmenu ul ul li.iehover ul { 
display: block; 
} 
</style> 
<script type="text/JavaScript"> 
navHover = function() { 
var lis = document.getElementById("navmenu").getElementsByTagName("LI"); 
for (var i=0; i<lis.length; i++) { 
lis[i].onmouseover=function() { 
this.className+=" iehover"; 
} 
lis[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp(" iehover\\b"), ""); 
} 
} 
} 
if (window.attachEvent) window.attachEvent("onload", navHover); 
</script> 
</head> 
<body> 
<h1>CSS Menu - Horizontal</h1> 
<hr /> 
<ul id="navmenu"> 
<li><a href="#">Blog</a></li> 
<li><a href="#">Work +</a> 
<ul> 
<li><a href="#">Websites +</a> 
<ul> 
<li><a href="#">qrayg</a></li> 
<li><a href="#">qArcade</a></li> 
<li><a href="#">qLoM</a></li> 
<li><a href="#">qDT</a></li> 
</ul> 
</li> 
<li><a href="#">Pen and Ink</a></li> 
<li><a href="#">Free Interfaces</a></li> 
</ul> 
</li> 
<li><a href="#">Learn +</a> 
<ul> 
<li><a href="#"><a href="http://www.jb51.net/list/list_10_1.htm" target="_blank"><font color=red>Fireworks</font></a> +</a> 
<ul> 
<li><a href="#">aquaButton</a></li> 
<li><a href="#">aquaButton2</a></li> 
<li><a href="#">waterDrop</a></li> 
<li><a href="#">lightFX</a></li> 
<li><a href="#">lightFX2</a></li> 
</ul> 
</li> 
<li><a href="#">CSS +</a> 
<ul> 
<li><a href="#">footerStick</a></li> 
<li><a href="#">spriteNav</a></li> 
<li><a href="#">@import</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="#">Info</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</body> 
</html>
 

CSS垂直下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>CSS Menu - Vertical</title> 
<style type="text/css"> 
body { 
margin: 0; 
padding: 30px; 
background: #FFF; 
color: #666; 
} 
h1 { 
font: bold 16px Arial, Helvetica, sans-serif; 
} 
p { 
font: 11px Arial, Helvetica, sans-serif; 
} 
a { 
color: #900; 
text-decoration: none; 
} 
a:hover { 
background: #900; 
color: #FFF; 
} 
/*CSS Code for Menu Begin:*/ 
/* Root = Vertical, Secondary = Vertical */ 
ul#navmenu, 
ul#navmenu li, 
ul#navmenu ul { 
margin: 0; 
border: 0 none; 
padding: 0; 
width: 160px; /*For KHTML*/ 
list-style: none; 
} 
ul#navmenu li { 
display: block !important; /*For GOOD browsers*/ 
display: inline; /*For IE*/ 
position: relative; 
} 
/* Root Menu */ 
ul#navmenu a { 
border: 1px solid #FFF; 
border-right-color: #CCC; 
border-bottom-color: #CCC; 
padding: 0 6px; 
display: block; 
background: #EEE; 
color: #666; 
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 
text-decoration: none; 
height: auto !important; 
height: 1%; /*For IE*/ 
} 
/* Root Menu Hover Persistence */ 
ul#navmenu a:hover, 
ul#navmenu li:hover a, 
ul#navmenu li.iehover a { 
background: #CCC; 
color: #FFF; 
} 
/* 2nd Menu */ 
ul#navmenu li:hover li a, 
ul#navmenu li.iehover li a { 
background: #EEE; 
color: #666; 
} 
/* 2nd Menu Hover Persistence */ 
ul#navmenu li:hover li a:hover, 
ul#navmenu li:hover li:hover a, 
ul#navmenu li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover a { 
background: #CCC; 
color: #FFF; 
} 
/* 3rd Menu */ 
ul#navmenu li:hover li:hover li a, 
ul#navmenu li.iehover li.iehover li a { 
background: #EEE; 
color: #666; 
} 
/* 3rd Menu Hover Persistence */ 
ul#navmenu li:hover li:hover li a:hover, 
ul#navmenu li:hover li:hover li:hover a, 
ul#navmenu li.iehover li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover li.iehover a { 
background: #CCC; 
color: #FFF; 
} 
/* 4th Menu */ 
ul#navmenu li:hover li:hover li:hover li a, 
ul#navmenu li.iehover li.iehover li.iehover li a { 
background: #EEE; 
color: #666; 
} 
/* 4th Menu Hover */ 
ul#navmenu li:hover li:hover li:hover li a:hover, 
ul#navmenu li.iehover li.iehover li.iehover li a:hover { 
background: #CCC; 
color: #FFF; 
} 
ul#navmenu ul, 
ul#navmenu ul ul, 
ul#navmenu ul ul ul { 
display: none; 
position: absolute; 
top: 0; 
left: 160px; 
} 
/* Do Not Move - Must Come Before display:block for Gecko */ 
ul#navmenu li:hover ul ul, 
ul#navmenu li:hover ul ul ul, 
ul#navmenu li.iehover ul ul, 
ul#navmenu li.iehover ul ul ul { 
display: none; 
} 
ul#navmenu li:hover ul, 
ul#navmenu ul li:hover ul, 
ul#navmenu ul ul li:hover ul, 
ul#navmenu li.iehover ul, 
ul#navmenu ul li.iehover ul, 
ul#navmenu ul ul li.iehover ul { 
display: block; 
} 
</style> 
<script type="text/javascript"> 
<!-- 
navHover = function() { 
var lis = document.getElementById("navmenu").getElementsByTagName("LI"); 
for (var i=0; i<lis.length; i++) { 
lis[i].onmouseover=function() { 
this.className+=" iehover"; 
} 
lis[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp(" iehover\\b"), ""); 
} 
} 
} 
if (window.attachEvent) window.attachEvent("onload", navHover); 
--> 
</script> 
</head> 
<body> 
<h1>CSS Menu - Vertical</h1> 
<hr /> 
<ul id="navmenu"> 
<li><a href="#">Blog</a></li> 
<li><a href="#">Work +</a> 
<ul> 
<li><a href="#">Websites +</a> 
<ul> 
<li><a href="#">qrayg</a></li> 
<li><a href="#">qArcade</a></li> 
<li><a href="#">qLoM</a></li> 
<li><a href="#">qDT</a></li> 
</ul> 
</li> 
<li><a href="#">Pen and Ink</a></li> 
<li><a href="#">Free Interfaces</a></li> 
</ul> 
</li> 
<li><a href="#">Learn +</a> 
<ul> 
<li><a href="#"><a href="http://www.jb51.net/list/list_10_1.htm" target="_blank"><font color=red>Fireworks</font></a> +</a> 
<ul> 
<li><a href="#">aquaButton</a></li> 
<li><a href="#">aquaButton2</a></li> 
<li><a href="#">waterDrop</a></li> 
<li><a href="#">lightFX</a></li> 
<li><a href="#">lightFX2</a></li> 
</ul> 
</li> 
<li><a href="#">CSS +</a> 
<ul> 
<li><a href="#">footerStick</a></li> 
<li><a href="#">spriteNav</a></li> 
<li><a href="#">@import</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="#">Info</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</body> 
</html>
 

CSS实现的中英文双语导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="Keywords" content="bilingual menu,中英文双语菜单" /> 
<meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /> 
<meta content="all" name="robots" /> 
<meta name="author" content="forestgan" /> 
<meta name="copyright" content="http://www.forest53.com" /> 
<title>完全用CSS实现的中英文双语导航菜单</title> 
<style type="text/css"> 
a{ 
color: #FFFF99; 
text-decoration: none; 
} 
a:hover{ 
color: #FFFFFF; 
text-decoration: underline; 
} 
#nav{ 
padding: 10px 10px 0; 
font-size: 12px; 
font-weight: bold; 
margin: 1em 0 0; 
list-style:none; 
} 
#nav li{ 
float: left; 
margin-right: 1px; 
} 
.bi{ 
position: relative; 
z-index: 0; 
} 
.bi:hover{ 
z-index: 99; 
} 
.bi:hover span{ 
visibility: visible; 
top: 0; 
left: 0; 
cursor: pointer; 
} 
.bi span{ 
position: absolute; 
left: -999em; 
visibility: hidden; 
} 
#nav li a,.bi:hover span{ 
line-height: 20px; 
text-decoration: none; 
background: #DDDDDD; 
color: #666666; 
display: block; 
width: 80px; 
text-align: center; 
} 
#nav li a:hover,.bi:hover span{ 
color: #FFFFFF; 
background: #DC4E1B; 
} 
.bi:hover span{ 
padding-top: 2px; 
} 
#navbar{ 
background: #DC4E1B; 
height: 8px; 
overflow: hidden; 
clear: both; 
} 
</style> 
<link href="../css/main.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="top"> 
<ul id="nav"> 
<li><a class="bi" href="Http://www.junstudio.org/">Home<span>首　页</span></a></li> 
<li><a class="bi" href="Http://www.junstudio.org/blog">Blog<span>日志</span></a></li> 
<li><a class="bi" href="Http://www.junstudio.org/guestbook">guestbook<span>留言本</span></a></li> 
<li><a class="bi" href="Http://www.pickbar.com/">Pickbar<span>精品吧</span></a></li> 
<li><a class="bi" href="Http://www.fansir.com/">fansir<span>樊SIR</span></a></li> 
</ul> 
<div id="navbar"></div> 
</body> 
</html>
 

 

 

 

 

分享到：
| javascript下拉菜单
评论
1 楼 blaiu 2012-02-01  
打个包传上来？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯CSS3下拉菜单导航 多种下拉弹出动画

    之前我们分享过非常多的jQuery/CSS3下拉菜单插件，有些非常实用，比如这...今天我们要介绍的是另外一款下拉菜单导航，它是纯CSS3实现，其特点是简单易用，并且支持多种下拉弹出动画，非常不错，大家可以下载源码试试。

    纯CSS3下拉菜单导航 子菜单多种展开动画

    这是一款非常漂亮的纯CSS3下拉菜单导航，这款菜单有两大亮点，一个是唯美的全屏背景图，非常适合个性化的个人博客使用。另外一个特点是子菜单拥有多种展开动画方式，有简单的淡入淡出，也有炫酷的折叠式展开。并且这...

    支持多种浏览器的纯CSS下拉菜单

    支持多种浏览器的纯CSS下拉菜单很好用 很强大

    国外一款Js+CSS动画下拉菜单

    国外一款Js+CSS动画下拉菜单，有多种风格可选择，菜单弹出时带有动画效果，压缩包内含有使用文档，不过是英文的，菜单有点复杂，感兴趣的朋友下载研究一下，老外的东西有一看。

    css经典横向菜单,多种样式

    css经典横向菜单,多种样式经典横向菜单,多种颜色、样式

    风格清新的CSS3折叠下拉菜单

    这是一款风格清新的CSS3下拉菜单，当鼠标移入菜单时，菜单会出现一段向下展开的折叠动画片段。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发~~~统一开发环境是一款HTML5跨平台一站式应用开发、调试和部署...

    js下拉菜单

    多种效果通过js实现的下拉菜单， jQuery简洁下拉菜单导航， jquery下拉竖导航菜单代码， 纯CSS的下拉菜单 支持IE6 IE7，基于jQuery实用下拉菜单，三级弹出菜单代码

    你值得拥有的CSS下拉菜单效果

    主要介绍了你值得拥有的多种CSS下拉菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    一些常用的CSS3网页元素动画效果

    像圆角按钮、浮动菜单、圆角的输入框、带箭头的浮动提示框、带三角的下拉菜单、网页拖动条、网页开关等，另外还包括一些用CSS3做出来的图标素材，如果想学习CSS3，这些素材还可作为不错的参考范例。

    经典导航菜单大集合 包括多种的导航菜单

    我辛苦收集的所有导航菜单集合，内容很丰富，包括多种的导航效果，有纯CSS,有jquer效果的，有Tab标签效果的等等，都很不错，在这里与大家分享，希望有好的资源都要共享，共同进步，感谢“站长下载”和“懒人下载”。

    free-css-drop-down-menu

    多种css下拉菜单,免费，高效，界面清爽

    10 款提高开发效率的 jQuery CSS3 组件

    CSS3个性化多级下拉菜单 CSS3立体动感进度条 HTML5实时动态数据图表 jQuery垂直文字新闻滚动插件totem jQuery带事件记录的多功能日历 jQuery仿百度贴吧图片切换插件 jQuery图片切换多种过渡效果 jQuery图片悬浮按钮...

    tree-select:React树选择

    rc-树选择React TreeSelect组件屏幕截图发展npm installnpm start例子 在线... 默认设置的min-width与输入相同布尔-- dropdownClassName 附加的className应用于下拉菜单细绳-- dropdownStyle 应用于下拉菜单的其他样

    multiselect-react-dropdown:使用搜索和各种选项React多选下拉列表

    它还具有像普通下拉菜单一样的功能（意味着单选下拉菜单）。入门1.安装npm install multiselect-react-dropdown2.演示3.基本用法import { Multiselect } from 'multiselect-react-dropdown' ;this . state = { ...

    Hugo 主题非常适合组织使用 最初是为TODO网站重新设计而构建的

    这个 Hugo 主题非常适合为小型组织的网站提供动力。它最初是为TODO集团建造的，具有以下优势：现代 - 简单而有效的现代设计。...Mega Menu - 带有下拉部分的大菜单。FAQ accordion - 带有手风琴结构的 FAQ 页面

    ExtJS4中文教程2 开发笔记 chm

    JQuery特效——下拉菜单 JQuery系列教程之XPath选择符 JQuery系列教程之选择符 JQuery自动缩放页面中的图片 JQuery获取浏览器的高度和宽度 jquery获得和设置下拉框值的代码 基于jquery的跨域调用文件 ==============...

    web-portfolio

    开发人员利用了多种响应式CSS方法，包括用于页眉和页脚布局的flexbox和CSS网格，以带有媒体查询的Selected Works网格样式来使布局适应较小的屏幕尺寸。 此外，开发人员利用自定义JS scrollCursor函数，可基于单击的...

    VisualizeIt:构建一个将使用系统音频来以多种频率显示音频信号的可视表示的应用程序

    该应用程序将使用您的设备麦克风来获取所听到的声音，以数字方式对音频进行采样，并以多种频率呈现有趣的音频信号视觉表示。 说明在页面加载时，它会询问您是否允许使用设备的麦克风...。单击“是”！ 您可以停留...

Magicbox
Global site tag (gtag.js) - Google Analytics