HTML5吸頂導航菜單是指網頁上的菜單欄在往下滾動時，會吸附到頁面的頂部，并固定在那里。這種導航菜單對于大型網站或長頁面非常實用，可以讓用戶隨時訪問導航菜單，而不必回到頁面頂部。下面是一個HTML5吸頂導航菜單的代碼示例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>吸頂導航菜單</title>
<style>
/* 導航條樣式 */
#navbar {
position: sticky; /* 將導航條固定在頁面頂部 */
top: 0; /* 將導航條放置在頁面頂部 */
background-color: #f1f1f1; /* 設置導航條的背景顏色 */
padding: 10px; /* 設置導航條的內邊距 */
z-index: 1; /* 將導航條置于頁面最上方 */
}
/* 導航鏈接樣式 */
#navbar a {
float: left; /* 將鏈接左對齊 */
display: block; /* 設置鏈接為塊級元素 */
color: #333; /* 設置鏈接字體顏色 */
text-align: center; /* 將鏈接文字居中對齊 */
padding: 14px 16px; /* 設置鏈接內邊距 */
text-decoration: none; /* 去除鏈接的下劃線 */
}
/* 激活鏈接樣式 */
#navbar a.active {
background-color: #4CAF50; /* 設置激活鏈接的背景顏色 */
color: white; /* 設置激活鏈接的字體顏色 */
}
</style>
</head>
<body>
<div id="navbar">
<a class="active" href="#home">首頁</a>
<a href="#news">最新動態</a>
<a href="#contact">聯系我們</a>
<a href="#about">關于我們</a>
</div>
<p>這是一個示例頁面，內容很長。</p>
<p>這是另外一個段落。</p>
<p>這是最后一個段落。</p>
</body>
</html>以上是一個簡單的HTML5吸頂導航菜單的代碼示例。通過將導航條設置為sticky（粘性）定位，我們可以讓它在往下滾動時固定在頁面頂部。另外，我們還可以添加CSS樣式，如背景顏色、內邊距等，來美化導航條。最后，通過將“active”類應用于當前所在頁面的鏈接，我們可以更輕松地引導用戶瀏覽網站。上一篇html5向右的代碼