首页
所有分类
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 相关文章推荐
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
解决jquery submit()提交表单提示：f[s] is not a function
Jan 23 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
JavaScript实现图片放大预览效果
Nov 02 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
C/C++(1) 经纬度(1) ctypes(1) html标准库(1) dll(1) 间隙锁(2) 幻读(5) innoDB(3) MVCC(4) 复读(1)
You might like
main.php
2006/12/09 PHP
php的memcached客户端memcached
2011/06/14 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
JS上传图片预览插件制作（兼容到IE6）
2016/08/07 Javascript
微信小程序之拖拽排序（代码分享）
2017/01/21 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
javascript实现评分功能
2020/06/24 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
python的concat等多种用法详解
2018/11/28 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Python递归实现打印多重列表代码
2020/02/27 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
Manduka官网：瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
Square Off美国/加拿大：世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
美国滑雪板和装备购物网站：Skis.com
2018/12/20 全球购物
UNIX特点都有哪些
2016/04/05 面试题
大专生自荐信
2013/10/04 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
家长给小学生的评语
2014/01/30 职场文书
高校教师岗位职责
2014/03/18 职场文书
校庆标语集锦
2014/06/25 职场文书
毕业生实习证明
2014/09/19 职场文书
python前后端自定义分页器
2022/04/13 Python