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 相关文章推荐
Jquery ajax基础教程
Nov 20 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
javascript实现简易计算器
Feb 01 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
js 替换
2008/02/19 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
vue数据初始化initState的实例详解
2019/04/11 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Django ORM filter() 的运用详解
2020/05/14 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
财务经理的岗位职责
2013/12/17 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server