在現代社會中，人們出門旅游、辦事、購物等越來越依賴導航。而手機導航作為一種便利而又實用的應用，成為現代生活不可或缺的一部分。今天我們來學習一下如何利用純CSS樣式實現手機導航。

在實現手機導航前，我們需要先構建HTML結構。我們可以使用無序列表（ul）和列表項目（li）來構建導航菜單。代碼如下：

<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">娛樂</a></li>
<li><a href="#">購物</a></li>
</ul>

接下來，我們需要使用CSS樣式美化導航菜單。首先，讓菜單項水平排列。我們可以設置列表項目（li）顯示為inline-block，這樣就可以使多個菜單項水平排列。代碼如下：

.nav li {
display: inline-block;
}

然后，設置導航菜單的樣式，如字體、字號、顏色等。代碼如下：

.nav {
font-family: "Microsoft Yahei", sans-serif;
font-size: 16px;
color: #333;
}
.nav li a {
color: #333;
text-decoration: none;
}

接著，我們需要設置導航菜單的激活效果。即當用戶點擊某個菜單項后，當前菜單項的背景色和字體顏色改變。我們可以使用:hover偽類和.current類來實現。代碼如下：

.nav li:hover {
background-color: #eee;
}
.nav li.current {
background-color: #333;
}
.nav li.current a {
color: #fff;
}

最后，我們需要在JS中動態添加.current類。當用戶點擊某個菜單項后，JS會自動添加該菜單項的.current類。代碼如下：

var navItems = document.querySelectorAll(".nav li");
for (var i = 0; i< navItems.length; i++) {
navItems[i].addEventListener("click", function() {
for (var j = 0; j< navItems.length; j++) {
navItems[j].classList.remove("current");
}
this.classList.add("current");
});
}

到此，我們的手機導航就完成了。完整的CSS樣式代碼如下：

.nav li {
display: inline-block;
}
.nav {
font-family: "Microsoft Yahei", sans-serif;
font-size: 16px;
color: #333;
}
.nav li a {
color: #333;
text-decoration: none;
}
.nav li:hover {
background-color: #eee;
}
.nav li.current {
background-color: #333;
}
.nav li.current a {
color: #fff;
}

通過以上步驟，我們成功利用純CSS樣式實現了手機導航。大家可以根據實際情況調整導航菜單的樣式和JS代碼，實現更加美觀和實用的手機導航。