jQuery CSS實作一個側滑導覽選單程式碼

首頁

web前端

js教程

jQuery CSS實作一個側滑導覽選單程式碼_jquery

PHP中文网

May 16, 2016 am 09:00 AM

cssjquery

側滑選單在網站設計中應用較廣泛，在許多網站上都可以看到此種類型的選單。它可以展示重點訊息，使其更有可讀性和美觀性，滿足用戶體驗價值！

今天小編給大家展示如何使用jquery和css實現側滑選單。

效果展示原始碼下載

為了建立導航選單，讓我們先來看看html結構：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animation menu demo</title>
<link rel="stylesheet" href=" 
<link href='https://fonts.googleapis.com/css?family=montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href=" 
<script src=" 
</script>
<script src="script.js">
</script>
<link rel="stylesheet" href="style.css">
</head><body>
<!-- content goes here -->
</body>
</html>

首先，我們引用normalize.css作為預設樣式，以確保我們的選單在每個瀏覽器是一樣的。我們使用字體圖示fontawesome來顯示選單項目向下的圖示。我們還需要引用jquery來實現選單的切換。

面板按鈕

每個網站面板導航按鈕都類似。它往往是一個圖標字體，例如fontawesome，但在本教程中我想添加一些動畫，所以我們用橫線來實現。基本上，我們的按鈕是一個跨度，包含三個div顯示為水平橫線。

<span class="toggle-button">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</span>

樣式看起來如下：

.toggle-button {
position: fixed;
width: 44px;
height: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}

按鈕有固定的位置，不動時捲動頁面。它也有一個 z-index :15的樣式，以確保它總是保持在其他重疊元素之上。按鈕由三條橫線。每橫線都有自已的樣式，我們給它加上.menu-bar樣式。類別其餘的樣式被移動到單獨的樣式檔案中。動畫發生時，我們新增一個類別.button-open。我們引用jquery，可以比較方便的實現它：

$(document).ready(function() {
var $togglebutton = $('.toggle-button');
$togglebutton.on('click', function() {
$(this).toggleclass('button-open');
});
});

初學者可能不熟悉jquery，讓我解釋一下這是怎麼回事。首先，我們初始化一個變數稱為$togglebutton，其中包含我們的按鈕。我們將它儲存為一個變量，然後我們建立一個事件監視器監聽點擊按鈕。每點選一次，事件監聽器會執行方法 function toggleclass()來切換.button-open。

.button-open我們可以用它來改變這些元素的顯示方式。我們使用css3 translate()和rotate()功能使頂部和底部的橫線旋轉45度，與中間的橫線逐漸消失。你可以點擊demo中的按鈕來看看效果。

側滑選單

側滑選單的html的結構如下：

<div class="menu-wrap">
<div class="menu-sidebar">
<ul class="menu">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">blog</a></li>
<li class="menu-item-has-children"><a href="#">click the arrow</a>
<span class="sidebar-menu-arrow"></span>
<ul class="sub-menu">
<li><a href="#">alignment</a></li>
<li><a href="#">markup</a></li>
<li><a href="#">comments</a></li>
</ul>
</li>
<li><a href="#">courses</a></li>
<li><a href="#">get in touch</a></li>
</ul> 
</div>
</div>

在這裡不詳細解釋每個風格的選單，我們看下.menu-wrap 的div。它的樣式如下：　　

.menu-wrap {
background-color: #6968ab;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}

它的位置是固定的，所以選單一直在同一個地方滾動。高度設為100%。注意，左邊距設定為負數，使此選單從視圖中消失。為了讓它有一個出現的特效，我們用jquery來了呼叫另一class來顯示和關閉。 javascript程式碼如下：

$(document).ready(function() {
var $togglebutton = $('.toggle-button'),
$menuwrap = $('.menu-wrap');
$togglebutton.on('click', function() {
$(this).toggleclass('button-open');
$menuwrap.toggleclass('menu-show');
});
});

我們增加一個變數$menuwrap其中包含選單的所有項，並使用相同的事件來建立按鈕。這個.menu-show的左邊距為0，並增加了一些盒子陰影效果。

.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #b9adad;
}

子選單和連結

你可能會注意到一個清單項目的class .menu-item-has-children。包含子選單。同時，連結後，有一個class .sidebar-menu-arrow。

<li class="menu-item-has-children"><a href="#">click the arrow</a>
<span class="sidebar-menu-arrow"></span>
<ul class="sub-menu">
<!-- list items -->
</ul>
</li>

span 有一個::after偽元素包實作fontawesome箭頭。預設情況下，子選單是隱藏的，只有在點擊父級選單時才出現：

$(document).ready(function() {
var $sidebararrow = $('.sidebar-menu-arrow');
$sidebararrow.click(function() {
$(this).next().slidetoggle(300);
});
});

當我們點擊箭頭，一個函數被呼叫時，它的目標的下一個元素之後的span並使其可見。我們使用的jquery的slidetoggle。它使一個元素滑動效果的出現或消失，函數有一個動畫時間參數。

最後，我們的示範選單項目有一個懸停效果。它是使用一個::after偽元素。程式碼如下：

.menu-sidebar li > a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 102%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #fffa3b 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
background-position: -100% 0;
}

這個::after偽元素包含在每個環節下絕對定位的區塊級元素，隨著0.15em高度和寬度。我們不只是應用背景顏色的線，我們使用linear-gradient() 在背景圖像功能。雖然這個功能的目的是使顏色梯度，我們可以透過指定的百分比，做了一個漸變的顏色變化。

.menu-sidebar li > a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}

這裡一半的線是透明的，另一半是黃色的。透過背景大小200%的寬度，使透明部分所佔用的所有連結的寬度。

而透明的部分可以用其他顏色。這將創建一個線的另一個顏色填充的錯覺，但實際上它只是一二色線。

以上就是jquery css實作一個側滑導覽選單碼_jquery的內容，更多相關內容請關注php中文網（www.php.cn）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles