Vertical Menu Using jQuery and Bootstrap

vertical menu using jquery and bootstrap.

How to make vertical menu for desktop web apps using jquery and bootstrap.

vertical menu using jquery and bootstrap.

Import Library

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="bootstrap-vertical-menu.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Use Script

$(document).ready(function() {
      $('a').click(function(event) {
        $('a').removeClass('selected');
        $(this).addClass('selected');
        event.preventDefault();
      })
 });

Make Content

<nav class="navbar navbar-vertical-left">
  <ul class="nav navbar-nav">
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-star"></i> 
        <span>Menu 1</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-font"></i> 
        <span>Menu 2</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-rocket"></i> 
        <span>Menu 3</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-cog"></i> 
        <span>Menu 4</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-users"></i> 
        <span>Menu 5</span>
      </a>
    </li>
  </ul>
</nav>

 

Nested Menus Using jQuery and Bootstrap

Nested Menus Using jQuery and Bootstrap

Nested menus or navigation (deeply nested menus) using jquery and bootstrap is support desktop or mobile, Nested Nav is responsive plugin for bootstrap 2.3 – 3+

Nested Menus Using jQuery and Bootstrap

Import Library

<link href="//maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="nestednav.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="jquery.nestednav.min.js"></script>

Design Style

body .btn {
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: #999;
  text-shadow: none;
}
body .btn:hover {
  background: #ab86bd;
}
body .btn.btn-navbar {
  background: #a883ba;
  border:none;
  box-shadow: none;
}
body .btn.btn-navbar .icon-bar {
  box-shadow: none;
}
body .btn.btn-main {
  background: #8d689f;
  padding: 20px;
  color: #fff;
}
body .btn.btn-main:hover {
  background: #ab86bd;
}
body .navbar.navbar-inverse .navbar-inner {
  border-radius: 0;
  background: #666;
  border: none;
}
body .navbar.navbar-inverse .navbar-inner a {
  text-shadow: none;
}
body .navbar.navbar-inverse .nav-collapse > ul > li a {
  color: #777;
}
body .navbar.navbar-inverse .nav-collapse > ul > li > a {
  color: #fff;
}
body .navbar.navbar-inverse .navbar-inner .active a,
body .navbar.navbar-inverse .navbar-inner a:hover,
body .navbar.navbar-inverse .navbar-inner a:focus {
  background: #888;
  color: #fff;
}
body .navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
body .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, 
body .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle,
body .navbar.navbar-inverse .navbar-inner .dropdown-submenu.open > a,
body .navbar.navbar-inverse .navbar-inner .dropdown-submenu:hover > a,
body .navbar.navbar-inverse .navbar-inner .dropdown-submenu:focus > a  {
  background: #888;
  color: #fff;
}
body .nav-collapse.in.collapse {
  height: auto !important;
}
body {
  color: #777;
}
.box-purple {
  background: #ab86bd;
  padding: 20px;
  color: #fff;
  border-bottom: 4px solid #8d689f;
}
.box-green {
  background: #cbdb8f;
  padding: 20px;
  color: #fff;
  border-bottom: 4px solid #9cab61;
}
.box-grey {
  background: #999;
  padding: 20px;
  color: #fff;
  border-bottom: 4px solid #777;
}
.switch-vs {
  position:absolute;
  right: 0;
  top:0;
}

#docs table {
  word-wrap: break-word;
  table-layout: fixed;
  width: 90%;
  margin:auto;
}

@media (max-width: 800px) {
  body {
  padding: 0;
  }
  .page-header {
  padding: 20px;
  }
  .icon-random {
  font-size: 100px !important;
  line-height:100px;
  }
  .icon-random:before {
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
  .switch-vs {
  position: static;
  display:block;
  }
}

/* modify nestednav css for theme purposes */
#nested-nav {
  background: #555;
}
#nested-nav .nested-item {
  background: #666;
  color: #555;
}
#nested-nav a.nested-link {
  color: #a8b86c;
}
#nested-nav .nested-no-link {
  color: #999999;
}
#nested-nav .nested-caret, #nested-nav .nested-no-caret {
  background: #777;
}
#nested-nav .nested-container .nested-box,
#nested-nav .nested-container {
  background: #555;
}
#nested-nav .nested-container .nested-box-title {
  background: #a8b86c;
}
#nested-nav .nested-container .nested-box-close {
  background: #93a357;
}
#nested-nav .nested-container .nested-box .nested-no-caret {
  background: #606060;
}
#nested-nav .nested-container .nested-box .nested-caret {
  background: #444;
  color: #a8b86c;
}

