用jquery製作自動移動子選單的導航欄

2019-12-13 01:29:02

今天，我們要建立一個在選定其父選單的基礎上自動移動子選單的導航欄。每個子選單依次他們的父選單的順序水平堆疊。因此，當使用者他們游標移動到一個父選單的子選單將出現其水平位置移動。

1

建立選單首先建立選單和它的內容。建立選單包含的div元素，選單本身的無序列表元素。在這個例子中，我們要建立四個選單。<div id="menu-wrapper"><ul class="menu"><li> <a href="http://www.web0752.com/CSS Tutorial">CSS Tutorial</a> </li><li> <a href="http://www.web0752.com/jQuery Tutorial">jQuery Tutorial</a> </li><li> <a href="http://www.web0752.com/Code Snippet">Code Snippe

t</a> </li><li> <a href="http://www.web0752.com/Freebies">Freebies</a> </li></ul></div>建立居中寬870畫素，黑背景的DIV。#menu-wrapper { position: relative; display: block; z-index: 2; height: 60px; background-image: linear-gradient(to bottom, #535557, #333532); font-family: "Pontano Sans"; font-size: 15px; color: #fff; text-align: center;} .menu { display: block; margin: 0 auto; padding: 0; width: 870px; text-align: left; list-style-type: none; } .menu li { display: inline-block; padding: 16px 10px 25px 10px; cursor: pointer; transition: 0.3s ease-in-out; } .menu li:hover, .selected { background: #212525; } .menu a, .menu a:visited { color: #fff; text-decoration: none; }

V。#menu-wrapper { position: relative; display: block; z-index: 2; height: 60px; background-image: linear-gradient(to bottom, #535557, #333532); font-family: "Pontano Sans"; font-size: 15px; color: #fff; text-align: center;} .menu { display: block; margin: 0 auto; padding: 0; width: 870px; text-align: left; list-style-type: none; } .menu li { display: inline-block; padding: 16px 10px 25px 10px; cursor: pointer; transition: 0.3s ease-in-out; } .menu li:hover, .selected { background: #212525; } .menu a, .menu a:visited { color: #fff; text-decoration: none; }

2

3

建立子選單每個子選單都具有自己的無序列表，包含子選單中的專案。子選單中也將包含四個專案，每個人都將包含影象和它的標題。無序列表，每個子選單，將水平堆積。<div id="submenu-wrapper"><ul class="submenu"><li> <a href="http://www.web0752.com/2012/05/photoshop-effect-vs-css3-properties/"> <img src="http://www.web0752.com/images/9.jpg"> Photoshop Effect vs CSS3 Properties </a> </li> <!-- item s

ubmenu --> </ul><ul class="submenu">  </ul> </div>子選單將有類似的主題，都在父頁的中心位置。#submenu-wrapper { position: absolute; right: 0; left: 0; display: block; z-index: 1; width: 850px; height: 130px; margin: 0 auto; padding: 10px 10px; background: rgba(33,37,37,0.9); font-family: "Pontano Sans"; font-size: 13px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0px 2px 7px rgba(0,0,0,0.5);} .submenu { display: block; margin: 0 0 1.5em; padding: 0; list-style-type: none; } .submenu li { display: inline-block; width: 210px; vertical-align: top; text-align: center; } .submenu li img { display: block; margin: 0 auto 1em; width: 200px; border-radius: 5px; border: 0; } .submenu li a, .submenu li a:visited { color: #fff; text-decoration: none; }子選單就會像下面的圖片：加入程式碼overflow: hiddenon #submenu-wrapper隱藏其餘子選單，讓其只顯示一個無序列表。當使用者滑鼠懸停子選單出現，所以我們需要隱藏其他子選單。設定margin topto -12em讓子選單將從底部往上顯示。

題，都在父頁的中心位置。#submenu-wrapper { position: absolute; right: 0; left: 0; display: block; z-index: 1; width: 850px; height: 130px; margin: 0 auto; padding: 10px 10px; background: rgba(33,37,37,0.9); font-family: "Pontano Sans"; font-size: 13px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0px 2px 7px rgba(0,0,0,0.5);} .submenu { display: block; margin: 0 0 1.5em; padding: 0; list-style-type: none; } .submenu li { display: inline-block; width: 210px; vertical-align: top; text-align: center; } .submenu li img { display: block; margin: 0 auto 1em; width: 200px; border-radius: 5px; border: 0; } .submenu li a, .submenu li a:visited { color: #fff; text-decoration: none; }子選單就會像下面的圖片：加入程式碼overflow: hiddenon #submenu-wrapper隱藏其餘子選單，讓其只顯示一個無序列表。當使用者滑鼠懸停子選單出現，所以我們需要隱藏其他子選單。設定margin topto -12em讓子選單將從底部往上顯示。

