如何使用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將邊欄和導航欄包含在一起

回答

相關問題