Use Script

$(document).ready(function(){
    $('#nestify23').click(function(){
      $('#main-nav').nestednav();
      setTimeout(function(){
        $('.btn.btn-navbar').click();
      }, 550);
    });
});

Make Content

<div id="main-nav" class="navbar navbar-inverse">
      <div class="navbar-inner">
        <div class="container">
          <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="http://www.verticolabs.com/">VerticoLabs</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="/nestedNav/">These</a></li>
              <li><a href="/nestedNav/">Are</a></li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="/nestedNav/">Boring <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="/nestedNav/">Links</a></li>
                  <li><a href="/nestedNav/">You</a></li>
                  <li><a href="/nestedNav/">Should not</a></li>
                  <li><a href="/nestedNav/">Click</a></li>
                  <li><a href="/nestedNav/">Snore</a></li>
                  <li class="dropdown-submenu">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="/nestedNav/">Fruits <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="/nestedNav/">Bananas</a></li>
                      <li><a href="/nestedNav/">Watermelons</a></li>
                      <li><a href="/nestedNav/">Tomatoes</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
                            <li class="dropdown">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">Linkless Dropdown <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="/nestedNav/">Tomato</a></li>
                  <li><a href="/nestedNav/">Carrot</a></li>
                  <li><a href="/nestedNav/">Olive</a></li>
                                </ul>
                            </li>
            </ul>
          </div>
        </div>
      </div>
</div>

 

Expandable Image Gallery Using jQuery and Bootstrap

Expandable Image Gallery Using jQuery and Bootstrap

How to expandable image galley or portfolio using jquery and twitter bootstrap with grid system

Expandable Image Gallery Using jQuery and Bootstrap

Import Library

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/gridex.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap-gridex.min.js"></script>

Design Style

html, body {
  height: 100%;
  color: #656565;
}

a:focus {
  outline: none;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -120px;
}
.footer, .push {
  height: 120px;
}

Use Script

$(function() {
  $('.gridex').gridex();
});

Make Content

<div class="container wrapper">
  <div class="clearfix"></div>
  <ul class="thumbnails gridex">
        <li class="span3 clearfix">
            <a href="#" class="thumbnail"> <img alt="270x170" src="http://placehold.it/270x170" /> </a>
            <!-- gd-expander required -->
            <div class="gd-expander">
                <!-- gd-inner optional -->
                 <div class="gd-inner">
                    <div class="row-fluid">
                        <div class="span6 text-center">
                            <img alt="270x170" class="img-polaroid" src="http://placehold.it/370x270" />
                        </div>
                        <div class="span6">
                            <h2>Heading text 1</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </p>
                            <a href="#" class="btn btn-success">Visit Website</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
  </ul>
  <div class="push"></div>
</div>

 

Portfolio Filter Using jQuery and Bootstrap

How to make gallery or portfolio very mild (lightweight) with button filter using jquery, bootstrap, and bootstrap-portfilter.js.

screenshot-portfoliofilter-442016

Import library

<link href="bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="jquery-1.9.1.min.js"></script>
<script src="bootstrap-portfilter.min.js"></script>

Button Filter

<div class="container wrapper">
        <div class="pull-right">
             <button class="btn btn-small btn-primary" data-toggle="portfilter" data-target="all">All</button>
  </div>
        <div class="clearfix"></div>
</div>

Thumbnails Gallery

<ul class="thumbnails gallery">
  <li class="span3 clearfix" data-tag='brand'>
    <div class="thumbnail">
      <img alt="270x170" src="http://placehold.it/270x170" />
      <div class="caption">
        <h4>Brand Project</h4>
      </div>
    </div>
  </li>
</ul>
<div class="push"></div>

Make Style

html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -120px;
}
.footer, .push {
  height: 120px;
}