用js编写一个侧边导航栏
时间: 2023-10-31 17:06:40 浏览: 53
好的,以下是我为您提供的样例代码,您可以根据实际需求进行修改:
HTML:
```
<div class="sidebar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
```
CSS:
```
.sidebar {
height: 100%; /* 让导航栏充满整个高度 */
width: 200px; /* 设置导航栏宽度 */
position: fixed; /* 使导航栏固定在页面上 */
top: 0; /* 将导航栏定位到页面顶部 */
left: 0; /* 将导航栏定位到页面左边 */
background-color: #222; /* 设置导航栏背景色 */
overflow-x: hidden; /* 禁止导航栏水平滚动 */
padding-top: 20px; /* 设置导航栏顶部内边距 */
}
/* 导航栏内部链接样式 */
.sidebar a {
padding: 6px 8px 6px 16px; /* 设置链接内边距 */
text-decoration: none; /* 去除下划线 */
font-size: 20px; /* 设置字体大小 */
color: #ccc; /* 设置字体颜色 */
display: block; /* 将链接设置为块级元素 */
}
/* 链接鼠标悬浮样式 */
.sidebar a:hover {
color: #fff;
}
```
JavaScript:
```
// 打开导航栏按钮点击事件
function openNav() {
document.querySelector(".sidebar").style.width = "200px";
}
// 关闭导航栏按钮点击事件
function closeNav() {
document.querySelector(".sidebar").style.width = "0";
}
```
在页面中引入以上HTML、CSS和JavaScript代码,即可实现一个简单的侧边导航栏。您也可以根据需要进行修改和美化。