首页
所有分类
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实现随机返回数组的一个元素
Aug 13 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
javascript中Function类型详解
Apr 28 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
微信小程序开发（三）：返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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
ICF-903L(1) YAESU(1) 239军机(1) BCLer(1) DE1103(2) YB-230(1) AN-LP1(1) DE1105(1) 根德5570(1) frg-100(1)
You might like
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
php格式化电话号码的方法
2015/04/24 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
javascript 动态添加表格行
2006/06/22 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python palywright库基本使用
2021/01/21 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
Charles & Keith欧盟：新加坡时尚品牌
2019/08/01 全球购物
英国名牌服装购物网站：OD’s Designer
2019/09/02 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
小区消防演习方案
2014/02/21 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
信息管理专业自荐书
2014/06/05 职场文书
预防煤气中毒方案
2014/06/16 职场文书
求职信的正确写法
2014/07/10 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
Python源码解析之List
2021/05/21 Python
Python制作表白爱心合集
2022/01/22 Python
Golang 结构体数据集合
2022/04/22 Golang
Python find()、rfind()方法及作用
2022/12/24 Python