如何用Javascript完成导航菜单制作,当前鼠标选中菜单和其它菜单效果有明显区别,最好写出多个实例
时间: 2024-03-30 07:40:28 浏览: 24
可以使用以下步骤来完成导航菜单的制作:
1. 先定义好 HTML 结构,即导航菜单的容器和菜单项。
```html
<div class="nav-menu">
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
<li><a href="#">菜单项4</a></li>
<li><a href="#">菜单项5</a></li>
</ul>
</div>
```
2. 使用 CSS 样式来设置导航菜单的样式,包括背景颜色、字体大小、字体颜色等。
```css
.nav-menu {
background-color: #333;
padding: 10px;
}
.nav-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu li {
display: inline-block;
margin-right: 10px;
}
.nav-menu li a {
color: #fff;
font-size: 16px;
text-decoration: none;
padding: 5px 10px;
}
.nav-menu li.active a {
background-color: #fff;
color: #333;
}
```
3. 使用 Javascript 来实现选中菜单项和其他菜单项的不同效果。
```javascript
var menuItems = document.querySelectorAll('.nav-menu li');
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', function() {
// 先将所有菜单项的 active 类名移除
for (var j = 0; j < menuItems.length; j++) {
menuItems[j].classList.remove('active');
}
// 再给当前点击的菜单项添加 active 类名
this.classList.add('active');
});
}
```
这里给出两个实例,一个使用纯 Javascript 实现,另一个使用 jQuery 实现:
Javascript 实现:
https://codepen.io/anon/pen/KJmVQV
jQuery 实现:
https://codepen.io/anon/pen/vMmWjK
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)