wordpress網站模板開發中，怎樣創建自定義導航菜單？#學浪計劃#

前面的章節中，我們介紹了wordpress網站模板開發中，使用wp_list_pages()和wp_list_categories()這2個函數來創建基于page頁面的導航菜單和基于分類目錄的導航菜單。但是，這2種方式創建出來的菜單不夠靈活，基于頁面的導航菜單就添加不了分類目錄，基于分類目錄的導航菜單也添加不了page頁面作為菜單。那么，wordpress有沒有提供靈活一點的創建導航菜單的方法，能包含page頁面、分類目錄，甚至其它的選項。答案是肯定的。通過wordpress提供的方法，我們可以為wordpress網站模板創建自定義導航菜單。下面，就隨我一起來看看吧。

第一步：給主題注冊菜單功能。

wordpress網站后臺默認情況下，沒有提供菜單選項，需要我們在wordpress主題模板中來添加這個功能。這個，我們可以進入到wordpress后臺的外觀去看看，如下圖：

所以，我們要先在wordpress主題的functions.php文件中注冊菜單，代碼如下：

//菜單register_nav_menus( array('menu_top' => '頭部導航','menu_bottom' => '底部導航',) );

添加完上面的代碼，我們再到wordpress網站后臺的外觀中看一下，這時，我們會發現多了一個“菜單”，這就是我們需要的自定義菜單。如下圖：

第二步：后臺創建菜單。

給wordpress網站后臺添加了菜單功能后，我們就可以在wordpress后臺的菜單中創建前臺網頁的自定義導航菜單了。點擊“外觀”中的“菜單”，右側內容欄進入到菜單界面，如下圖：

點擊上圖中的“創建新菜單”，進入到創建界面，如下圖：

填寫菜單名，點擊“創建菜單”，進入到菜單結構界面，如下圖：

在這個菜單結構界面，我們可以選擇左側的“添加菜單項”中的頁面、分類目錄、文章、自定義鏈接這幾個選項中的子項，然后點擊“添加到菜單”，就添加到右側的菜單結構中，想在wordpress網站前臺導航菜單中顯示什么，就選擇什么。如下圖：

?然后，勾選“顯示位置”，再點擊保存菜單按鈕，就可以了。

第三步：在頭部調用這個菜單。

wordpress后臺創建好了菜單后，我們要想在wordpress網站前臺顯示，還需要我們在wordpress網站模板中調用它。在給functions.php文件添加菜單功能時，我們設置了2個菜單位置：頭部菜單和底部菜單。這里，我們以頭部菜單為例，在wordpress網站模板的頭部模板header.php中添加如下代碼：

