jQuery结合CSS制作动态的下拉菜单


Posted in Javascript onOctober 27, 2015

当要在一个有限的导航菜单空间放一个大的子菜单时,我们一般采用下拉菜单的形式来弥补空间的不足。本文将带大家用最少的时间,使用jQuery和CSS结合制作一个动态的下拉菜单。

jQuery结合CSS制作动态的下拉菜单

XHTML
首先是要在页面的head部分引入jquery库,这是必须的。

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

接着我使用一个无序列表来构建菜单。

<ul class="menu"> 
  <li><a href="#">首页</a></li> 
  <li><a href="#">服务</a></li> 
  <li><a href="#">案例</a></li> 
  <li><a href="#">关于</a></li> 
  <li><a href="#">BLOG</a></li> 
</ul>

一目了然,看起来非常简洁,由于下拉菜单开始是关闭的,我还要建立一个可视的可触发下拉的按钮,本文为了方便直接使用了一张图片作为触发按钮。并将图片放置菜单列表上部

<img src="nav.gif" width="184" height="32" class="menu_head" />

CSS
分别给菜单建立起CSS样式,请看代码:

.menu_head{border:1px solid #998675; background:#f30} 
.menu{display:none; width:184px; border:1px solid #998675; border-top:none} 
.menu li{list-style:none; background:#493e3b} 
.menu li a{padding:10px; display:block;color:#fff; text-decoration:none;} 
.menu li a:hover{font-weight:bold;} 
.menu li.alt{background:#362f2d;}

值得注意的是,.menu li.alt样式是用来区分奇偶行换行要用的,在下文的jquery代码中会体现。
jQuery
在jQuery代码中,首先我要个下拉菜单行数进行区分,分别给偶数行一个样式:alt。接着为图片按钮添加单击触发事件,当单击按钮时可以切换下拉菜单。

$(function(){ 
  $(".menu li:even").addClass("alt"); 
  $("img.menu_head").click(function(){ 
    $(".menu").slideToggle("fast"); 
  }); 
});

注意我使用了jQuery的slideToggle方法以滑动的方式实现菜单的显示和隐藏,效果非常流畅。

以上就是分享的jQuery结合CSS制作动态的下拉菜单,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
基于JavaScript实现年月日三级联动
Jun 22 Javascript
jquery实现的V字形显示效果代码
Oct 27 #Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 #Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 #Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 #Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 #Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 #Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 #Javascript
You might like
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python pygame模块编写飞机大战
2018/11/20 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
wxPython实现文本框基础组件
2019/11/18 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
python和php学习哪个更有发展
2020/06/17 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
抽样调查项目计划书
2014/04/24 职场文书
美术学专业求职信
2014/07/23 职场文书
项目申请汇报材料
2014/08/16 职场文书
高中军训的心得体会
2014/09/01 职场文书
故宫导游词
2015/01/31 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
2016十一国庆节感言
2015/12/09 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers