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 相关文章推荐
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
js实现抽奖效果
Mar 27 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
JavaScript手风琴页面制作
May 17 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
基于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+highchats生成动态统计图
2014/05/21 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
python2 对excel表格操作完整示例
2020/02/23 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
英文请假条
2014/04/11 职场文书
大学开学计划书
2014/04/30 职场文书
开学典礼演讲稿
2014/05/23 职场文书
化学工程专业求职信
2014/08/10 职场文书
教师个人发展总结
2015/02/11 职场文书
撤诉状格式范本
2015/05/19 职场文书
闪闪红星观后感
2015/06/08 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python