$menu = array( 'container' => false, //最外層標簽名 'theme_location' => 'menu_top', //菜單類名 'depth' => 0, //菜單深度);wp_nav_menu( $menu );

這樣，我們就可以在wordpress網站的前臺頭部看到我們添加的導航菜單，如下圖：

?有點難看，是吧，我們可以給這個菜單添加CSS樣式，來讓它好看一點，這里就不演示了。上面的代碼中，我們用到了wordpress的一個函數——wp_nav_menu()，這個函數的功能，就是把后臺創建好的菜單在前臺打印出來。這個函數的參數跟wp_list_pages()和wp_list_categories()這2個函數的參數類似，可以是字符串類型，也可以是數組類型。

wp_nav_menu()函數的參數如下：

wp_nav_menu( array('theme_location' => '',//導航別名'menu' => '', //期望顯示的菜單'container' => 'div', //容器外層標簽'container_class' => '',//ul父節點class類名'container_id' => '', //ul父節點id名'menu_class' => 'menu', //ul節點class類名'menu_id' => '', //ul節點id名'echo' => true,//是否輸出菜單，默認為真，true或1時，打印輸出；false或0時，不輸出。'fallback_cb' => 'wp_page_menu', //菜單不存在時，返回默認菜單，設為false則不返回'before' => '', //鏈接前文本'after' => '', //鏈接后文本'link_before' => '', //鏈接文本前'link_after' => '',//鏈接文本后'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', //如何包裝列表'depth' => 0, //菜單深度，默認0'walker' => '' //自定義walker) );

可見，wp_nav_menu()函數的參數還是挺多的，但實際使用中，不需要全部設置，往往我們只需要使用其它的幾個常規參數就可以了，如上例中，我們就只用了3個參數，就打印出了wordpress網站的頭部導航菜單。

通過以上這幾步，我們就為wordpress網站模板添加好了自定義導航菜單的功能，看起來有點復雜，是吧。的確，跟wp_list_pages()和wp_list_categories()這2導航菜單相比，是要復雜一點。但是，多做幾次后，你會發現，這種自定義導航菜單使用起來更加靈活多變。不管怎樣，這3種添加導航菜單的方式我們都要掌握，可以在不同的需求中使用不同的方式。

5自適應是現在主流的技術，導航欄菜單是最常見的一種，今天我們一起來學習一下它是如何使用HTML，CSS和JavaScript來構建響應式導航欄和漢堡菜單的。

這就是它的樣子，是不是很熟悉呢？

H5導航菜單

好的，那就先從HTML開始：

<header class=”header”>
<nav class=”navbar”>
<a href=”#” class=”nav-logo”>WebDev.</a>
<ul class=”nav-menu”>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Services</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Blog</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>About</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Contact</a>
</li>
</ul>
<div class=”hamburger”>
<span class=”bar”></span>
<span class=”bar”></span>
<span class=”bar”></span>
</div>
</nav>
</header>

通過這些代碼，我們實現了：

給header標簽指定名為header的CSS類的，可以作為導航菜單的容器。
給nav標簽指定名為navbar的CSS類。
具有nav-logo類的鏈接
具有nav-menu類的ul
在ul內部，我們有4個具有nav-item類的li
在每個nav-item中，都有一個包含nav-link類的鏈接
至于漢堡菜單，我已在代碼中添加了一個具有hamburger類的div，且此div中有3個帶bar類的span

以上就是我們需要的HTML代碼。

現在讓我們添加CSS樣式重置代碼

（此外，我們將導入所需的字體，并添加一些基本的CSS來重置所有的默認樣式。）

@import url(‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap’);

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 62.5%;
font-family: ‘Roboto’, sans-serif;
}

li {
list-style: none;
}

a {
text-decoration: none;
}

現在讓我們給每個元素逐個添加樣式：

header和navbar：

.header{
border-bottom: 1px solid #E2E8F0;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}

hamburger樣式：

.hamburger {
display: none;
}

.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}

其他元素的基本樣式：

.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-item {
margin-left: 5rem;
}

.nav-link{
font-size: 1.6rem;
font-weight: 400;
color: #475569;
}

.nav-link:hover{
color: #482ff7;
}

.nav-logo {
font-size: 2.1rem;
font-weight: 500;
color: #482ff7;
}

完成這些之后，看起來應該是這樣的：

但是它不是響應式的，所以我們還需要添加媒體查詢css代碼。

@media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow:
0 10px 27px rgba(0, 0, 0, 0.05);
}

.nav-menu.active {
left: 0;
}

.nav-item {
margin: 2.5rem 0;
}

.hamburger {
display: block;
cursor: pointer;
}

}

這里媒體查詢就是通過設置position: fixed; left: -100%;來隱藏nav-menu。

此外，我們將hamburger設置為display: block;，所以現在可見。

我們還添加了一個額外的類.nav-menu.active，它在nav-menu上設置left: 0;?，F在，到了添加javascript的時候了，以便在我們單擊漢堡菜單時，會在nav-menu上添加此active類。

添加JavaScript

const hamburger = document.querySelector(“.hamburger”);
const navMenu = document.querySelector(“.nav-menu”);

hamburger.addEventListener(“click”, mobileMenu);

function mobileMenu() {
hamburger.classList.toggle(“active”);
navMenu.classList.toggle(“active”);
}

此處的函數mobileMenu()在hamburger和nav-menu上也添加了一個active類，從而打開mobile menu。單擊hamburger時，我們可以使用hamburger上的active類來創建X動畫。現在就開始做吧。

// Inside the Media Query.

