「前端制作」移動端側邊滑出導航欄

動端側邊滑出導航欄是一種常見的UI設計，可以提升用戶體驗和導航的可用性。本文將詳細介紹如何利用前端技術實現移動端側邊滑出導航欄，并給出相關的代碼示例。

首先，我們需要一個觸發導航欄滑出的按鈕。通常情況下，這個按鈕會放在頁面的頂部或者底部，以便用戶方便點擊。我們可以使用HTML和CSS來創建這個按鈕。

HTML代碼如下所示：

```html菜單```

CSS代碼如下所示：

```css.nav-button { position: fixed; top: 20px; left: 20px; width: 60px; height: 60px; background-color: #000; color: #fff; border: 0; border-radius: 50%; font-size: 16px;}```

以上代碼創建了一個圓形的按鈕，并設置了一些基本樣式，可以根據實際需求進行調整。

接下來，我們需要實現導航欄滑出的效果。可以使用CSS來實現，具體代碼如下：

HTML代碼如下所示：

```html```

CSS代碼如下所示：

```css.nav-menu { position: fixed; top: 0; left: -80%; width: 80%; height: ; background-color: #fff; transition: all 0.3s ease;}

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

.nav-menu ul { list-style: none; padding: 0; margin: 0;}

.nav-menu ul li { padding: 10px 20px; border-bottom: 1px solid #ccc; cursor: pointer;}

.nav-menu ul li:last-child { border-bottom: none;}```

以上代碼創建了一個導航欄，并設置了一些基本樣式。使用左側負值的left屬性隱藏了導航欄，當給導航欄添加open類名后，left屬性變為0，導航欄就可以滑出。

接下來，我們需要使用JavaScript來處理按鈕的點擊事件，實現導航欄的滑出和收起。可以使用以下代碼：

```javascriptconst navButton=document.querySelector('.nav-button');const navMenu=document.querySelector('.nav-menu');

navButton.addEventListener('click', ()=> { navMenu.classList.toggle('open');});```

以上代碼添加了一個點擊事件監聽器，當按鈕被點擊時，toggle方法會切換導航欄元素的open類，從而實現導航欄的滑出和收起效果。

至此，我們已經完成了移動端側邊滑出導航欄的制作。當用戶點擊按鈕時，導航欄將從左側滑出，再次點擊按鈕時，導航欄將收起。這種交互方式可以為用戶提供良好的導航體驗。

總結一下，要實現移動端側邊滑出導航欄，我們需要使用HTML、CSS和JavaScript。通過添加一個按鈕和一個導航欄元素，利用CSS的transition屬性和JavaScript的事件監聽器，可以輕松實現這一效果。希望本文的內容對你有所幫助。

一個網站都有自己的導航菜單，如：頭部導航菜單，底部導航菜單，側邊欄導航菜單，wordpress網站也不例外。那么，在wordpress網站主題模板開發中，我們怎樣給wordpress網站添加前臺的導航菜單呢？嗯，據我多年的開發經驗發現，wordpress為wordpress主題開發，主要提供了三種導航菜單的創建方式，這三種方式會創建不一樣的導航功能。今天，我們就來看看第一種wordpress網站創建導航菜單的方式——基于page頁面的導航菜單。這里，我們會用到wordpress提供的函數——wp_list_pages()，這是一個wordpress頁面列表的函數。

我們先來看一下這個wordpress函數——wp_list_pages()，看看它的結構。

wp_list_pages($defaults);

從上面的代碼中，我們可以看到，wp_list_pages()函數只有一個參數，這個參數有兩種類型，可以是字符串類型，也可以是數組類型。這個我們在下面的實例中會做相應的介紹。為了方便了解這個參數的值，我們這里以數組的形式來解說一下這個參數。

參數介紹：

