教学之友,学习之友。

站长教学网

弹性jquery垂直网页导航菜单

时间:2012-04-11 15:24来源:未知 作者:ken 点击:
弹性jquery垂直网页导航菜单
弹性jquery垂直网页导航菜单

jquery弹性竖导航网页菜单,可控制关闭打开,效果流畅。站长教学网搜集整理。

使用说明:

样式:

.dropdown{
/* The expandable lists */
display:none; /*注释这行就可以打开的时候显示全部菜单*/
padding-top:5px;
width:100%;
}

代码:

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded 这个代码在页面完全被装载后被执行。*/

/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
$.easing.def = "easeOutBounce";

/* Binding a click event handler to the links: 绑定li.button单击触发事件执行的内容*/
$('li.button a').click(function(e){

/* Finding the drop down list that corresponds to the current section: 寻找绑定按钮的统一级别的下一个层*/
var dropDown = $(this).parent().next();

/* Closing all other drop down sections, except the current one 关闭所有的下拉菜单,打开当前一个下拉菜单*/
$('.dropdown').not(dropDown).slideUp('slow'); //注释这行就能使打开当前下拉菜单,而不会关闭其它菜单。
dropDown.slideToggle('slow');

/* Preventing the default event (which would be to navigate the browser to the link's address) 取消事件的默认动作。*/
e.preventDefault();
})

});

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
  • 上一篇:没有了
  • 下一篇:没有了
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
注册登录:不允许匿名留言,登录后留言无需输入验证码。
用户名: 验证码:点击我更换图片