<body> <div class="index_main"> <div id="progress-bar"></div> <div id="menu-container" class="header_"> </div> </div> <script src="../static/JS/menu.js"></script> <script src="../static/JS/jindu.js"></script> </body>该菜单如何在添加图标和文本
时间: 2024-04-14 21:02:21 浏览: 176
要在菜单中添加图标和文本,你可以根据以下示例代码进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.index_main {
position: relative;
}
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background-color: blue;
z-index: 9999;
transition: width 0.3s ease-out;
}
.menu-container {
width: 50px; /* 初始宽度 */
background-color: #f1f1f1;
overflow: hidden;
transition: width 0.3s ease-out;
}
.menu-container:hover {
width: 200px; /* 扩展后的宽度 */
}
.menu-icon {
display: inline-block;
width: 20px;
height: 20px;
background-image: url('path_to_icon.png'); /* 替换为你的图标路径 */
background-size: cover;
margin-right: 5px;
}
.menu-text {
display: inline-block;
opacity: 0; /* 初始隐藏文本 */
transition: opacity 0.3s ease-out;
}
.menu-container:hover .menu-text {
opacity: 1; /* 鼠标悬停时显示文本 */
}
</style>
</head>
<body>
<div class="index_main">
<div id="progress-bar"></div>
<div id="menu-container" class="header_">
<div class="menu-item">
<div class="menu-icon"></div>
<div class="menu-text">菜单文本1</div>
</div>
<div class="menu-item">
<div class="menu-icon"></div>
<div class="menu-text">菜单文本2</div>
</div>
</div>
</div>
<script src="../static/JS/menu.js"></script>
<script src="../static/JS/jindu.js"></script>
</body>
</html>
```
根据上述代码,你可以在`menu-container`中添加多个`menu-item`用于显示不同的图标和文本。你需要将每个`menu-icon`的`background-image`属性替换为相应图标的路径。
当鼠标悬停在菜单容器上时,菜单容器的宽度会扩展,并且文本的`opacity`属性会变为1,以显示出文本。
希望这个示例能够满足你的需求。如果还有其他问题,请随时提问。
阅读全文