html导航栏横向展开,jquery实现可横向和竖向展开的动态下滑菜单效果

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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

jQuery纵向横向动态下拉导航菜单

//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 ==