jquery实现可横向和竖向展开的动态下滑菜单效果
2015-08-24 15:16
936 查看
这里演示了两个下拉导航菜单的效果,用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现,最新的jquery版本也可以引入,在演示页面中,分别有横向水平向下滑出的下拉菜单,还有纵向垂直布局向右滑出的导航菜单,根据你的需要选择使用。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-right-down-show-nav-menu-codes/
具体代码如下:
<!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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- 底部Popwindow形式菜单的类的封装
- JavaScript演示排序算法
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 一步一步跟我学易语言之第二个易程序菜单设计
- IE右键菜单被修改
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法