4

5

6

jQuery做其餘的執行所有標記後成立了現在，我們將建立一些jQuery的程式碼隱藏和顯示子選單，並新增到選定的子選單焦點。在這之前我們必須準備好接下來需要的變數。menu = $('.menu li');submenuWrapper = $('#submenu-wrapper');submenu = submenuWrapper.children('ul');firstSubmenu = submenu.eq(0);firstSubmenu是第一個無序列表子選單棧，我們將使用這個變數來控制顯示無序列表和它上下移動。

7

讀取滑鼠事件當使用者懸停在選單上，我們將檢查子選單是否已顯示？但如果沒有，那麼我們將啟用。顯示子選單後，我們會根據使用者選單選擇顯示出相應的無序列表。menu.hover( function() { moveTo = $(this).index() * 11; if(!submenuWrapper.hasClass('show')) submenuWrapper.addClass('show').stop().animate({'marginTop' : '0'}); firstSubmenu.stop().animate({'marginTop' : '-'+moveTo+'em' }); }, function()

{ submenuWrapper.removeClass('show').stop().animate({'marginTop' : '-12em'});});如果使用者移動游標移動到子選單，它會滑動，以防止這一點，我們還需要附加像選單那樣的檢查功能。submenuWrapper.hover( function() { if(!submenuWrapper.hasClass('show')) submenuWrapper.addClass('show').stop().animate({'marginTop' : '0'}); }, function() { submenuWrapper.removeClass('show').stop().animate({'marginTop' : '-12em'});});正如你注意到我們有類似行程式碼前面的程式碼行3,4和7，他們的功能就是顯示和隱藏子選單。function showsubmenu(item) { if(!item.hasClass('show')) item.addClass('show').stop().animate({'marginTop' : '0'});}function hidesubmenu(item) { item.removeClass('show').stop().animate({'marginTop' : '-12em'});}因此，該程式碼將是：menu.hover( function() { moveTo = $(this).index() * 11; showsubmenu(submenuWrapper); firstSubmenu.stop().animate({'marginTop' : '-'+moveTo+'em' });}, function() { hidesubmenu(submenuWrapper);});submenuWrapper.hover( function() { showsubmenu($(this)); }, function() { hidesubmenu($(this));});

一點，我們還需要附加像選單那樣的檢查功能。submenuWrapper.hover( function() { if(!submenuWrapper.hasClass('show')) submenuWrapper.addClass('show').stop().animate({'marginTop' : '0'}); }, function() { submenuWrapper.removeClass('show').stop().animate({'marginTop' : '-12em'});});正如你注意到我們有類似行程式碼前面的程式碼行3,4和7，他們的功能就是顯示和隱藏子選單。function showsubmenu(item) { if(!item.hasClass('show')) item.addClass('show').stop().animate({'marginTop' : '0'});}function hidesubmenu(item) { item.removeClass('show').stop().animate({'marginTop' : '-12em'});}因此，該程式碼將是：menu.hover( function() { moveTo = $(this).index() * 11; showsubmenu(submenuWrapper); firstSubmenu.stop().animate({'marginTop' : '-'+moveTo+'em' });}, function() { hidesubmenu(submenuWrapper);});submenuWrapper.hover( function() { showsubmenu($(this)); }, function() { hidesubmenu($(this));});

8

新增焦點

9

選定的子選單項，將通過降低其他項不透明度的一個焦點。也增加其父選單的焦點，讓使用者知道他們在哪裡。

10

submenu .children('li') .hover( function() { $(this).siblings().stop().animate({'opacity':'0.5'}); }, function() { $(this).siblings().stop().animate({'opacity':'1'}); });submenu .hover( function() { menu.eq($(this).index()).addClass('selected') }, function() { menu.eq($(this).index()).removeClass('selected') })

;如下圖：

用jquery製作自動移動子選單的導航欄

1

2

3

4

5

6

7

8

9

10

11

熱門文章