使用HTML5的手機導航菜單代碼 在移動設備上使用HTML5時，一個重要的元素就是導航菜單。在這篇文章中，我們將介紹如何編寫一個簡單的HTML5手機導航菜單并將其部署到你的網站上。 為了編寫這個導航菜單，我們將使用HTML5的新特性：nav元素。這個元素用于定義一個導航區域，包含一組具有導航性質的鏈接。讓我們先來看看一個簡單的HTML5導航菜單代碼：

<nav>
<ul>
<li><a href="/">首頁</a></li>
<li><a href="/about">關于我們</a></li>
<li><a href="/services">服務</a></li>
<li><a href="/contact-us">聯系我們</a></li>
</ul>
</nav>

以上代碼將創建一個基本的導航菜單，其中包含四個鏈接：首頁、關于我們、服務和聯系我們。我們將該菜單放在nav標簽中，并在一個無序列表中（ul標簽）包含鏈接。 現在，我們需要為導航菜單添加CSS樣式。我們可以使用CSS控制導航菜單的外觀和交互。以下是一個簡單的CSS樣式，可應用于上面的導航菜單代碼：

nav {
background: #333;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
}
a:hover {
background: #666;
}

以上CSS樣式將導航菜單背景設置為灰色，在每個鏈接周圍添加內邊距，并設置鏈接的文本顏色為白色。當用戶將鼠標指針懸停在鏈接上時，我們為鏈接添加了一個灰色的背景色。 最后，我們將給出完整的HTML5手機導航菜單代碼，包括HTML和CSS：

<nav>
<ul>
<li><a href="/">首頁</a></li>
<li><a href="/about">關于我們</a></li>
<li><a href="/services">服務</a></li>
<li><a href="/contact-us">聯系我們</a></li>
</ul>
</nav>
<style>
nav {
background: #333;
height: 40px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
}
a:hover {
background: #666;
}
</style>

當該代碼被添加到網站中時，用戶可以在移動設備上輕而易舉地使用導航菜單來瀏覽網站的不同部分。