Question

我有一个导航栏的代码，它完美地工作...此外，我还有一个可折叠侧栏的代码，它也可以正常工作。但现在我不明白如何将这两个加在一起，以便我得到一个带有导航栏和侧边栏的页面。

这是我的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>

通过这样组合，侧栏工作正常，但顶部导航栏只是一个大的白色块。那里什么都没有。

Answer 1

以不同的方式划分这两个部分。将两者放在一行中，将 col-2 放在侧边栏一侧，将 col-10 放在导航栏一侧。这样，您将同时拥有一个侧边和导航栏，您还可以使用导航栏侧来创建普通网页。一切顺利！

Answer 2

首先，您在style之后错过了一个开头<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文件中，然后在HTML中链接CSS文件，如下所示：<link rel="stylesheet" href="css/styles.css">。假设，您的样式表称为“styles.css”，位于“CSS”文件夹中。

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

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

2 个答案: