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

首頁

web前端

js教程

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

PHP中文网

May 16, 2016 am 09:00 AM

css jquery

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

今天小編給大家展示如何使用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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7514

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。