帶圖標和按鈕切換特效的垂直導航菜單的html頁面源碼

家好，今天給大家介紹一款，帶圖標的垂直導航菜單的html頁面源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

點擊每個按鈕時，都有切換特效，并顯示按鈕的說明，看起來非常不錯（圖2）

圖2

代碼完整，需要的朋友可以下載（圖3）

圖3

本源碼編碼：10148，需要的朋友，點擊下面的鏈接后，搜索10148，即可獲取。

就愛UI - 分享UI設計的點點滴滴

篇文章將教大家如何編寫導航欄，如果大家掌握之后，通過自定義樣式，完全可以實現個性化的導航欄。

效果圖

首先我們看下效果圖，后面的編輯和查看導航也是相同的效果。

效果圖

實現方式

接下來我們直接通過代碼的方式來展示如何完成導航欄的編寫

css部分代碼

首先是div的通用樣式

div通用樣式

然后是鼠標懸浮的效果

鼠標懸浮效果

最后是菜單欄的效果

菜單欄效果

js代碼控制菜單欄效果

首先是鼠標懸停和鼠標離開菜單時的效果

鼠標懸停和移除菜單欄

然后是關于高亮效果的展示和取消

高亮效果的顯示和取消

最后是菜單欄被點擊時的函數

點擊菜單欄的函數

html部分代碼

首先我們來看一下導航欄html代碼

導航欄的html代碼

然后是文件菜單的html代碼

文件菜單的html代碼

其次是編輯菜單的html代碼

編輯菜單的html代碼

最后是查看菜單的html代碼

查看菜單的html代碼

總結

至此，一個完整的自定義導航欄效果就完成了，如果覺得不好看的，完全可以自己設計樣式讓它更符合自己的品味，如果感興趣的希望自己把代碼試敲一遍，畢竟代碼要自己實踐才有效果。

識點：

width:寬度120px

height：高度50px

.nav{}:類

text-align:文本對齊方式

background-image:url（）：背景圖片

display: inline-block：行內塊（點擊?塊級元素和行內元素-前端CSS基礎）

line-height:行高

.nav :hover{background-image: url(images/images/bg7.png);}：鼠標移動到鏈接上顯示效果

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>14</title>
<style>
.nav {
text-align: center;  /*文本居中，單純的居中只會讓部分文字居中，這里需要整體居中，采取類居中*/
} 
.nav a1{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg1.png);/*圖片存放地址配置要對應*/
display: inline-block;
line-height: 50px;
}
.nav a2{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg2.png);
display: inline-block;
line-height: 50px;
}
.nav a3{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg3.png);
display: inline-block;
line-height: 50px;
}
.nav a4{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg4.png);
display: inline-block;
line-height: 50px;
}
.nav a5{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg5.png);
display: inline-block;
line-height: 50px;
}
.nav :hover{
background-image: url(images/images/bg7.png);
}
</style>
</head>
<body>
<div class="nav">
<a1 href="#">網站首頁</a1>
<a2 href="#">網站首頁</a2>
<a3 href="#">網站首頁</a3>
<a4 href="#">網站首頁</a4>
<a5 href="#">網站首頁</a5>
</div>
</body>
</html>

整體效果：