利用html+css制作竖版一个导航显示报修相关点击下面显示其他模块,报修提交,报修记录,派单处理,报修评价
时间: 2023-06-14 22:05:04 浏览: 61
可以使用以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>报修导航</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
nav {
background-color: #333;
height: 100vh;
width: 150px;
position: fixed;
left: 0;
top: 0;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
nav a {
color: #fff;
text-decoration: none;
margin: 10px 0;
font-size: 18px;
text-align: center;
display: block;
padding: 10px;
}
nav a:hover {
background-color: #fff;
color: #333;
transition: all 0.3s ease;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
}
nav li {
margin: 0;
padding: 0;
}
nav ul li a {
font-size: 16px;
margin: 5px 0;
padding: 5px;
}
nav ul li a:hover {
background-color: #555;
transition: all 0.3s ease;
}
nav li:hover ul {
display: block;
position: absolute;
left: 150px;
top: 0;
width: 200px;
background-color: #555;
padding: 10px;
box-sizing: border-box;
}
h1 {
margin-top: 150px;
margin-left: 200px;
font-size: 36px;
color: #333;
}
</style>
</head>
<body>
<nav>
<h2>报修导航</h2>
<a href="#">报修相关</a>
<ul>
<li><a href="#">报修提交</a></li>
<li><a href="#">报修记录</a></li>
<li><a href="#">派单处理</a></li>
<li><a href="#">报修评价</a></li>
</ul>
</nav>
<h1>这里是报修系统主界面</h1>
<script>
var navLinks = document.querySelectorAll("nav ul li a");
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener("click", function() {
var subMenu = this.nextElementSibling;
if (subMenu.style.display === "block") {
subMenu.style.display = "none";
} else {
subMenu.style.display = "block";
}
});
}
</script>
</body>
</html>
```
说明:
1. 代码中使用了 HTML 和 CSS 来制作竖版的导航栏,其中 `nav` 元素用来包含导航内容,`a` 元素用来表示导航项。
2. 在 `a` 元素中使用了 `ul` 和 `li` 元素来表示子菜单内容,初始状态下子菜单是隐藏的,只有在鼠标悬停在导航项上时才会显示。
3. 使用 JavaScript 监听 `a` 元素的点击事件,根据子菜单的状态来切换其显示或隐藏。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.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)