Responsive navbar menu using bootstrap | 2my4edge

09 February 2015

Responsive navbar menu using bootstrap

Bootstrap Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases. Justified navbar nav links are currently not supported.

Responsive navbar menu using bootstrap
DOWNLOAD          LIVE DEMO

FEATURE OF THIS BOOSTARP NAVBAR :
  • Overflowing content
  • Requires JavaScript plugin for collapse
  • Changing the collapsed mobile navbar breakpoint
  • Make navbars accessible
BOOTSTRAP FILES WITH JQUERY
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/
                   bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/
                                               bootstrap.min.js"></script>

These files are important while running Bootstrap. and the code for navigation bar menu.

HTML
<nav class="navbar navbar-default">
  <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 
      data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
       <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="http://2my4edge.com">2my4edge</a> 
    </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 
                            <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" 
            data-toggle="dropdown" role="button" aria-expanded="false">
                                    Dropdown<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" required class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" 
                    data-toggle="dropdown" role="button" aria-expanded="false">
                                            Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container-fluid --> 
</nav>

View this in LIVE DEMO page, it is responsive menu, acceptable for all mobile and tablet view. i hope this post is really useful to you. Thanks for visiting. keep visiting for more useful information.




RELATED POSTS :
Simple Tooltip using Bootstrap
Step by step tab style form validation Wizard using Bootstrap
Simple dropdown menu with Bootstrap
Responsive Full screen slider using Bootstrap
Accordion toggle using Jquery with Bootstrap
Menu to Drop down menu while Resize the browser
Simple dropdown menu with Bootstrap
Floating menu using Jquery 

1 comment:

^