Bootstrap Tutorial Navigation

Mar 27, 2013 by eaw in Responsive

Make a Responsive Website quickly and easily

1. Create the navigation

Using a bulleted list, create your navigation including your sub-navigation. Note that you will have two sets of ul tags.

<nav>
<ul>
     <li><a href="#">Home</a> </li>
     <li><a href="#">HTML5</a></li>
     <li><a href="#">CSS3</a></li>
     <li><a href="#">Tutorials</a>
        <ul>
        <li><a href="#">Tutorial One</a></li>
        <li><a href="#">Tutorial Two</a></li>
        <li><a href="#">Tutorial Three</a></li>
        </ul>
      </li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Contact</a></li>
</ul>
</nav>

2. Add classes

Add class=”nav” to the first set of ul tags.
<ul class=”nav”>

Make the home page “active” so the navigation is highlighted
<li class=”active”>

Add class-“navbar” to the <nav> tag
<nav class=”navbar”>

Add a div around the entire first set of ul tags
<div class=”navbar-inner”>

Make the navigation bar black instead of white
<nav class=”navbar navbar-inverse>

<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
      <li class="active"><a href="#">Home</a> </li>
      <li><a href="#">HTML5</a></li>
      <li><a href="#">CSS3</a></li>
      <li><a href="#">Tutorials</a>
         <ul>
         <li><a href="#">Tutorial One</a></li>
         <li><a href="#">Tutorial Two</a></li>
         <li><a href="#">Tutorial Three</a></li>
        </ul>
      </li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Contact</a></li>
</ul>
</div>
</nav>

3. Make it responsive

Make the navigation responsive by adding some code:

a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

Add the above code to your navigation right below the div class=”navbar-inner”

<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
</a>
<ul class="nav">
      <li class="active"><a href="#">Home</a> </li>
      <li><a href="#">HTML5</a></li>
      <li><a href="#">CSS3</a></li>
      <li><a href="#">Tutorials</a>
         <ul>
         <li><a href="#">Tutorial One</a></li>
         <li><a href="#">Tutorial Two</a></li>
         <li><a href="#">Tutorial Three</a></li>
        </ul>
      </li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Contact</a></li>
</ul>
</div>
</nav>

4. Add drop down menus

Add more classes

Define what menu will collapse
Add div class=”nav-collapse” around the first ul
<div class=”nav-collapse”>

Define what menu will be the drop down
Add class to the second ul tags
<ul class=dropdown-menu”>

Define what menu will be the drop down
Add class to li tag for around Tutorials navigation
<li class=”dropdown”>

Define the link that will have the drop down
Add class to a href
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>Tutorials </a>

Add caret
<span class=”caret”></span>

<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
      <li class="active"><a href="#">Home</a> </li>
      <li><a href="#">HTML5</a></li>
      <li><a href="#">CSS3</a></li>
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tutorials <span class="caret"></span></a>
        <ul class="dropdown-menu">
        <li><a href="#">Tutorial One</a></li>
        <li><a href="#">Tutorial Two</a></li>
        <li><a href="#">Tutorial Three</a></li>
        </ul>
     </li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>