html和css动态导航栏
时间: 2023-09-20 08:03:29 浏览: 54
动态导航栏可以通过JavaScript和CSS来实现。
首先,在HTML中创建导航栏的结构,例如:
```html
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
```
然后,在CSS中定义导航栏的样式,例如:
```css
nav {
background-color: #333;
color: #fff;
height: 50px;
line-height: 50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 0 10px;
border-radius: 5px;
}
nav a:hover {
background-color: #fff;
color: #333;
}
```
最后,在JavaScript中实现导航栏的动态效果。可以通过添加事件监听器来实现鼠标移入导航栏时显示下拉菜单等效果。例如:
```javascript
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("mouseover", function() {
this.getElementsByTagName("ul")[0].style.display = "block";
});
lis[i].addEventListener("mouseout", function() {
this.getElementsByTagName("ul")[0].style.display = "none";
});
}
```
完整的HTML、CSS和JavaScript代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态导航栏</title>
<style>
nav {
background-color: #333;
color: #fff;
height: 50px;
line-height: 50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 0 10px;
border-radius: 5px;
}
nav a:hover {
background-color: #fff;
color: #333;
}
nav ul ul {
display: none;
position: absolute;
background-color: #333;
border-radius: 5px;
}
nav ul ul li {
margin: 0;
padding: 0;
display: block;
}
nav ul ul a {
color: #fff;
padding: 10px;
}
nav ul ul a:hover {
background-color: #fff;
color: #333;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">新闻</a>
<ul>
<li><a href="#">国内新闻</a></li>
<li><a href="#">国际新闻</a></li>
<li><a href="#">体育新闻</a></li>
</ul>
</li>
<li>
<a href="#">产品</a>
<ul>
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul>
</nav>
<script>
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("mouseover", function() {
this.getElementsByTagName("ul")[0].style.display = "block";
});
lis[i].addEventListener("mouseout", function() {
this.getElementsByTagName("ul")[0].style.display = "none";
});
}
</script>
</body>
</html>
```