$defaults=array('depth'=>0, //0：顯示所有頁面和子頁面，按層級顯示；//1：只顯示頂級頁面；//2：顯示2級頁面；//-1：顯示所有頁面和子頁面，不按層級顯示；
'show_date'=>'', //是否顯示創建日期
'date_format'=> get_option('date_format'),//日期格式
'child_of'=>0, //指定父頁面ID號，顯示這個父頁面下的子頁面；0表示顯示所有子頁面；
'exclude'=>'', //排除哪些頁面
'include'=>'', //包含哪些頁面
'title_li'=>'Pages', //是否顯示頁面列表的標題，如果不顯示，設為空；這里設置標題為“Pages”
'echo'=>1, //是否打印到前臺頁面顯示出來。1表示顯示，0表示不顯示，而是只獲取值。
'authors'=>'', //指定特定作者創建的頁面
'link_before'=> '', //鏈接<a>前的內容'link_after'=>'', //鏈接<a>后的內容
'exclude_tree'=>'', //排除父級/子級樹
'sort_column'=>'menu_order', //排序方式，menu_order按后臺設置；post_date按發布時間，post_modified按修改時間；
'sort_order'=> 'DESC', //排序順序,ASC順序，DESC是倒序);

可以看到，這個wp_list_pages()函數的參數值有很多，在我們wordpress主題模板開發的實際操作中，一般只會使用其中的幾個。

下面，我們通過案例來介紹wp_list_pages()函數是如何生成基于page頁面的導航菜單的。我們先來看一下，wordpress網站后臺都創建了哪些page單頁面，如下圖：

從上圖中，我們可以看到，這個wordpress網站后臺有6個頁面，其中，“投稿”是“子頁面1”和“子頁面2”的父級頁面。

案例1：我們在wordpress網站模板的頭部添加如下代碼：

$menu=array( 'depth'=>0, 'title_li'=>'頁面導航菜單', 'echo'=>1, );wp_list_pages($menu);

我們再到wordpress網站的前臺頁面看一下效果，如下圖：

我們可以看到，頁面導航展示了出來，子頁面按層級展示——縮進2格。

案例2：我們來修改一個參數代碼，標題設置為空，添加一個排序參數，并修改一下層級參數值，代碼如下：

$menu=array( 'depth'=>1, 'title_li'=>'頁面導航菜單', 'echo'=>1, 'sort_order'=> 'DESC','sort_column'=>'menu_order',);wp_list_pages($menu);

這時，我們再來看看wordpress網站前臺頁面的效果，如下圖：

?我們可以看到，導航菜單的標題不見了，而且層級沒有了，排序也發生了變化，按頁面名稱的倒序來進行排列。wp_list_pages()的參數很多，這里不做一一演示，都很簡單。

案例3：wp_list_pages()函數的參數用字符串類型。

我人在開頭說過，wp_list_pages()函數的參數有2種類型，可以是字符串類型，也可以是數組類型。數組類型我們在前2個案例中已經使用過了。這里，我們再來以字符串類型來做一次介紹。

這里我們拿案例的代碼來演示，把數組類型的參數換成字符串的類型，代碼如下：

wp_list_pages("depth=1&title=&echo=1&sort_order=DESC&sort_column=menu_order");

上面的代碼中，我們用到了一個連接符&這個特殊符號，它是用來連接多個參數。中間的=這個符號，就不用解釋了，是等于號。通過這句代碼，我們同樣達到案例2的效果。

如果想讓這個基于page頁面的導航菜單能在頂部橫排顯示，可以修改wordpress網站模板的CSS文件的代碼，修改它的樣式，就可以了。這里就不多說了。

這節課就介紹到這里，以上就是我的觀點，如有不同觀點，歡迎發表評論。同時，歡迎【點贊、分享、收藏】和【關注】我。

篇文章，小海老師帶領大家一同做一個利用CSS技術實現的導航欄。通過這個導航欄的制作，希望大家能夠對前幾篇文章中學習到的CSS屬性能有一個整體的認識，并能夠達到靈活運用的程度。

承接文章：靈活控制塊級元素在一行內顯示，CSS浮動屬性，知道原理就很簡單

技術等級：初級 | 適合前端開發的初學者閱讀學習。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

如果你是初學前端開發，強烈建議跟著文章中講的步驟自己做一做。步驟不多，思路簡單，占用不了大家太多的時間，自己做一遍，一定會收獲不少。

一、導航欄效果圖展示：

今天我們要做的導航欄效果如下圖所示。

導航欄效果圖展示

這個效果主要使用的是<ul></ul>標記對和<a></a>標記對共同實現的。

整個實例涉及到的CSS屬性如下所示：

width
height
background-color
list-style-type
display
float
margin
line-height

二、實現頁面效果：

首先為導航欄設置一個<div>容器，并設置其id屬性的取值設置為nav。該容器用來控制導航欄的通欄位置。通欄的容器寬度應該設置為100%，這里高度設置為40px，顏色為#a72f2e。實現代碼如下所示：

<div id=”nav”></div>
#nav{
width:100%; height:40px;
background-color:#a72f2e;
}

