Bootstrap navigation menu without javascript

Bootstrap getting lot’s of popularity in last few years, It is very helpful library for those developer who are not good in UI designing, There is a large set of component and per-defined classes by which you can easily make a fully responsive website in just few efforts.



In this tutorial we are going to talk about one of the most usable component of bootstrap called NavBar, It used to create a navigation bar for your website. Generally we uses some big javascript library with huge CSS to create a drop-down and responsive navigation bar. But if you have included bootstarp library on your page then you not only create responsive menu but also do lot more things.
bootstrap-navbar

Creating Bootstrap navigation menu without javascript

First of all add bootstrap library on page.

<!-- Boostrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- End Boostrap CSS -->
 
<!-- Boostrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- End Boostrap JS -->

Create simple index.html page and add bootstrap navigation code.

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <input type="checkbox" id="navbar-toggle-cbox">
    <div class="navbar-header">
      <label for="navbar-toggle-cbox" 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>
      </label>
      <a class="navbar-brand" href="#"><b>Website Name</b></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="#aboutUs">About Us</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
         <li><a href="#ourTeam">Our Team</a></li>
         <li><a href="#contactUs">Contact Us</a></li>
         <li><a href="#blog">Blog</a></li>
      </ul>
    </div>
  </div>
</nav>

Apply some CSS on page, In css we added a checkbox and hide it using CSS.

<style>
#navbar-toggle-cbox {
  display:none
}
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}
</style>

Using above simple HTML and CSS code you can create bootstrap menu without javascript.

See live demo and download full source code.

DEMO

DOWNLOAD



If you like this post please don’t forget to subscribe my public notebook for more useful stuff

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.