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 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
js禁止表单重复提交
Aug 29 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP print类函数使用总结
2010/06/25 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python 字典(Dictionary)操作详解
2014/03/11 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
用Python实现随机森林算法的示例
2017/08/24 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
python numpy元素的区间查找方法
2018/11/14 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
python 实现多维数组转向量
2019/11/30 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
计划生育个人总结
2015/03/02 职场文书
深入浅析Django MTV模式
2021/09/04 Python