jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果
更新時(shí)間：2015年08月24日 15:16:52 作者：企鵝
這篇文章主要介紹了jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果,以實(shí)例形式較為詳細(xì)的分析了jquery實(shí)現(xiàn)橫向與豎向展開(kāi)菜單的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果。分享給大家供大家參考。具體如下：
這里演示了兩個(gè)下拉導(dǎo)航菜單的效果，用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同實(shí)現(xiàn)，最新的jquery版本也可以引入，在演示頁(yè)面中，分別有橫向水平向下滑出的下拉菜單，還有縱向垂直布局向右滑出的導(dǎo)航菜單，根據(jù)你的需要選擇使用。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-right-down-show-nav-menu-codes/
具體代碼如下：
<!DOCTYPE html>
<head>
<title>jQuery縱向橫向動(dòng)態(tài)下拉導(dǎo)航菜單</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>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 基于jQuery實(shí)現(xiàn)以手風(fēng)琴方式展開(kāi)和折疊導(dǎo)航菜單
- jQuery實(shí)現(xiàn)折疊、展開(kāi)的菜單組效果代碼
- jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開(kāi)的菜單效果代碼
- jquery實(shí)現(xiàn)紅色豎向多級(jí)向右展開(kāi)的導(dǎo)航菜單效果
- jquery+CSS實(shí)現(xiàn)的多級(jí)豎向展開(kāi)樹(shù)形TRee菜單效果
- jquery實(shí)現(xiàn)點(diǎn)擊向下展開(kāi)菜單項(xiàng)(伸縮導(dǎo)航)效果
- jquery實(shí)現(xiàn)帶漸變淡入淡出并向右依次展開(kāi)的多級(jí)菜單效果實(shí)例
- jQuery實(shí)現(xiàn)可收縮展開(kāi)的級(jí)聯(lián)菜單實(shí)例代碼
- jQuery 淡入淡出、展開(kāi)收縮菜單實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)鼠標(biāo)懸停3d菜單展開(kāi)動(dòng)畫(huà)效果
相關(guān)文章
JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳
導(dǎo)航欄由一組水平排列的鏈接構(gòu)成，通常位于頁(yè)眉或頁(yè)腳內(nèi)部。本文給大家介紹JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳的相關(guān)知識(shí)，需要的朋友參考下吧2016-03-03
jQuery給div,Span, a ，button, radio 賦值與取值
這篇文章主要介紹了jQuery給div,Span, a ，button, radio 賦值與取值的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI表單驗(yàn)證
輕松學(xué)習(xí)jQuery插件EasyUI，本文的重點(diǎn)在于EasyUI表單驗(yàn)證，并告訴大家如何提交表單，感興趣的小伙伴們可以參考一下2015-12-12
jQuery的易擴(kuò)展性吸引了來(lái)自全球的開(kāi)發(fā)者來(lái)共同編寫(xiě)jQuery插件。jQuery插件不僅能夠增強(qiáng)網(wǎng)站的可用性，有效地改善用戶(hù)體驗(yàn)，還可以大大減少開(kāi)發(fā)時(shí)間。2011-03-03
jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法,實(shí)例分析了jQuery實(shí)現(xiàn)form表單延時(shí)提交的技巧,需要的朋友可以參考下2015-03-03
實(shí)例解析jQuery插件EasyUI最常用的表單驗(yàn)證規(guī)則
這篇文章主要以實(shí)例解析了jQuery插件EasyUI最常用的驗(yàn)證規(guī)則，對(duì)EasyUI校驗(yàn)感興趣的小伙伴們可以參考一下2015-11-11
jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素的相關(guān)資料,需要的朋友可以參考下2015-01-01
對(duì)jquery只是才涉足，如有不適合，請(qǐng)各位多多指教。2011-07-07
jquery3和layui沖突導(dǎo)致使用layui.layer.full彈出全屏iframe窗口時(shí)高度152px問(wèn)題
這篇文章主要介紹了解決jquery3和layui沖突導(dǎo)致使用layui.layer.full彈出全屏iframe窗口時(shí)高度152px問(wèn)題,需要的朋友可以參考下2019-05-05
JQuyer $.post 與 $.ajax 訪問(wèn)WCF ajax service 時(shí)的問(wèn)題需要注意的地方
我注意到，當(dāng)在jquery中使用$.post()后，默認(rèn)的contentType是application/x-www-form-urlencoded 形式進(jìn)行了urlencoded - 當(dāng)我的asp.net MVC代碼需要的contentType=application/json2011-09-09