我有一个导航条的代码，工作正常。。。我还得到了一个折叠侧杆的代码，它也工作得很好。但现在我不知道如何把这两个加在一起，以便我得到一个网页导航栏和边栏在一起。
这是我的navbar代码（用html完成）：
<html>
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
<!-- Font styles -->
<style type="text/css">
@import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
@import "https://daneden.github.io/animate.css/animate.min.css";
</style>
</head>
<body style="background-color:#E6E6FA">
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li><a href="#"> </a></li> <!-- TO leave some space after logo-->
<li class="active"><a href="#">Home </a></li>
<li class = "dropdown">
<a href = "#" class="dropdown-toggle" data-toggle = "dropdown"> Functionalities <span class = "caret"></span></a>
<ul class = "dropdown-menu">
<li><a href="#">Insurances</a></li>
<li class="nav-divider"></li><li><a href="#">Loans</a></li>
<li class="nav-divider"></li><li><a href="#">Card Privilages</a></li>
</ul>
</li>
<li><a href="#">Join Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li><a href="customerLogin.php">Customer</a></li>||
<li><a href="employeeLogin.php">Employee</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
</body>
</html>头部标签上的链接-我只是通过谷歌搜索得到的。
还有，我的侧边栏代码在这里-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
</style>
</head>
<body>
<nav>
<a href="#" class="nav-toggle-btn"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>但现在不行。我如何组合这些？我想要一个既有顶部导航栏又有侧边栏的页面。我有粘贴代码的所有组合，但没有运气。我现在有最新消息-在把这两者结合起来之后-
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
@import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
@import "https://daneden.github.io/animate.css/animate.min.css";<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<link rel="stylesheet" href="styles.css">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li><a href="#"> </a></li> <!-- TO leave some space after logo-->
<li class="active"><a href="#">Home </a></li>
<li class = "dropdown">
<a href = "#" class="dropdown-toggle" data-toggle = "dropdown"> Functionalities <span class = "caret"></span></a>
<ul class = "dropdown-menu">
<li><a href="#">Insurances</a></li>
<li class="nav-divider"></li><li><a href="#">Loans</a></li>
<li class="nav-divider"></li><li><a href="#">Card Privilages</a></li>
</ul>
</li>
<li><a href="#">Join Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li><a href="customerLogin.php">Customer</a></li>||
<li><a href="employeeLogin.php">Employee</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
<!-- Sidebar nav -->
<nav>
<a href="#" class="nav-toggle-btn"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Sidebar Ends -->
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>通过这样组合，侧栏工作正常，但顶部导航栏只是一个大白块。里面什么都没有。
最佳答案
首先，您的style后面缺少一个opening<title>both</title>标记。（您的导航正前方有一个关闭/style标记）。这将暂时应用内联样式。你应该看看你现在想要实现什么。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
/* styles */
</style>
</head>
但最终，您需要将这些样式复制到CSS文件中，然后将CSS文件链接到HTML中，如下所示：
<link rel="stylesheet" href="css/styles.css">。也就是说，您的样式表名为“styles.css”，位于“css”文件夹中。查看用于链接外部CSS文件的HTML link tag。
关于javascript - 如何使用html，css和js一起包含侧边栏和导航栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40560962/