jQuery实现的fixedMenu下拉菜单效果代码


Posted in Javascript onAugust 24, 2015

本文实例讲述了jQuery实现的fixedMenu下拉菜单效果代码。分享给大家供大家参考。具体如下:

这里演示了仿Google风格的下拉菜单,其核心实际上是jquery.fixedMenu菜单,使用了jquery.fixedMenu.js和fixedMenu_style.css文件,已在代码中加注释,你可以从本代码中分享现这两个文件,然后重新引用。本菜单在鼠标点击主菜单的时候可向下显示二级子菜单,在火狐或Chrome浏览器下,还可显示菜单阴影效果。

运行效果截图如下:

jQuery实现的fixedMenu下拉菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<title>jQuery仿Google下拉导航菜单</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
/*fixedMenu_style.css代码*/
body{padding: 0;margin: 0;}
.menu{font: 13px/27px Arial,sans-serif;color: #3366CC;height: 30px;background: url(images/back.gif) repeat-x;}
.menu a: hover{background-color: #e4ebf8;}
.menu a{text-decoration: none;padding: 4px 8px 7px;color: #3366CC;outline: none;}
.menu ul{list-style: none;margin: 0;padding: 0 0 0 10px;}
.menu ul li{padding: 0;float: left;}
.menu ul li ul li{padding: 0;float: none;margin: 0 0 0 0px;width: 100%;}
.menu ul li ul{position: absolute;border: 1px solid #C3D1EC;box-shadow: 0 1px 5px #CCCCCC;margin-top: -1px;display: none;padding: 0px 16px 0px 0;}
.active ul{display: block !important;}
.active a{background-color: white;border: 1px solid #C3D1EC;border-bottom: 0;box-shadow: 0 -1px 5px #CCCCCC;display: block;height: 29px;padding: 0 8px 0 8px;position: relative;z-index: 1;}
.active a: hover{background-color: white;}
.active ul a: hover{background-color: #e4ebf8;}
.active ul a{border: 0 !important;box-shadow: 0 0 0 #CCCCCC;border: 0;width: 100%;}
.arrow{border-color: #3366CC transparent transparent;border-style: solid dashed dashed;margin-left: 5px;position: relative;top: 10px;}
</style>
<script>
//jquery.fixedMenu.js文件代码开始
(function($){
 $.fn.fixedMenu=function(){
  return this.each(function(){
   var menu= $(this);
   menu.find('ul li > a').bind('click',function(){
   if ($(this).parent().hasClass('active')){
    $(this).parent().removeClass('active');
   }
   else{
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active');
   }
   })
  });
 }
})(jQuery);
//jquery.fixedMenu.js文件代码结束
$('document').ready(function(){
 $('.menu').fixedMenu();
});
</script>
</head>
<body>
<div class="menu">
 <ul>
  <li>
   <a href="#">More Examples<span class="arrow"></span></a>
   <ul>
    <li><a href="#">Plugins and jQuery Examples</a></li>
    <li><a href="#">Prototype Examples</a></li>
    <li><a href="#">Mootools Examples</a></li>
    <li><a href="#">Javascript Examples</a></li>
   </ul>
  </li>
  <li>
   <a href="#">Plugins<span class="arrow"></span></a>
   <ul>
    <li><a href="#">Galleries</a></li>
    <li><a href="#">DropDown Menus</a></li>
    <li><a href="#">Content Slider</a></li>
    <li><a href="#">LightBox</a></li>
   </ul>
  </li>
  <li>
   <a href="#">Friend Sites<span class="arrow"></span></a>
   <ul>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">jquery特效</a></li>
   </ul>
  </li>
  <li>
   <a href="#">Contact<span class="arrow"></span></a>
   <ul>
    <li><a href="#">Follow us on Twitter</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Rss</a></li>
    <li><a href="#">e-mail</a></li>
   </ul>
  </li>
 </ul>
</div>
<div style="margin-top:200px;">
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 #Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 #Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 #Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 #Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 #Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 #Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 #Javascript
You might like
php 远程关机操作的代码
2008/12/05 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python中http请求方法库汇总
2016/01/06 Python
django2 快速安装指南分享
2018/01/05 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
如何使用python写截屏小工具
2020/09/29 Python
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
《忆江南》教学反思
2014/04/07 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
平安工地汇报材料
2014/08/19 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书