html制作水平弹出式菜单
时间: 2024-09-28 19:06:59 浏览: 20
HTML和CSS可以结合起来创建一个基本的水平滑动菜单,也称为侧边栏或导航菜单。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
/* CSS样式 */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: -150px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
display: block;
color: #f1f1f1;
}
.sidenav a:hover {
background-color: #ddd;
color: black;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="sidenav" id="mySidenav">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
<button class="closebtn" onclick="closeNav()">✖</button>
</div>
<!-- 页面主体内容 -->
<div style="margin-left: 150px;">
<h2>页面标题</h2>
<p>这里是主要内容。</p>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
```
在这个示例中,当点击按钮或者屏幕左侧区域时,通过JavaScript控制`#mySidenav`的宽度从0变大到250px,实现了水平滑动菜单的效果。你可以根据需要调整样式和功能。