.hamburger.active .bar:nth-child(2) {
opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

現在看起來應該是這樣的：

但是有一個問題，當我們單擊鏈接時，漢堡菜單不會關閉?，F在讓我們解決一下這個問題。

const navLink = document.querySelectorAll(“.nav-link”);

navLink.forEach(n => n.addEventListener(“click”, closeMenu));

function closeMenu() {
hamburger.classList.remove(“active”);
navMenu.classList.remove(“active”);
}

closeMenu()函數從nav-menu和hamburger中刪除active類，從而關閉mobile menu。

H5導航菜單就是這樣，實現了用HTML，CSS和javascript構建一個響應式的導航欄菜單。希望你喜歡并分享這篇文章。感謝大家的閱讀。

更多干貨等著你~ 點贊、分享，關注哦

果你曾經在瀏覽網頁時看到三條線堆疊在一起，那么你就遇到了漢堡菜單。它是移動和響應式網頁設計中使用的一種流行設計元素，用于創建干凈、簡約的界面。

單擊時，這個小菜單會從屏幕的任一側滑出，顯示導航項或選項列表。當菜單打開時，漢堡菜單也會變成“X”或其他形狀。

在這篇文章中，我們將向您展示如何在 CSS 中創建不同的漢堡菜單動畫。讓我們開始吧！

創建漢堡菜單

要創建漢堡菜單，我們首先需要創建 HTML 。由一個按鈕元素和三個嵌套的 div 元素組成，每個元素代表漢堡圖標的一行。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

接下來，我們將為元素添加一些基本樣式。我們將從按鈕元素中刪除任何默認樣式，包括背景和邊框顏色。

.hamburger {
    background: transparent;
    border: transparent;
    cursor: pointer;
    padding: 0;
}

然后，對于每個線元素，我們將設置背景顏色、高度、寬度和每個直線之間的間距。

.hamburger__line {
    background: rgb(203 213 225);
    margin: 0.25rem 0;
    height: 0.25rem;
    width: 2rem;
}

X

是時候使用 CSS 創建一個很酷的漢堡菜單動畫了。當用戶將鼠標懸停在按鈕上時，我們希望線條轉換為“X”形。

為了實現這一點，我們將使用 :hover 偽類和 nth-child 選擇器來訪問每一行。我們將使用 translate() 和 rotate() 函數將線條轉換為 X 形狀。

第一條線將在 y 軸上向下移動并旋轉 45 度以創建一條 X 形狀的線。第二行將通過將其不透明度設置為零而消失。最后一條線將在 y 軸上向上移動，并逆時針方向旋轉 45 度以完成 X 形狀。我們將通過在 translate() 和 rotate() 函數中使用負值，將其轉換為與第一行相反的方向。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger:hover .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

若要應用轉換，我們將使用該 transition 屬性。動畫將使用 ease-out 計時功能運行 300 毫秒（0.3s）。該 all 值表示將對樣式更改進行動畫處理，包括 transform 和 opacity 屬性。

.hamburger__line {
    transition: all 0.3s ease-out;
}

通過將鼠標懸停在按鈕上來嘗試一下。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

形成減號

在這種方法中，當按鈕懸停在按鈕上時，我們會將其變成減號。我們將使用與上一種方法相同的轉換，但我們不會旋轉第一行和最后一行。

相反，我們將在 y 軸上向下移動第一行，直到它到達第二行。第三條線將向上移動，直到到達第一行。然后，第二行將關閉可見性，就像在前面的方法中一樣。

第一行和最后一行的 `transform` 屬性將與前面的方法相同，只是我們將不再使用該 `rotate()` 函數。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translateY(9px);
}

.hamburger:hover .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translateY(-9px);
}

看看它是什么樣子的！

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

要將按鈕變成減號，我們可以使用另一種效果，將第一行和最后一行水平移出按鈕。我們將使用該 translateX() 函數來指示位置僅在 x 軸上發生了變化。使用 translateX(-100%) ，可以將目標從左向右移出容器，而使用translateX(100%) ，我們可以做相反的事情。

這兩種轉換都將 opacity 屬性設置為零，使第一行和最后一行不可見。因此，動畫完成后，只有第二行仍然可見。

.hamburger:hover .hamburger__line:nth-child(1) {
    opacity: 0;
    transform: translateX(-100%);
}

.hamburger:hover .hamburger__line:nth-child(3) {
    opacity: 0;
    transform: translateX(100%);
}

看看這如何重現減號。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

形成加號

在本節中，我們將向您展示另一種類型的轉換。當用戶將鼠標懸停在按鈕上時，它會變成一個加號。為了達到這種效果，我們將第一條線向下移動，直到它與第二條線相遇，從而形成一條水平線。

然后，我們移動 y 軸上的最后一條線并將其逆時針旋轉 90 度，形成加號的垂直線。最后，我們調整 opacity 第二行，使其在動畫后不可見。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translateY(9px);
}

.hamburger:hover .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translateY(-9px) rotate(-90deg);
}

查看下面的演示，了解這種方法的實際應用。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

形成箭頭

為了在按鈕上創建箭頭，我們使用簡單的轉換技術。第一條線旋轉 45 度并沿 x 軸和 y 軸移動，直到它與第二條線的第一個點相交，形成箭頭的頂線。然后，我們減小第一行的寬度，使其看起來更時尚。將相同的轉換應用于最后一行，以創建箭頭的底線。

如果需要調整箭頭的位置，請隨意調整傳遞給 translate() 函數的值。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translate(-2px, 4px) rotate(-45deg);
    width: 16px;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translate(-2px, -4px) rotate(45deg);
    width: 16px;
}

當您將鼠標懸停在按鈕上時，箭頭的樣子如下：

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

要更改箭頭的方向，請調整 translate() 函數的參數。這將確保第一行和最后一行到達第二行的末尾，并且箭頭將沿相反方向旋轉。

在線咨詢

上一篇：vue實戰開發010:JS實現字體上下無縫滾動效果
下一篇：Axure產品原型在手機上如何運行

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

wordpress網站模板開發中，怎樣創建自定義導航菜單？#學浪計劃#