是用bootstrap和jquery实现导航侧边栏和嵌套完整代码实现html
时间: 2023-06-27 11:08:08 浏览: 53
以下是一个使用Bootstrap和jQuery实现导航侧边栏的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Navigation Sidebar Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
/* Sidebar styling */
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
/* Page content styling */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* Responsive media query for smaller screens */
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<!-- Navigation sidebar -->
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<!-- Page content -->
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Navigation</button>
<h1>Welcome to my website!</h1>
<p>This is an example of how to create a navigation sidebar using Bootstrap and jQuery.</p>
</div>
<script>
// Open the sidebar
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
// Close the sidebar
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
</script>
</body>
</html>
```
这段代码实现了一个具有导航侧边栏的网页,点击“Navigation”按钮可以打开或关闭侧边栏。该示例使用了Bootstrap的CSS和JavaScript库以及jQuery库来实现导航侧边栏的样式和交互。