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 学习之旅 (2)
Feb 05 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
vue实现移动端input上传视频、音频
Aug 18 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 gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
js性能优化技巧
2015/11/29 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
python访问sqlserver示例
2014/02/10 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
分析python请求数据
2018/08/19 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
妇女儿童发展规划实施方案
2014/03/16 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
创先争优宣传标语
2014/10/08 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
vue使用element-ui按需引入
2022/05/20 Vue.js