|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
jQuery實現(xiàn)的水平可滾動導(dǎo)航菜單
作者:admin 時間:2021-7-31 9:55:45 瀏覽:在這個例子中，除了著名的無與倫比的 jQuery 之外，沒有使用任何繁重的第三方庫。jQuery 方法用于處理水平滾動和動畫。
jQuery實現(xiàn)的水平可滾動導(dǎo)航菜單
在菜單欄 HTML 中，添加了上一個下一個導(dǎo)航控件以水平滾動菜單。在這些控件的單擊事件上，調(diào)用 jQuery animate() 方法來來回移動菜單項。
代碼實現(xiàn)以水平滾動顯示菜單
水平滾動菜單代碼包含以下 UI 元素。
- 左右導(dǎo)航控件
- 可滾動的菜單欄
這兩個導(dǎo)航控件呈現(xiàn)在可滾動菜單欄層的頂部。它們絕對位于菜單欄的右側(cè)和左側(cè)，通過動態(tài)管理 CSS 位置來顯示滑動菜單。
最初，將根據(jù)屏幕寬度在菜單欄中顯示有限數(shù)量的菜單項。右側(cè)導(dǎo)航控件用于水平滾動菜單菜單欄并在右側(cè)查看更多菜單項。
顯示滾動菜單的 HTML 代碼
在本文中，我們看看用于向用戶顯示菜單界面的 HTML 代碼。在此 HTML 中，它包含左右導(dǎo)航元素和動態(tài)菜單項列表。
此處使用左右 svg 箭頭圖像作為導(dǎo)航控件。
導(dǎo)航元素 id 用作處理菜單向左或向右滾動的參考。
<HTML>
<HEAD>
<TITLE>jQuery實現(xiàn)的水平可滾動導(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="#">首頁</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="#">簡介</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="#">客戶中心</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 媒體查詢創(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;
}
}處理水平滾動的jQuery腳本
以下 jQuery 腳本顯示了此示例的簡單性。它通過幾行代碼說明了水平滾動動畫的實現(xiàn)方式。
在 jQuery 中，animate() 是使用 CSS 屬性執(zhí)行動畫的常用函數(shù)之一。對于這個水平滾動菜單，使用 scrollLeft CSS 屬性調(diào)用此方法。
根據(jù)用戶點擊的導(dǎo)航控件，菜單元素的scrollLeft會相應(yīng)增加或減少。它將作為動畫效果顯示給用戶。
我們還可以指定動畫發(fā)生速度的持續(xù)時間。
$('#btn-nav-previous').click(function(){
$(".menu-inner-box").animate({scrollLeft: "-=100px"});
});
$('#btn-nav-next').click(function(){
$(".menu-inner-box").animate({scrollLeft: "+=100px"});
});水平滾動菜單輸出
屏幕截圖顯示了水平滾動菜單。菜單包含十多個菜單項。但是在屏幕截圖中，我們可以在初始頁面加載時看到其中一些。
可以通過使用右側(cè)導(dǎo)航按鈕滾動菜單來查看其余項目。菜單欄兩側(cè)的左右導(dǎo)航按鈕將用于來回滾動菜單。
jQuery實現(xiàn)的水平可滾動導(dǎo)航菜單
結(jié)論
本文介紹的應(yīng)用程序創(chuàng)建水平滾動菜單是一項簡單的工作，因為它只需要很少的工具和 UI 經(jīng)驗以及 HTML、CSS 和 jQuery 的基本知識。希望本教程能讓你有信心嘗試自己創(chuàng)建它。
此示例中使用的所有菜單項都將其 href 屬性指向為 #。我們可以通過突出顯示當(dāng)前單擊的菜單項來增強菜單行為。
此滾動菜單代碼支持無限的菜單項列表。你可以創(chuàng)建新的菜單條目并在你的開發(fā)環(huán)境中進行設(shè)置后測試此功能。
您可能對以下文章也感興趣
標(biāo)簽: 導(dǎo)航菜單
- 站長推薦
