首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery实现可横向和竖向展开的动态下滑菜单效果

Posted in Javascript onAugust 24, 2015

本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果。分享给大家供大家参考。具体如下：

这里演示了两个下拉导航菜单的效果，用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现，最新的jquery版本也可以引入，在演示页面中，分别有横向水平向下滑出的下拉菜单，还有纵向垂直布局向右滑出的导航菜单，根据你的需要选择使用。

运行效果截图如下：

jquery实现可横向和竖向展开的动态下滑菜单效果

jquery实现可横向和竖向展开的动态下滑菜单效果

在线演示地址如下：

具体代码如下：

<!DOCTYPE html>
<head>
<title>jQuery纵向横向动态下拉导航菜单</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
//jquery.naviDropDown.1.0.js
(function($){
 $.fn.naviDropDown = function(options) { 
 var defaults = { 
  dropDownClass: 'dropdown',
  dropDownWidth: 'auto',
  slideDownEasing: 'easeInOutCirc',
  slideUpEasing: 'easeInOutCirc',
  slideDownDuration: 500,
  slideUpDuration: 500,
  orientation: 'horizontal'
 }; 
 var opts = $.extend({}, defaults, options);  
 return this.each(function() { 
  var $this = $(this);
  $this.find('.'+opts.dropDownClass).css('width', opts.dropDownWidth).css('display', 'none');
  var buttonWidth = $this.find('.'+opts.dropDownClass).parent().width() + 'px';
  var buttonHeight = $this.find('.'+opts.dropDownClass).parent().height() + 'px';
  if(opts.orientation == 'horizontal') {
  $this.find('.'+opts.dropDownClass).css('left', '0px').css('top', buttonHeight);
  }
  if(opts.orientation == 'vertical') {
  $this.find('.'+opts.dropDownClass).css('left', buttonWidth).css('top', '0px');
  }
  $this.find('li').hoverIntent(getDropDown, hideDropDown);
 });
 function getDropDown(){
  activeNav = $(this);
  showDropDown();
 }
 function showDropDown(){
  activeNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing});
 }
 function hideDropDown(){
  activeNav.find('.'+opts.dropDownClass).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown
 }
 };
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
 $('#navigation_horiz').naviDropDown({
  dropDownWidth: '300px'
 });
 $('#navigation_vert').naviDropDown({
  dropDownWidth: '300px',
  orientation: 'vertical'
 });
});
</script>
<style type="text/css">
* {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; line-height:16px}
.container {margin:10px auto; width:950px; height:300px; background:#eee; padding:50px 0 0 0} 
#navigation_horiz {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}
#navigation_horiz ul {height:50px; display:block}
#navigation_horiz ul li {display:block; float:left; width:200px; height:50px; background:#999; margin:0 1px 0 0; position:relative}
#navigation_horiz ul li a.navlink {display:block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}
#navigation_vert {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}
#navigation_vert ul {height:50px; display:block}
#navigation_vert ul li {display:block; width:200px; height:50px; background:#999; margin:0 0 1px 0; position:relative}
#navigation_vert ul li a.navlink {display:block; *display:inline-block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_vert .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topright:10px}
#navigation_horiz ul li #dropdown_one {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_one a {color:red}
#navigation_horiz ul li #dropdown_two {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_two a {color:black}
#navigation_horiz ul li #dropdown_three {background:#ccc; color:#fff} 
#navigation_horiz ul li #dropdown_three a {color:gray}
#navigation_vert ul li #dropdown_four {background:#333; color:#fff}
#navigation_vert ul li #dropdown_four a {color:red}
#navigation_vert ul li #dropdown_five {background:#666; color:#fff}
#navigation_vert ul li #dropdown_five a {color:black}
#navigation_vert ul li #dropdown_six {background:#777; color:#fff} 
#navigation_vert ul li #dropdown_six a {color:orange}
</style>
</head>
<body>
 <div class="container">
  <div id="navigation_horiz">
  <ul>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_one">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu --> 
   </li>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_two">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu --> 
   </li>
   <li><a href="" class="navlink">List Item</a></li>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_three">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu -->  
   </li>
  </ul>
  </div><!-- #navigation_horiz -->
 </div><!-- .container -->
 <div class="container">
  <div id="navigation_vert">
  <ul>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_four">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu --> 
   </li>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_five">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu --> 
   </li>
   <li><a href="" class="navlink">List Item</a></li>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_six">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu -->  
   </li>
  </ul>
  </div><!-- #navigation_vert -->
 </div><!-- .container -->
</body>
</html>

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

jquery实现可横向和竖向展开的动态下滑菜单效果

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
javascript冒泡排序小结
Apr 10 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
jQuery支持添加事件的日历特效代码分享（3种样式）
Aug 24 #Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 #Javascript
js贪吃蛇网页版游戏特效代码分享（挑战十关）
Aug 24 #Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 #Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 #Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 #Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 #Javascript
http_stub_status_module(1) 缓存机制(1) keeplive_timeout(1) 逻辑函数(1) 连接查询(1) 复合索引(1) 数据合并(1) BufferPool(1) zabbix(9) location(2)
You might like
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
jQuery-1.9.1源码分析系列（十）事件系统之事件包装
2015/11/20 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
Node.js调用fs.renameSync报错（Error: EXDEV, cross-device link not permitted）
2017/12/27 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
Python做文本按行去重的实现方法
2016/10/19 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
详解python中list的使用
2019/03/15 Python
Python字典对象实现原理详解
2019/07/01 Python
python批量修改ssh密码的实现
2019/08/08 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
python2和python3哪个使用率高
2020/06/23 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
用python读取xlsx文件
2020/12/17 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
美国男女折扣服饰百货连锁店：Stein Mart
2017/05/02 全球购物
美国摩托车头盔、零件、齿轮及配件商店：Cycle Gear
2019/06/12 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
程序集与命名空间有什么不同
2014/07/25 面试题
盛大二次面试题
2016/11/18 面试题
建筑施工员岗位职责
2013/11/26 职场文书
跳槽求职信范文
2014/05/26 职场文书
体育馆的标语
2014/06/24 职场文书
行政处罚决定书
2015/06/24 职场文书