CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abhijeet Sridhar
Abhijeet Sridhar

Reputation: 89

How do I include a sidebar and a Navigation bar together using html,css and js

I have got a code for navbar which is working perfectly... Also i have got the code for a collapsable side bar which is also working perfectly. But now i dont understand how to add these two together so that i get a page with navbar and sidebar together.

This is my code for navbar - (complete with 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>

Those links in the head tag - i got it by simply googling.

Also, my sidebar code is here - 

<!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>

But not now. how do I combine these? I want a page which will have both the top navbar and the sidebar. I have all combinations of pasting the codes but with no luck. What i have latest now - after combining these two is this -

 * {
                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>

By combining it like this, The side bar is working correctly but the top navbar is just a big white block. Nothing in there.

Upvotes: 4

Views: 5658

Answers (2)

Vaibhav Ahire
Vaibhav Ahire

Reputation: 11

Divide both the sections differently. Put both in one row and give col-2 to the sidebar side and col-10 to the nav-bar side. This way you'll be having a side and nav-bar both side by side, you can also use the nav-bar side for creating a normal webpage. All the best!

Upvotes: 1

James
James

Reputation: 323

First of all, your missing an opening style tag just after your <title>both</title>. (You have a closing /style tag just before your nav). This will apply inline styles for the time being. You should see what you want to achieve now.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Both</title>

  <style>
    /* styles */
  </style>
</head>

But ultimately, you need to copy these styles into a CSS file and then link the CSS file in your HTML like this: <link rel="stylesheet" href="css/styles.css">. That is presuming, your stylesheet is called "styles.css" and is inside a 'CSS' folder.

Have a look at the HTML link tag for linking your external CSS file.

Upvotes: 0

Related Questions