|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
jQuery實(shí)現(xiàn)的水平可滾動(dòng)導(dǎo)航菜單
作者:admin 時(shí)間:2021-7-31 9:55:45 瀏覽:在這個(gè)例子中，除了著名的無(wú)與倫比的 jQuery 之外，沒(méi)有使用任何繁重的第三方庫(kù)。jQuery 方法用于處理水平滾動(dòng)和動(dòng)畫(huà)。
jQuery實(shí)現(xiàn)的水平可滾動(dòng)導(dǎo)航菜單
在菜單欄 HTML 中，添加了上一個(gè)下一個(gè)導(dǎo)航控件以水平滾動(dòng)菜單。在這些控件的單擊事件上，調(diào)用 jQuery animate() 方法來(lái)來(lái)回移動(dòng)菜單項(xiàng)。
代碼實(shí)現(xiàn)以水平滾動(dòng)顯示菜單
水平滾動(dòng)菜單代碼包含以下 UI 元素。
- 左右導(dǎo)航控件
- 可滾動(dòng)的菜單欄
這兩個(gè)導(dǎo)航控件呈現(xiàn)在可滾動(dòng)菜單欄層的頂部。它們絕對(duì)位于菜單欄的右側(cè)和左側(cè)，通過(guò)動(dòng)態(tài)管理 CSS 位置來(lái)顯示滑動(dòng)菜單。
最初，將根據(jù)屏幕寬度在菜單欄中顯示有限數(shù)量的菜單項(xiàng)。右側(cè)導(dǎo)航控件用于水平滾動(dòng)菜單菜單欄并在右側(cè)查看更多菜單項(xiàng)。
顯示滾動(dòng)菜單的 HTML 代碼
在本文中，我們看看用于向用戶(hù)顯示菜單界面的 HTML 代碼。在此 HTML 中，它包含左右導(dǎo)航元素和動(dòng)態(tài)菜單項(xiàng)列表。
此處使用左右 svg 箭頭圖像作為導(dǎo)航控件。
導(dǎo)航元素 id 用作處理菜單向左或向右滾動(dòng)的參考。
<HTML>
<HEAD>
<TITLE>jQuery實(shí)現(xiàn)的水平可滾動(dòng)導(dǎo)航菜單</TITLE>
<link href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<nav id="menu-container" class="arrow">
<div id="btn-nav-previous" style="fill: #FFF">
<svg xmlns="http://www.w3.org/2000/svg" width="32"
height="32" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
<path d="M0 0h24v24H0z" fill="none" /></svg>
</div>
<div id="btn-nav-next">
<svg xmlns="http://www.w3.org/2000/svg" width="32"
height="32" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
<path d="M0 0h24v24H0z" fill="none" /></svg>
</div>
<div class="menu-inner-box">
<div class="menu">
<a class="menu-item" href="#">首頁(yè)</a>
<a class="menu-item" href="#">搜索</a>
<a class="menu-item" href="#">產(chǎn)品</a>
<a class="menu-item" href="#">設(shè)置</a>
<a class="menu-item" href="#">聯(lián)系我們</a>
<a class="menu-item" href="#">教程</a>
<a class="menu-item" href="#">簡(jiǎn)介</a>
<a class="menu-item" href="#">博客</a>
<a class="menu-item" href="#">A&Q</a>
<a class="menu-item" href="#">反饋</a>
<a class="menu-item" href="#">服務(wù)</a>
<a class="menu-item" href="#">客戶(hù)中心</a>
<a class="menu-item" href="#">歷史</a>
<a class="menu-item" href="#">登錄</a>
<a class="menu-item" href="#">退出</a>
</div>
</div>
</nav>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('#btn-nav-previous').click(function(){
$(".menu-inner-box").animate({scrollLeft: "-=100px"});
});
$('#btn-nav-next').click(function(){
$(".menu-inner-box").animate({scrollLeft: "+=100px"});
});
</script>
</body>
</html>
此示例是使用如下所示的 CSS 媒體查詢(xún)創(chuàng)建的響應(yīng)式菜單。
nav#menu-container {
background:#586e75;
position:relative;
width:100%;
height: 56px;
margin-top: 35px;
}
#btn-nav-previous {
text-align: center;
color: white;
cursor: pointer;
font-size: 24px;
position: absolute;
left: 0px;
padding: 9px 12px;
background: #8f9a9d;
fill:#FFF;
}
#btn-nav-next {
text-align: center;
color: white;
cursor: pointer;
font-size: 24px;
position: absolute;
right: 0px;
padding: 9px 12px;
background: #8f9a9d;
fill:#FFF;
}
.menu-inner-box
{
width: 90%;
white-space: nowrap;
margin: 0 auto;
overflow: hidden;
padding: 0px 54px;
box-sizing: border-box;
}
.menu
{
padding:0;
margin: 0;
list-style-type: none;
display:block;
text-align: center;
}
a.menu-item
{
height:100%;
padding: 0px 25px;
color:#fff;
display:inline;
margin:0 auto;
line-height:57px;
text-decoration:none;
text-align:center;
white-space:no-wrap;
color: #FFF;
}
.menu-item:hover {
text-decoration:underline;
}
@media only screen and (max-width: 480px) {
#btn-nav-previous {
display:none;
}
#btn-nav-next {
display:none;
}
.menu-inner-box
{
width:100%;
overflow-x:auto;
}
}處理水平滾動(dòng)的jQuery腳本
以下 jQuery 腳本顯示了此示例的簡(jiǎn)單性。它通過(guò)幾行代碼說(shuō)明了水平滾動(dòng)動(dòng)畫(huà)的實(shí)現(xiàn)方式。
在 jQuery 中，animate() 是使用 CSS 屬性執(zhí)行動(dòng)畫(huà)的常用函數(shù)之一。對(duì)于這個(gè)水平滾動(dòng)菜單，使用 scrollLeft CSS 屬性調(diào)用此方法。
根據(jù)用戶(hù)點(diǎn)擊的導(dǎo)航控件，菜單元素的scrollLeft會(huì)相應(yīng)增加或減少。它將作為動(dòng)畫(huà)效果顯示給用戶(hù)。
我們還可以指定動(dòng)畫(huà)發(fā)生速度的持續(xù)時(shí)間。
$('#btn-nav-previous').click(function(){
$(".menu-inner-box").animate({scrollLeft: "-=100px"});
});
$('#btn-nav-next').click(function(){
$(".menu-inner-box").animate({scrollLeft: "+=100px"});
});水平滾動(dòng)菜單輸出
屏幕截圖顯示了水平滾動(dòng)菜單。菜單包含十多個(gè)菜單項(xiàng)。但是在屏幕截圖中，我們可以在初始頁(yè)面加載時(shí)看到其中一些。
可以通過(guò)使用右側(cè)導(dǎo)航按鈕滾動(dòng)菜單來(lái)查看其余項(xiàng)目。菜單欄兩側(cè)的左右導(dǎo)航按鈕將用于來(lái)回滾動(dòng)菜單。
jQuery實(shí)現(xiàn)的水平可滾動(dòng)導(dǎo)航菜單
結(jié)論
本文介紹的應(yīng)用程序創(chuàng)建水平滾動(dòng)菜單是一項(xiàng)簡(jiǎn)單的工作，因?yàn)樗恍枰苌俚墓ぞ吆?UI 經(jīng)驗(yàn)以及 HTML、CSS 和 jQuery 的基本知識(shí)。希望本教程能讓你有信心嘗試自己創(chuàng)建它。
此示例中使用的所有菜單項(xiàng)都將其 href 屬性指向?yàn)?#。我們可以通過(guò)突出顯示當(dāng)前單擊的菜單項(xiàng)來(lái)增強(qiáng)菜單行為。
此滾動(dòng)菜單代碼支持無(wú)限的菜單項(xiàng)列表。你可以創(chuàng)建新的菜單條目并在你的開(kāi)發(fā)環(huán)境中進(jìn)行設(shè)置后測(cè)試此功能。
您可能對(duì)以下文章也感興趣
標(biāo)簽: 導(dǎo)航菜單
- 站長(zhǎng)推薦
