当一个大的子菜单是放置在一个有限的导航菜单的
空间,我们通常使用下拉菜单来弥补空间的不足,本文将带你用最少的时间,使用jQuery和CSS制作动态下拉菜单。
XHTML
第一个是在页面的头部引入jQuery库,这是必要的。
然后,我使用了一个无
顺序表来构建菜单。
首页
服务 案例
关于
博客
看一看,它看起来很简单。因为下拉菜单开始,我还需要
设置一个可以触发和下拉的可视按钮。为了便于直接使用
图片作为触发按钮,并将图片放在菜单列表的顶部。
CSS
分别设置菜单的CSS样式,并查看代码:
。menu_head { border: 1px solid # 998675;
背景:# F30 }
.menu{display:none; width:184px; border:1px solid #998675; border-top:none}
。菜单里{列表样式:无;背景:# 493e3b }
菜单里。{ padding: 10px;
显示:块;颜色:# FFF;文字装饰:无;}
菜单李A:悬停{
字体重量:粗体;}
。菜单里。ALT {背景:# 362f2d;}
值得注意的是,li.alt。菜单风格是用来区分奇数和偶数行之间的线,它将反映在下面的jQuery代码。
jQuery
在jQuery代码,首先我想做一个下拉菜单行数为偶数的
模式之间的
区别,然后添加一个图片的ALT键点击触发事件,你可以开关的下拉菜单,当你点击按钮。
$(
函数(){())
$(。菜单里:即使)。AddClass(ALT);
$(img。menu_head)。Click(function(){)
$(菜单)。SlideToggle(快速);
});
});
注意,我使用jQuery的slidetoggle
方法滑动菜单的显示和隐藏,而且效果很光滑。
以上是jQuery与css的共享,配合动态下拉菜单,希望能帮助大家
学习。