我如何包括一个侧边栏和导航栏一起使用html,css和js
How do I include a sidebar and a Navigation bar together using html,css and js
我有一个代码导航栏这是完美的工作…此外，我有一个可折叠的侧栏，这也是完美的工作代码。但是现在我不明白如何把这两个加在一起，这样我得到一个页面与导航栏和侧边栏在一起。
这是我的代码导航栏-(完整的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>通过这样的组合，侧边栏工作正常，但顶部导航栏只是一个大的白色块。里面什么也没有。
将这两个部分分开。将它们放在一行中，并将col-2放在侧边栏一侧，将col-10放在导航栏一侧。这样你就可以同时拥有侧边栏和导航栏，你也可以使用导航栏侧边来创建一个普通的网页。祝一切顺利!
首先，您在<title>both</title>之后缺少一个开放的style标记。(你有一个关闭/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标签
相关文章：
- 如何将具有相同功能的两个select html标签的两个JS组合在一起
- 将HTML文件中的变量与外部JS文件一起使用
- 我的HTML、CSS和Javascript应该放在一起还是分开
- 为什么 HTML 中的 Value 属性在与 AngularJS 中的 ng-model 一起使用时不起作用
- 加载 HTML 模板以通过浏览器与挖空组件一起使用
- 如何将html中select选项的输入与javascript一起使用
- HTML/Javascript/CSS框堆叠在一起
- 如何将动态html与注入角度引导popover的指令一起使用
- 如何将(CSS/HTML）的包链接在一起.CSS/HTML->CSS/HTML->CSS/HTML
- 如何使用内容脚本将另一个html连同css文件一起注入到html中
- 如何将ngOptions与包含HTML实体的字符串一起使用
- 将html ID与angularJS一起使用
- 将变量与 HTML 字符串一起使用，并计算
的数量 - 如何使帮助程序生成的HTML与jQuery(Meteor）一起使用
- JavaScript 不与 HTML 和 PHP 一起工作
- 如何在 AngularJS 中将自定义指令与外部 HTML 模板捆绑在一起
- 如何将图像链接与 HTML 和 CSS 一起使用时，悬停时在其他位置显示图像
- 如何将两个 html 元素绑定在一起，当第一个元素被删除时，第二个元素也从 DOM 中删除
- 将 Jquery 与 html 一起使用
- 未能将加速度计与 HTML 和 JavaScript 一起使用
Javascript笔记网为您搜集整理了各种javascript使用过程中的问题.
最新更新：- AngularJS and models
- 当点击按钮时，谷歌图表转换为图像
- 水平滚动Marquee，当函数被调用时，我的文本坚持聚集在一起
- 解析带有换行符的json并显示为HTML
- 用来自JSON对象的占位符值替换字符串
- 如何获取jQuery集合中的第k个元素..作为JQUERY元素
- 使用onclick和javascript函数，在参数中调用js-var
- 如何以类似于vivus.js的样式设置SVG填充和路径的动画
- 从其范围之外更改变量
- 表单的AngularJS模板
- Sound Manager 2流应播放
- 表单将数据提交到数据库和url
- js 不能匹配 cookie 名称
- 使用mongodb时间戳缓存标头
- 谷歌翻译-也许通用API逻辑
- Dropzone.js-上传文件夹结构和单个文件
- 防止多次显示弹出窗口.Ajax添加结果已在DOM中注册
- 可点击按钮表的问题，需要防止双击聚焦按钮，同时保持以下按钮可点击
- 用gullow将文件更改到位
- 如何在提交事件的底部设置窗口位置