jQuery实现向下滑出的平滑下拉菜单效果

本文实例讲述了jQuery实现向下滑出的平滑下拉菜单效果。分享给大家供大家参考。具体如下:

这里演示的jQuery向下滑出的下拉平滑菜单,可添加多个菜单选项,修改起来比较灵活的下滑菜单,颜色风格自己可修改,不多介绍了,感兴趣的运行一下代码看效果。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-xlph-menu-codes/

具体代码如下:

<!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>

<title>jquery缓冲下拉导航菜单特效</title>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>");

$("ul.topnav li span").mouseover(function() {

$(this).parent().find("ul.subnav").slideDown('fast').show();

$(this).parent().hover(function() {

}, function(){

$(this).parent().find("ul.subnav").slideUp('slow');

});

}).hover(function() {

$(this).addClass("subhover");

}, function(){

$(this).removeClass("subhover");

});

});

</script>

<style>

body,form,ul{margin:0px; padding:0px;}

body{font-size:12px;}

.clear{clear:both}

div.examples_body {

width: 750px;

margin: 50px auto;

}

h2.title_name {

font-family: normal Georgia,'Times New Roman',Times,serif;

font-weight: normal;

font-size: 4em;

padding: 50px 0 20px 0;

text-align: center;

}

h2.title_name span {

font-family: normal Georgia,'Times New Roman',Times,serif;

color: #AAA;

font-size: 0.9em;

}

h2.title_name small {

color: #AAAAAA;

display: block;

font-family: normal Verdana,Arial,Helvetica,sans-serif;

font-size: 0.2em;

letter-spacing: 1.0em;

text-transform: uppercase;

}

div.examples_body h3 {

color: #555;

font-size: 130%;

padding-bottom: 15px;

margin-bottom: 15px;

}

p.demo_btn {

width: 750px;

margin: 30px auto;

font-size: 0;

text-indent: -9999px;

clear: both;

overflow: hidden;

}

p.demo_btn a {

width: 160px;

height: 41px;

float: right;

background: url(images/Download_Button.gif) no-repeat;

}

p.demo_btn a:hover {

background: url(images/Download_Button_o.gif) no-repeat;

}

div.examples_body_wrap h3 {

color: #f9f66d;

font-size: 130%;

padding-bottom: 15px;

margin-bottom: 15px;

background: url(images/solid-line-news.gif) repeat-x bottom;

}

div.examples_body_wrap {

width: 750px;

margin: 50px auto 0 auto;

clear: both;

}

ul.topnav {

width: 710px;

float: left;

background: #222;

background: url(images/topnav_bg.gif) repeat-x;

}

ul.topnav li {

float: left;

margin: 0;

padding: 0 10px 0 15px;

position: relative;

display: inline;

}

ul.topnav li a {

padding: 10px 5px;

color: #fff;

display: block;

text-decoration: none;

float: left;

}

ul.topnav li a:hover {

-moz-border-radius: 3px;

-khtml-border-radius: 3px;

-webkit-border-radius: 3px;

}

ul.topnav li span {

width: 17px;

height: 35px;

float: left;

background: url(images/subnav_btn.gif) no-repeat center top;

}

ul.topnav li span.subhover {

background-position: center bottom; cursor: pointer;

}

ul.topnav li ul.subnav {

width: 170px;

position: absolute;

left: 0; top: 35px;

background: #333;

margin: 0; padding: 0;

display: none;

float: left;

border: 1px solid #111;

}

ul.topnav li ul.subnav li{

width: 170px;

margin: 0; padding: 0;

border-top: 1px solid #252525;

border-bottom: 1px solid #444;

clear: both;

}

html ul.topnav li ul.subnav li a {

width: 145px;

float: left;

background-color: #333;

padding-left: 20px;

font-size: 0.9em;

}

html ul.topnav li ul.subnav li a:hover {

background-color: #222;

}

</style>

</head>

<body>

<div class="examples_body">

<ul class="topnav">

<li><a href="#">下拉菜单0</a></li>

<li>

<a href="#">下拉菜单1</a>

<ul class="subnav">

<li><a href="#">下拉子菜单</a></li>

<li><a href="#">下拉子菜单</a></li>

</ul>

</li>

<li>

<a href="#">下拉菜单2</a>

<ul class="subnav">

<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="#">下拉菜单3</a>

<ul class="subnav">

<li><a href="#">下拉子菜单</a></li>

<li><a href="#">下拉子菜单</a></li>

<li><a href="#">下拉子菜单</a></li>

</ul>

</li>

<li><a href="#">下拉菜单4</a></li>

<li><a href="#">下拉菜单5</a></li>

</ul>

<!-- Examples body -->

</div>

<div class="clear"></div>

</body>

</html>

希望本文所述对大家的jquery程序设计有所帮助。

以上是 jQuery实现向下滑出的平滑下拉菜单效果 的全部内容, 来源链接: utcz.com/z/320775.html

回到顶部