jQuery+CSS 实现的超Sexy下拉菜单

澳门威尼斯娱乐在线 1 
什么贯彻
Step 1 HTML

  早前开采了 Soh Tanaka 分享的不行 Sexy 的 Drop Down Menu w/ jQuery &
CSS,稍作修改达成了一类别下拉,并实现了 ASP.NET 中通过输出 HTML
动态创制版本,风野趣的同室能够打包成 Server Control。

超简洁的CSS下拉菜单,超简洁CSS下拉菜单

效果与利益体验:

HTML文件代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁的HTML+CSS下拉菜单-HoverTree</title><base target="_blank" />
<link href="http://hovertree.com/texiao/css/3/hovertreecss3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 代码 开始 -->
<h1>简洁的HTML+CSS下拉菜单</h1>
<nav class="nav">
<ul class="nav_menu">
<li class="nav_menu-item"><a href="http://hovertree.com/" target="_blank">首页</a></li>
<li class="nav_menu-item">
<a href="http://hovertree.com/menu/css/" target="_blank">CSS</a>
<ul class="nav_submenu">
<li class="nav_submenu-item"> <a href="http://hovertree.com/menu/downjquery/" target="_blank">jQuery下载</a></li>
<li class="nav_submenu-item"> <a href="http://hovertree.com/guestbook/addmessage.aspx" target="_blank">留言</a></li>
<li class="nav_submenu-item"> <a href="http://hovertree.com/texiao/" target="_blank">特效</a></li>
</ul>
</li>
<li class="nav_menu-item">
<a href="http://hovertree.com/hvtart/bjae/48fa7b1b3162a7a4.htm" target="_blank">关于</a>
<ul class="nav_submenu">
<li class="nav_submenu-item"> <a href="http://hovertree.com/shortanswer/" target="_blank">简答题</a></li>
<li class="nav_submenu-item"> <a href="http://tool.keleyi.com/" target="_blank">工具</a></li>
<li class="nav_submenu-item"><a href="http://hovertree.com/menu/csharp/" target="_blank">C#</a></li>
<li class="nav_submenu-item"><a href="http://hovertree.com/hvtart/bjae/g71ha4qs.htm">原文</a></li>
</ul>
</li>
<li class="nav_menu-item"><a href="http://keleyi.com/" target="_blank">柯乐义</a></li>
<li class="nav_menu-item"><a href="http://hovertree.com/hvtimg/" target="_blank">图片</a></li>
</ul>
</nav>
<!-- 代码 结束 -->

</body>
</html>

 

利用方式:

1、在head区域引进样式表文件
<link href=””
rel=”stylesheet” type=”text/css” />

2、在您的网页中投入<!– 代码 开始 –><!– 代码 甘休–>注释区域代码就可以

3、注意ul和li的嵌套关系,以及一流和二级菜单样式的取舍,就可以做出你想要的领航菜单功效。

web前端:

效果体验: HTML文件代码: ! DOCTYPE
html html xmlns =”…

jQuery实现下拉菜单

一、居中

1、块成分居中:给块成分自身设置:margin:0 auto;,块成分必得安装宽度

2、行内块元素居中:给成分父级设置text-algin:center;

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10             list-style: none;
 11         }
 12         .nav{
 13             width: 100%;
 14             height: 40px;
 15             background: #0044DD;
 16             margin: 100px auto;
 17         }
 18         .nav .item{
 19            /* font-size: 0;*/
 20             width: 606px;
 21         margin:0 auto;
 22 
 23         }
 24         .nav .item li{
 25             font-size: 16px;
 26             width: 100px;
 27             height: 40px;
 28            /* display: inline-block;*/
 29             float: left;
 30             line-height:40px;
 31             text-align: center;
 32             border-right: 1px solid #CCCCCC;
 33             position: relative;
 34             margin-bottom: 0;
 35         }
 36 
 37         .nav li a{
 38             text-decoration: none;
 39             color: #ffffff;
 40         }
 41         .nav .item ul{
 42             position: absolute;
 43             left:0;
 44             top:40px;
 45             display: none;
 46         }
 47         .nav .item ul li{
 48             font-size: 16px;
 49             width: 100px;
 50             height: 40px;
 51             background-color: #2B93D2;
 52             border-top:1px solid #CCCCCC;
 53 
 54         }
 55     </style>
 56     <script src="jquery-1.11.1.min.js"></script>
 57     <script>
 58         $(document).ready(function(){
 59             /*$(".nav li").hover(function(){
 60                 $(this).children("ul").show();
 61             },function(){
 62                 $(this).children("ul").hide();
 63             });*/
 64             $(".item li").hover(function(){
 65                 $(this).children("ul").slideToggle();
 66             });
 67         });
 68     </script>
 69 </head>
 70 <body>
 71 <div class="nav">
 72     <ul class="item">
 73         <li><a href="">网站首页</a>
 74             <ul>
 75                 <li><a href="">案例展示</a></li>
 76                 <li><a href="">案例展示</a></li>
 77                 <li><a href="">案例展示</a></li>
 78             </ul>
 79         </li>
 80         <li><a href="">新闻中心</a>
 81             <ul>
 82                 <li><a href="">案例展示</a></li>
 83                 <li><a href="">案例展示</a></li>
 84                 <li><a href="">案例展示</a></li>
 85             </ul>
 86         </li>
 87         <li><a href="">最新活动</a>
 88             <ul>
 89                 <li><a href="">案例展示</a></li>
 90                 <li><a href="">案例展示</a></li>
 91                 <li><a href="">案例展示</a></li>
 92             </ul></li>
 93         <li><a href="">产品中心</a>
 94             <ul>
 95                 <li><a href="">案例展示</a></li>
 96                 <li><a href="">案例展示</a></li>
 97                 <li><a href="">案例展示</a></li>
 98             </ul></li>
 99         <li><a href="">技术文章</a>
