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的cookie插件
Apr 07 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
JSONP基础知识详解
Mar 19 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
js实现微信聊天界面
Aug 09 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
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 IPV6正则表达式验证代码
2010/02/16 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
JavaScript 字符串连接性能优化
2008/12/20 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python搭建微信公众平台
2016/02/09 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
python使用knn实现特征向量分类
2018/12/26 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Python any()函数的使用方法
2019/10/28 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
学生学习总结的自我评价
2013/10/22 职场文书
农民工创业典型事迹
2014/01/25 职场文书
秘书英文求职信范文
2014/01/31 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
监守自盗观后感
2015/06/10 职场文书