Creating Responsive Navigation Menus - Bootstrap Navbars | Coding Cage

Creating Responsive Navigation Menus - Bootstrap Navbars

By
Today in this tutorial i am gonna show you How to create Responsive static and fixed navigation Menu bars , headers using Bootstrap. Navigation bar is a navigation header that is placed at the top of the page and can be extend or collapse depending on the screen size, Bootstrap made it easy. Now we will cover here creating a static and fixed top navigation bars along with drop-down menu and with search box. It can be made using Bootstrap's Navbar component. These responsive navbar initially collapsed on devices. i have used here latest bootstrap version 3.3.7, so have a look at this simple yet useful tutorial.
Creating Bootstrap Responsive Navigation Bars - Menu


Bootstrap File Settings

Of course you will need bootstrap CSS/JS files and one jQuery library file which will make things easier. check out the below file structure.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
 
    <!-- Page Content will be here... --> 
      
    <!-- Put JS files here. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>


Now Let's have a look at creating navigation bars.

Static Top Navnar

The following example will show you how to create a simple static navbar with navigation links.

<nav class="navbar navbar-default navbar-static-top">
   <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
        </button>
      <a class="navbar-brand" href="#">Coding Cage</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
  </div>
</nav>
This is how you can create a simple static navigation menu bar. just add this code after starting <body> tag. you will get static menu bar. Lets go ahead.


Fixed Top Navbar

Okay, we have done with static navbar, now i'll show how to create fixed navbar menu, that will stick to the top even after page scroll down/up.

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#">Coding Cage</a>
     </div>
     <div id="navbar" class="navbar-collapse collapse">
       <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
       </ul>
     </div><!--/.nav-collapse -->
    </div>
</nav>

Looks like static menu right ? yes this is the same code which we saw in static menu, but there's a little change over there at the first line, this one navbar-fixed-top.


Navigation with Dropdown Menu

Following is the sample code which will show you how to add another menu as a dropdown menu, let's have a look.
<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PHP Tutorials<span class="caret"></span></a>
   <ul class="dropdown-menu">
     <li><a href="#">PHP with OOP</a></li>
     <li><a href="#">PHP with PDO</a></li>
     <li><a href="#">PHP with MySQLi</a></li>
     <li role="separator" class="divider"></li>
     <li class="dropdown-header">PHP Scripts</li>
     <li><a href="#">PHP Login System</a></li>
     <li><a href="#">PHP Admin System</a></li>
   </ul>
</li>
Here you doesn't need to do something additional here just ad a new entire <li> element wherever you want dropdown menu and give it class="dropdown" there you will have to give some extra piece of tags in <a> element as shown above.


Navbar with Search Box

In this example i have taken fixed navbar so it becomes fixed navbar with search box, just have to add <form> element here with input box. see the example.
<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container">
     <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Coding Cage</a>
     </div>
     <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="Search...">
        </form>
     </div><!--/.nav-collapse -->
   </div>
</nav>
all the menu links are in the left side and the search form is in right side so that it looks well. by using this class class="navbar-form navbar-right" you can put any link on right side.



That's it for the day, next time i'll come with more bootstrap and other tutorials, also you will get AngularJS tutorials very soon on this blog. i am planning to cover as much as tutorials i can.

BTW Thanks for the support guys, hope you like it.



2 comments:

  1. it's owesome when i work on responsive web pages..
    nice 1.. i like it.

    ReplyDelete

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download