使用HTML5的手機(jī)導(dǎo)航菜單代碼 在移動(dòng)設(shè)備上使用HTML5時(shí)，一個(gè)重要的元素就是導(dǎo)航菜單。在這篇文章中，我們將介紹如何編寫一個(gè)簡(jiǎn)單的HTML5手機(jī)導(dǎo)航菜單并將其部署到你的網(wǎng)站上。 為了編寫這個(gè)導(dǎo)航菜單，我們將使用HTML5的新特性：nav元素。這個(gè)元素用于定義一個(gè)導(dǎo)航區(qū)域，包含一組具有導(dǎo)航性質(zhì)的鏈接。讓我們先來(lái)看看一個(gè)簡(jiǎn)單的HTML5導(dǎo)航菜單代碼：

<nav>
<ul>
<li><a href="/">首頁(yè)</a></li>
<li><a href="/about">關(guān)于我們</a></li>
<li><a href="/services">服務(wù)</a></li>
<li><a href="/contact-us">聯(lián)系我們</a></li>
</ul>
</nav>

以上代碼將創(chuàng)建一個(gè)基本的導(dǎo)航菜單，其中包含四個(gè)鏈接：首頁(yè)、關(guān)于我們、服務(wù)和聯(lián)系我們。我們將該菜單放在nav標(biāo)簽中，并在一個(gè)無(wú)序列表中（ul標(biāo)簽）包含鏈接。 現(xiàn)在，我們需要為導(dǎo)航菜單添加CSS樣式。我們可以使用CSS控制導(dǎo)航菜單的外觀和交互。以下是一個(gè)簡(jiǎn)單的CSS樣式，可應(yīng)用于上面的導(dǎo)航菜單代碼：

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樣式將導(dǎo)航菜單背景設(shè)置為灰色，在每個(gè)鏈接周圍添加內(nèi)邊距，并設(shè)置鏈接的文本顏色為白色。當(dāng)用戶將鼠標(biāo)指針懸停在鏈接上時(shí)，我們?yōu)殒溄犹砑恿艘粋€(gè)灰色的背景色。 最后，我們將給出完整的HTML5手機(jī)導(dǎo)航菜單代碼，包括HTML和CSS：

<nav>
<ul>
<li><a href="/">首頁(yè)</a></li>
<li><a href="/about">關(guān)于我們</a></li>
<li><a href="/services">服務(wù)</a></li>
<li><a href="/contact-us">聯(lián)系我們</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>

當(dāng)該代碼被添加到網(wǎng)站中時(shí)，用戶可以在移動(dòng)設(shè)備上輕而易舉地使用導(dǎo)航菜單來(lái)瀏覽網(wǎng)站的不同部分。