### 编写酷炫导航栏：JS + CSS 实现
#### 一、基础知识与环境准备
在开始构建酷炫的导航栏之前，我们先确保具备以下基础知识和开发环境：
1. **HTML基础知识**：理解HTML的基本结构，知道如何创建列表（`<ul>` 和 `<li>`）。
2. **CSS基础知识**：熟悉CSS的选择器和基本样式属性，如颜色、布局等。
3. **JavaScript基础知识**：了解如何添加交互性，比如监听鼠标事件。
4. **开发环境**：确保拥有文本编辑器（如VSCode或Sublime Text），并能够通过浏览器预览页面。
#### 二、构建静态导航栏
##### 1. HTML结构
使用`<ul>` 和 `<li>` 创建导航菜单的基本结构。例如：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏示例</title>
</head>
<body>
<header class="header">
<div class="nav">
<ul class="list">
<li><a href="Android.html">Android</a></li>
<li><a href="C++.html">C++</a></li>
<li><a href="IOS.html">iOS</a></li>
<li><a href="Java.html">Java</a></li>
<li><a href="Ruby.html">Ruby</a></li>
</ul>
</div>
</header>
<h1>首页</h1>
</body>
</html>
```
##### 2. CSS样式
为导航栏添加基本样式，使其看起来更美观。例如：
```css
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.nav {
width: 100%;
height: 40px;
margin-top: 70px;
background-color: #222;
position: relative;
}
.list {
width: 80%;
height: 40px;
margin: 0 auto;
list-style-type: none;
}
.list li {
float: left;
}
.list li a {
padding: 0 30px;
color: #aaa;
line-height: 40px;
display: block;
transition: 0.3s;
}
.list li a:hover {
background: #333;
color: #fff;
}
```
#### 三、动态效果实现
##### 1. 当前页面高亮显示
为了实现当前页面高亮显示的功能，可以通过JavaScript监听页面加载事件，并根据当前URL来确定哪个链接应该被选中。
```javascript
window.onload = function () {
var links = document.querySelectorAll('.list li a');
for (var i = 0; i < links.length; i++) {
if (links[i].href === window.location.href) {
links[i].classList.add('on');
}
}
};
```
##### 2. 鼠标划过自动切换样式
在上述基础上，可以进一步添加鼠标悬停效果，使得导航项在鼠标悬停时改变背景颜色或文字颜色。
```css
/* 增加过渡效果 */
.list li a {
transition: all 0.3s ease;
}
/* 添加悬停样式 */
.list li a:hover {
background: #333;
color: #fff;
}
```
##### 3. 弹性子菜单
为了让导航栏更加实用，可以为其添加子菜单功能。当鼠标悬停在主菜单项上时，显示出子菜单。
```html
<!-- HTML结构 -->
<li>
<a href="Android.html">Android</a>
<div class="dropdown">
<a href="#">子菜单1</a>
<a href="#">子菜单2</a>
<a href="#">子菜单3</a>
<a href="#">子菜单4</a>
</div>
</li>
```
```css
/* CSS样式 */
.dropdown {
position: absolute;
top: 40px;
background-color: #222;
display: none;
}
.dropdown a {
color: #aaa;
padding-left: 30px;
display: block;
}
```
```javascript
// JavaScript实现
$(function () {
$(".list li").hover(function () {
$(this).find(".dropdown").stop().slideDown({duration: 1000, easing: "easeOutBounce"});
}, function () {
$(this).find(".dropdown").stop().slideUp({duration: 1000, easing: "easeOutBounce"});
});
});
```
#### 四、总结
通过上述步骤，我们可以构建出一个既有美观外观又有实用功能的导航栏。这个导航栏不仅支持基本的链接跳转，还能实现高亮当前页面、鼠标悬停效果以及弹出子菜单等功能。这些技术点对于前端开发者来说是非常基础且实用的技能，掌握了这些技能后，可以进一步探索更复杂的交互效果和技术实现方式，提升自己的开发水平。
