如何使用html，css和js将边栏和导航栏包含在一起

我有一个完美工作的导航栏代码...另外我还有一个可折叠侧栏的代码，它也可以完美地工作。但现在我不明白如何将这两个添加到一起，这样我就可以将导航栏和侧边栏一起放到一起。如何使用html，css和js将边栏和导航栏包含在一起

这是我的导航栏的代码 - （完整的HTML）：

<html> 
 

 
<head> 
 

 
    <title>Navbar</title> 
 
\t 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t 
 
\t 
 
\t 
 
\t <!--Navbar--> 
 
\t <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> 
 
\t <!-- Navbar khatam--> 
 
\t 
 
\t <!-- Font styles --> 
 
\t <style type="text/css"> 
 
     @import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css"; 
 
\t @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"; 
 
\t </style> 
 
\t 
 
</head> 
 
<body style="background-color:#E6E6FA"> 
 

 
\t <!--Navigation bar--> 
 

 
\t <nav class="navbar navbar-inverse" role="navigation"> 
 
\t 
 
\t <div class="navbar-inner"> 
 
\t 
 
\t \t <!--Container class div--> 
 
\t \t <div class="container-fluid"> 
 

 
\t \t \t <div class="navbar-header"> 
 
\t \t \t \t 
 
\t \t \t \t <a class="navbar-brand" href="#"> 
 
\t \t \t \t \t <img src="logo.jpg" alt=""> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="collapse navbar-collapse" id="mainNavBar"> 
 
\t \t \t \t <ul class="nav navbar-nav navbar-left"> 
 
\t \t \t \t 
 
\t \t \t \t \t <li><a href="#"> </a></li> <!-- TO leave some space after logo--> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <li class="active"><a href="#">Home </a></li> 
 
\t \t \t \t \t <li class = "dropdown"> 
 
\t \t \t \t \t \t <a href = "#" class="dropdown-toggle" data-toggle = "dropdown"> Functionalities <span class = "caret"></span></a> 
 
\t \t \t \t \t \t <ul class = "dropdown-menu"> 
 
\t \t \t \t \t \t \t <li><a href="#">Insurances</a></li> 
 
\t \t \t \t \t \t \t <li class="nav-divider"></li><li><a href="#">Loans</a></li> 
 
\t \t \t \t \t \t \t <li class="nav-divider"></li><li><a href="#">Card Privilages</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <li><a href="#">Join Us</a></li> 
 
\t \t \t \t \t <li><a href="#">About Us</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <!-- Right hand side navbar --> 
 
\t \t \t \t <ul class ="nav navbar-nav navbar-right"> \t 
 
\t \t \t \t \t <li><a href="customerLogin.php">Customer</a></li>|| 
 
\t \t \t \t \t <li><a href="employeeLogin.php">Employee</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t </nav> 
 
\t <!--Navbar End--> 
 
\t 
 
\t 
 
</body> 
 

 
</html>

头标记这些链接 - 我通过简单的谷歌搜索得到它。

而且，我的侧边栏的代码是在这里 -

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>Both</title> 
 
\t \t <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> 
 
\t 
 
    <body> 
 
\t 
 
\t 
 
\t 
 
     
 
     <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); 
 
      } 
 
      
 
\t \t @import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css"; 
 
\t \t @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"; 
 
\t \t @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> 
 
\t 
 
\t <link rel="stylesheet" href="styles.css"> 
 
\t \t 
 
\t \t 
 
\t <!--Navbar--> 
 
\t <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> 
 
\t <!-- Navbar khatam--> 
 
\t 
 
\t 
 
\t 
 
    </head> 
 
\t 
 
    <body> 
 
\t 
 
\t <!--Navigation bar--> 
 

 
\t <nav class="navbar navbar-inverse" role="navigation"> 
 
\t 
 
\t <div class="navbar-inner"> 
 
\t 
 
\t \t <!--Container class div--> 
 
\t \t <div class="container-fluid"> 
 

 
\t \t \t <div class="navbar-header"> 
 
\t \t \t \t 
 
\t \t \t \t <a class="navbar-brand" href="#"> 
 
\t \t \t \t \t <img src="logo.jpg" alt=""> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="collapse navbar-collapse" id="mainNavBar"> 
 
\t \t \t \t <ul class="nav navbar-nav navbar-left"> 
 
\t \t \t \t 
 
\t \t \t \t \t <li><a href="#"> </a></li> <!-- TO leave some space after logo--> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <li class="active"><a href="#">Home </a></li> 
 
\t \t \t \t \t <li class = "dropdown"> 
 
\t \t \t \t \t \t <a href = "#" class="dropdown-toggle" data-toggle = "dropdown"> Functionalities <span class = "caret"></span></a> 
 
\t \t \t \t \t \t <ul class = "dropdown-menu"> 
 
\t \t \t \t \t \t \t <li><a href="#">Insurances</a></li> 
 
\t \t \t \t \t \t \t <li class="nav-divider"></li><li><a href="#">Loans</a></li> 
 
\t \t \t \t \t \t \t <li class="nav-divider"></li><li><a href="#">Card Privilages</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <li><a href="#">Join Us</a></li> 
 
\t \t \t \t \t <li><a href="#">About Us</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <!-- Right hand side navbar --> 
 
\t \t \t \t <ul class ="nav navbar-nav navbar-right"> \t 
 
\t \t \t \t \t <li><a href="customerLogin.php">Customer</a></li>|| 
 
\t \t \t \t \t <li><a href="employeeLogin.php">Employee</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t </nav> 
 
\t <!--Navbar End--> 
 
\t 
 
\t 
 
\t 
 
     <!-- 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 --> 
 
\t \t 
 
\t \t 
 
     <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>

通过像这样结合，侧栏工作正常，但顶部导航栏中，只是一个大的白色块。那里没有东西。

来源

2016-11-12 Abhijeet Sridhar

首先，你只是你<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”文件夹内。

查看HTML link tag用于链接您的外部CSS文件。

来源

2016-11-12 08:35:10 James

RE：我发布了我所做的组合。错误？或任何帮助非常感谢。我做了一个单独的文件，以避免错别字提到 –

是把HTML放在同一个文件，然后链接到外部CSS。 – James

如何使用html，css和js将边栏和导航栏包含在一起

回答

相关问题