首页
所有分类
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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 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
Get(1) 入门基础(1) Post(1) 虚拟机(3) plus.io(1) 磁盘管理(1) Vmware(3) RabbitMQ(3) html5+(1) 目录管理(1)
You might like
谈谈PHP的输入输出流
2007/02/14 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
checkbox 复选框不能为空
2009/07/11 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
小程序实现搜索框
2020/06/19 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
[14:25]教你分分钟做大人：主宰（HEROS）
2014/12/08 DOTA
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
Dockers鞋官网：Dockers Shoes
2018/11/13 全球购物
德国网上超市：myTime.de
2019/08/26 全球购物
数控技术应届生求职信
2013/11/13 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
《影子》教学反思
2014/02/21 职场文书
家长寄语大全
2014/04/02 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
2014年终工作总结范本
2014/12/15 职场文书
中小企业员工手册范本
2015/05/14 职场文书
班委竞选稿范文
2015/11/21 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang