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

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。