100             <ul>
101                 <li><a href="">案例展示</a></li>
102                 <li><a href="">案例展示</a></li>
103                 <li><a href="">案例展示</a></li>
104             </ul>
105         </li>
106         <li class="last"><a href="">关于我们</a>
107             <ul>
108                 <li><a href="">案例展示</a></li>
109                 <li><a href="">案例展示</a></li>
110                 <li><a href="">案例展示</a></li>
111             </ul>
112         </li>
113     </ul>
114 </div>
115 </body>
116 </html>

运行效果:

 

复制代码 代码如下:

HTML部分:

<ul class=”topmenu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Tutorials</a>
<ul class=”submenu1″>
<li><a href=”#”>Ch1</a></li>
<li><a href=”#”>Ch2</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch21</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch211</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch2111</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch21111</a></li>
<li><a href=”#”>Ch21112</a></li>
<li><a href=”#”>Ch21113</a></li>
<li><a href=”#”>Ch21114</a></li>
<li><a href=”#”>Ch21115</a></li>
<li><a href=”#”>Ch21116</a></li>
</ul>
</li>
<li><a href=”#”>Ch2112</a></li>
<li><a href=”#”>Ch2113</a></li>
<li><a href=”#”>Ch2114</a></li>
<li><a href=”#”>Ch2115</a></li>
</ul>
</li>
<li><a href=”#”>Ch212</a></li>
<li><a href=”#”>Ch213</a></li>
<li><a href=”#”>Ch214</a></li>
</ul>
</li>
<li><a href=”#”>Ch22</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch221</a></li>
<li><a href=”#”>Ch222</a></li>
<li><a href=”#”>Ch223</a></li>
</ul>
</li>
<li><a href=”#”>Ch23</a></li>
</ul>
</li>
<li><a href=”#”>Ch3</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch31</a></li>
<li><a href=”#”>Ch32</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”#”>Resources</a>
<ul class=”submenu1″>
<li><a href=”#”>Sub Nav Link</a></li>
<li><a href=”#”>Sub Nav Link</a></li>
</ul>
</li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Advertise</a></li>
<li><a href=”#”>Submit</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>

Copy to
Clipboard澳门威尼斯娱乐在线 2引用的从头到尾的经过:[www.bkjia.com] <ul
class=”topmenu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Tutorials</a>
<ul class=”submenu1″>
<li><a href=”#”>Ch1</a></li>
<li><a href=”#”>Ch2</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch21</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch211</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch2111</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch21111</a></li>
<li><a href=”#”>Ch21112</a></li>
<li><a href=”#”>Ch21113</a></li>
<li><a href=”#”>Ch21114</a></li>
<li><a href=”#”>Ch21115</a></li>
<li><a href=”#”>Ch21116</a></li>
</ul>
</li>
<li><a href=”#”>Ch2112</a></li>
<li><a href=”#”>Ch2113</a></li>
<li><a href=”#”>Ch2114</a></li>
<li><a href=”#”>Ch2115</a></li>
</ul>
</li>
<li><a href=”#”>Ch212</a></li>
<li><a href=”#”>Ch213</a></li>
<li><a href=”#”>Ch214</a></li>
</ul>
</li>
<li><a href=”#”>Ch22</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch221</a></li>
<li><a href=”#”>Ch222</a></li>
<li><a href=”#”>Ch223</a></li>
</ul>
</li>
<li><a href=”#”>Ch23</a></li>
</ul>
</li>
<li><a href=”#”>Ch3</a>
<ul class=”submenu11″>
<li><a href=”#”>Ch31</a></li>
<li><a href=”#”>Ch32</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”#澳门威尼斯娱乐在线,”>Resources</a>
<ul class=”submenu1″>
<li><a href=”#”>Sub Nav Link</a></li>
<li><a href=”#”>Sub Nav Link</a></li>
</ul>
</li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Advertise</a></li>
<li><a href=”#”>Submit</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>

Step 2 CSS

CSS部分:

复制代码 代码如下:

Copy to
Clipboard澳门威尼斯娱乐在线 3援用的内容:[www.bkjia.com]
<style type=”text/css”>
/* Header */
body
{
margin: 0;
padding: 0;
font: 10px normal Arial, Helvetica, sans-serif;
background: #ddd url(images/sexydropdownmenu/body_bg.gif) repeat-x;
}
.container
{
width: 960px;
margin: 0 auto;
position: relative;
}
#header
{
background: url(images/sexydropdownmenu/header_bg.gif) no-repeat center
top;
padding-top: 120px;
}
#header .version
{
color: #111;
font-size: 40px;
padding: 38px 450px 7px 0;
text-align: right;
display: block;
position: absolute;
top: 0;
right: 0;
}
#header .disclaimer
{
color: #999;
padding: 100px 0 7px 0;
text-align: right;
display: block;
position: absolute;
top: 0;
right: 0;
}
#header .disclaimer a
{
color: #ccc;
}
/* Sexy Drop Down Menu */
ul.topmenu
{
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(images/sexydropdownmenu/topnav_bg.gif) repeat-x;
}
ul.topmenu li
{
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*–Declare X and Y axis base for sub
navigation–*/
}
ul.topmenu li a, ul.topmenu li a.hover
{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topmenu li a.hover, ul.topmenu li a:hover
{
background: url(images/sexydropdownmenu/topnav_hover.gif) no-repeat
center top;
}
ul.topmenu li span
{
/*–Drop down trigger styles–*/
width: 17px;
height: 35px;
float: left;
background: url(images/sexydropdownmenu/subnav_btn.gif) no-repeat
center top;
}
ul.topmenu li span.hover
{
background-position: center bottom;
cursor: pointer;
}
ul.topmenu li ul.submenu1
{
/*–Hover effect for trigger–*/
list-style: none;
position: absolute; /*–Important – Keeps submenu1 from affecting main
navigation flow–*/
left: 0;
top: 35px;
background: #333;
margin: 0;
padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topmenu li ul.submenu1 li
{
margin: 0;
padding: 0;
border-top: 1px solid #252525; /*–Create bevel effect–*/
border-bottom: 1px solid #444; /*–Create bevel effect–*/
clear: both;
width: 170px;
}
ul.topmenu li ul.submenu1 li a
{
float: left;
width: 145px;
background: #333 url(images/sexydropdownmenu/dropdown_linkbg.gif)
no-repeat 10px center;
padding-left: 20px;
}
ul.topmenu li ul.submenu1 li a:hover
{
/*–Hover effect for submenu1 links–*/
background: #222 url(images/sexydropdownmenu/dropdown_linkbg.gif)
no-repeat 10px center;
}
ul.topmenu li ul.submenu1 li ul.submenu11
{
list-style: none;
position: absolute; /*–Important – Keeps submenu11 from affecting main
navigation flow–*/
left: 170px;
top: -2px;
background: #333;
margin: 0;
padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
</style>

<style type=”text/css”>
/* Header */
body
{
margin: 0;
padding: 0;
font: 10px normal Arial, Helvetica, sans-serif;
background: #ddd url(images/sexydropdownmenu/body_bg.gif) repeat-x;
}
.container
{
width: 960px;
margin: 0 auto;
position: relative;
}
#header
{
background: url(images/sexydropdownmenu/header_bg.gif) no-repeat center
top;
padding-top: 120px;
}
#header .version
{
color: #111;
font-size: 40px;
padding: 38px 450px 7px 0;
text-align: right;
display: block;
position: absolute;
top: 0;
right: 0;
}
#header .disclaimer
{
color: #999;
padding: 100px 0 7px 0;
text-align: right;
display: block;
position: absolute;
top: 0;
right: 0;
}
#header .disclaimer a
{
color: #ccc;
}
/* Sexy Drop Down Menu */
ul.topmenu
{
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(images/sexydropdownmenu/topnav_bg.gif) repeat-x;
}
ul.topmenu li
{
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*–Declare X and Y axis base for sub
navigation–*/
}
ul.topmenu li a, ul.topmenu li a.hover
{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topmenu li a.hover, ul.topmenu li a:hover
{
background: url(images/sexydropdownmenu/topnav_hover.gif) no-repeat
center top;
}
ul.topmenu li span
{
/*–Drop down trigger styles–*/
width: 17px;
height: 35px;
float: left;
background: url(images/sexydropdownmenu/subnav_btn.gif) no-repeat
center top;
}
ul.topmenu li span.hover
{
background-position: center bottom;
cursor: pointer;
}
ul.topmenu li ul.submenu1
{
/*–Hover effect for trigger–*/
list-style: none;
position: absolute; /*–Important – Keeps submenu1 from affecting main
navigation flow–*/
left: 0;
top: 35px;
background: #333;
margin: 0;
padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topmenu li ul.submenu1 li
{
margin: 0;
padding: 0;
border-top: 1px solid #252525; /*–Create bevel effect–*/
border-bottom: 1px solid #444; /*–Create bevel effect–*/
clear: both;
width: 170px;
}
ul.topmenu li ul.submenu1 li a
{
float: left;
width: 145px;
background: #333 url(images/sexydropdownmenu/dropdown_linkbg.gif)
no-repeat 10px center;
padding-left: 20px;
}
ul.topmenu li ul.submenu1 li a:hover
{
/*–Hover effect for submenu1 links–*/
background: #222 url(images/sexydropdownmenu/dropdown_linkbg.gif)
no-repeat 10px center;
}
ul.topmenu li ul.submenu1 li ul.submenu11
{
list-style: none;
position: absolute; /*–Important – Keeps submenu11 from affecting main
navigation flow–*/
left: 170px;
top: -2px;
background: #333;
margin: 0;
padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
</style>

jQuery部分代码:

Step 3 jQuery

Copy to
Clipboard澳门威尼斯娱乐在线 4引用的剧情:[www.bkjia.com]
<script type=”text/javascript”>
$(document).ready(function() {
// Top Menu
$(“ul.submenu1”).parent().append(“<span></span>”); //Only
shows drop down trigger when js is enabled (Adds empty span tag after
ul.submenu1*)
$(“ul.topmenu li span”).click(function() { //When trigger is
clicked…
//Following events are applied to the submenu1 itself (moving submenu1
up and down)
$(this).parent().find(“ul.submenu1”).slideDown(‘fast’).show(); //Drop
down the submenu1 on click
$(this).parent().hover(function() {
}, function() {
$(this).parent().find(“ul.submenu1”).slideUp(‘slow’); //When the mouse
hovers out of the submenu1, move it back up
});
//Following events are applied to the trigger (Hover events for the
trigger)
}).hover(function() {
$(this).addClass(“hover”); //On hover over, add class “hover”
}, function() { //On Hover Out
$(this).removeClass(“hover”); //On hover out, remove class “hover”
});

复制代码 代码如下:

$(“ul.topmenu li ul.submenu1 li”).hover(function() {
$(this).find(“ul.submenu11:first”).show(“slow”);
}, function() {
$(this).find(“ul.submenu11:first”).hide(“fast”);
});
});
</script>

<script type=”text/javascript”>
$(document).ready(function() {
// Top Menu
$(“ul.submenu1”).parent().append(“<span></span>”); //Only
shows drop down trigger when js is enabled (Adds empty span tag after
ul.submenu1*)
$(“ul.topmenu li span”).click(function() { //When trigger is
clicked…
//Following events are applied to the submenu1 itself (moving submenu1
up and down)
$(this).parent().find(“ul.submenu1”).slideDown(‘fast’).show(); //Drop
down the submenu1 on click
$(this).parent().hover(function() {
}, function() {
$(this).parent().find(“ul.submenu1”).slideUp(‘slow’); //When the mouse
hovers out of the submenu1, move it back up
});
//Following events are applied to the trigger (Hover events for the
trigger)
}).hover(function() {
$(this).addClass(“hover”); //On hover over, add class “hover”
}, function() { //On Hover Out
$(this).removeClass(“hover”); //On hover out, remove class “hover”
});

演示:

$(“ul.topmenu li ul.submenu1 li”).hover(function() {
$(this).find(“ul.submenu11:first”).show(“slow”);
}, function() {
$(this).find(“ul.submenu11:first”).hide(“fast”);
});
});
</script>

Soh Tanaka 分享的那些 Sexy 的 Drop
Down Menu w/ jQuery CSS,稍作修改实现了数以万计下拉,并落到实处了 ASP.NET
中通过输出 HTML 动态创造版本,…

躬行实践代码
//www.jb51.net/jiaoben/23955.html

您也许感兴趣的篇章:

  • 用CSS落成下拉菜单的有余方法
  • css+js下拉菜单
  • 网页布局+纯CSS纵向下拉菜单
    IE6/IE7包容
  • 支持IE6 IE7 Firefox
    的纯CSS的下拉菜单
  • JS+CSS
    制作的极品轻便的下拉菜单附图
  • jQuery结合CSS制作精良的select下拉菜单
  • js+css完毕超简洁的二级下拉菜单效果代码
  • 二个css与js结合的下拉菜单帮衬主流浏览器
  • js+CSS实现模拟华丽的select控件下拉菜单效果
  • 纯css下拉菜单 无需js

相关文章