由于要在通欄的容器中顯示固定寬度為1000px的導航欄主體，因此在該容器內部再制作一個<div>容器，用來盛放真正的導航欄代碼。我們將它的class屬性取值為navContent。這個容器的寬度設置為1000px，高度與#nav的高度等高，并且在#nav容器內部水平居中。實現代碼如下所示：

<div class=”navContent”></div>
#nav .navContent{
width:1000px; height:40px;
margin:0 auto;
}

接下來在.navContent容器內部書寫導航欄的各個條目。導航欄是使用<ul></ul>標記對實現的，而它的導航欄條目是利用<li></li>標記對書寫的。因為導航欄需要單擊后跳轉頁面，所以在<li></li>內部使用了<a></a>標記對。

這里要說明一點，因為<li></li>標記對是塊級元素，<a></a>標記對是內聯元素，因此要讓<li></li>標記對包裹<a></a>標記對，不要用<a></a>標記對包裹<li></li>標記對。

這里以導航欄條目“首頁”和“網站介紹”為例，下列HTML代碼展示了導航欄的條目內容。

<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="#">網站簡介</a></li>
…
</ul>

需要更多的導航欄條目，可以在<ul>標記對內部重復書寫<li></li>和<a></a>的代碼格式。

三、編寫整個導航欄的CSS樣式：

整個導航欄是使用<ul></ul>標記對實現的，所以需要對<ul></ul>標記對編寫CSS樣式。

由于無序列表的列表項左側帶有小圓點的項目符號，因此需要將該項目符號去掉。所以<ul></ul>標記對的CSS代碼如下所示：

#nav .navContent ul{
list-style-type:none;
}

四、編寫導航欄條目的CSS樣式：

導航欄條目是使用<li></li>標記對實現的，所以需要對<li></li>標記對編寫CSS樣式。

由于<li></li>標記對是塊級元素，因此即使去掉了左側的項目符號，所有的條目依然都各自獨占一行顯示，所以需要讓它們在一行內顯示，這就需要讓所有的<li></li>標記對左浮動。CSS代碼如下所示：

#nav .navContent ul li{
float:left;
}

五、編寫導航欄條目中鏈接的CSS樣式：

導航欄條目中的鏈接是使用<a></a>標記對實現的，所以需要對<a></a>標記對編寫CSS樣式。

由于<a></a>標記對是內聯元素，因此無法設置寬度和高度，也就無法為每一個導航欄條目設置尺寸。因此需要將<a></a>標記對轉換為塊級元素（display屬性），然后設置寬度和高度（width屬性和height屬性）。

有了寬度和高度，就需要讓鏈接的文本在容器中水平居中（text-align屬性）和垂直居中（line-height屬性）了。

最后去掉鏈接的下劃線（text-decoration屬性），并設置鏈接的文本顏色（color屬性）。

導航欄條目中鏈接的CSS代碼如下所示：

#nav .navContent ul li a{
display:block;
width:100px; height:40px;
text-align:center;
line-height:40px;
text-decoration:none;
color:#dddddd;
}

六、編寫鼠標經過導航欄條目時的CSS樣式：

鼠標經過導航欄目時，即使沒有觸碰到鏈接的文本部分，也應該能夠進行跳轉。因此需要對<a></a>標記對編寫鼠標經過時的CSS樣式。

鼠標經過時，希望背景顏色（background-color屬性）和文本顏色（color屬性）發生變化。

鼠標經過鏈接時的CSS代碼如下所示：

#nav .navContent ul li a:hover{
background-color:#ff5857;
color:#ffffff;
}

七、整體代碼：

至此，這個簡單的導航欄效果就完全實現了，CSS整體使用了約30行代碼。實現這個導航欄效果的HTML代碼如下圖所示。

HTML整體代碼

實現這個導航欄效果的CSS代碼如下圖所示。

CSS整體代碼

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

文章預告

下一次，小海老師開始為大家講解CSS的盒屬性。盒屬性是div布局的基礎，在實際的布局過程中有許多應用技巧。下一篇文章我會為大家將盒屬性一個一個進行詳細的分析。

在線咨詢

上一篇：大廠前端工程師必備能力合輯：響應式設計、CSS動畫
下一篇：Fiddler查看服務器響應數據有亂碼，怎么辦？解決

您的項目需求

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

整合營銷服務商

「前端制作」移動端側邊滑出導航欄

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

小海教材

小海聲明

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

文章預告

您的項目需求