Google Style Drop Down Menu Using Bootstrap with Jquery

In this post we will discuses about Google Style Drop Down Menu script. Everyone like Google app drop down design. So i have create own CSS snippets for drop down menu. Here i have used boostrap,custom jquery.

Live demo Download

Bootstrap code

Include below Bootstrap CSS and javascript in <head></head> tag.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Html

<body>
  <header class="container-fluid">
    <div class="row home-nav">
      <div class="col-xs-12 col-sm-3 col-md-3 col-ld-3">
        <a href="https://www.mostlikers.com"><img src="mos.png" id="logo-img"></a>
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3 col-ld-3 pull-right menu-grid">
        <div class="navbar-header pull-left">
          <button type="button" data-toggle="collapse" data-target="#login_menu">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </button>
        </div>
        <div class="btn-group">
          <img src="grid.png" />
          <button type="button" class="dropdown-toggle" data-toggle="dropdown"></button>
          <div class="dropdown-menu" role="menu">
            <div class="list">
              <div class="row">
                <div class="col-sm-4 col-xs-6">
                  <a href="#">
                    <span class="blog"></span>
                    <div class="menu"><span></span>Blogger</div>
                  </a>
                </div>
                <div class="col-sm-4 col-xs-6">
                  <a href="#">
                    <div class="menu"><span></span>+Google</div>
                  </a>
                </div>
                <div class="col-sm-4 col-xs-6">
                  <a href="#">
                    <div class="menu"><span></span>Translater</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</body>

CSS

I have used some extra style code for menu list

<style>
      body{background: #f9f9f9;font-family: 'Roboto', sans-serif;}
      a:hover{text-decoration: none;}
      header {
      background: #fff;
      border-bottom: dashed 2px #0c617d;
      }
      .menu-grid {
      text-align: right;
      padding: 29px 0;
      }
      .menu-grid .btn-group {
      margin-right: 80px;
      }
      .menu-grid .dropdown-toggle, 
      .menu-grid .dropdown-toggle:hover, 
      .menu-grid .dropdown-toggle:focus, 
      .menu-grid .dropdown-toggle:active, 
      .menu-grid .btn-group.open .dropdown-toggle {
      border: 0;
      float: right;
      box-shadow: none;
      background: transparent;
      }
      .menu-grid .btn-default:after {
      padding-left: 4px;
      line-height: 20px;
      display: inline-block;
      content: "+ Mostlikers";
      color: #0000 !important;
      }
      .menu-grid .btn-default img {
      height: 18px;
      vertical-align: bottom;
      }
      .menu-grid .dropdown-menu {
      margin: 0;
      border: 0;
      padding: 0;
      left: auto;
      right: 35px;
      margin-top: 10px;
      box-shadow: none;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      background-color: #ffffff;
      -webkit-box-shadow: 0 1px 8px 0 #393939;
      -moz-box-shadow: 0 1px 8px 0 #393939;
      -ms-box-shadow: 0 1px 8px 0 #393939;
      -o-box-shadow: 0 1px 8px 0 #393939;
      box-shadow: 0 1px 8px 0 #393939;
      }
      .menu-grid .list {
      width: 380px;
      position: relative;
      padding: 15px 25px;
      }
      .menu-grid .list:after {
      bottom: 100%;
      right: 20px;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(136, 183, 213, 0);
      border-bottom-color: #FFFFFF;
      border-width: 8px;
      margin-right: 0px;
      }
      .menu-grid .list .menu {
      padding: 20px 0;
      color: #333333;
      text-align: center;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -ms-border-radius: 2px;
      -o-border-radius: 2px;
      border-radius: 2px;
      text-transform: capitalize;
      border: 1px solid transparent;
      -webkit-box-shadow: 0 0 1px 0 transparent;
      -moz-box-shadow: 0 0 1px 0 transparent;
      -ms-box-shadow: 0 0 1px 0 transparent;
      -o-box-shadow: 0 0 1px 0 transparent;
      box-shadow: 0 0 1px 0 transparent;
      }
      .menu-grid .list .menu:hover {
      border: 1px solid #e8e8e8;
      -webkit-box-shadow: 0 0 1px 0 #dddddd;
      -moz-box-shadow: 0 0 1px 0 #dddddd;
      -ms-box-shadow: 0 0 1px 0 #dddddd;
      -o-box-shadow: 0 0 1px 0 #dddddd;
      box-shadow: 0 0 1px 0 #dddddd;
      }
      .menu-grid .menu span {
      width: 55px;
      height: 55px;
      display: block;
      margin: 0 auto 10px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
      background-image: url('v1_376447c3.png');
      }
    </style>

Script

.Dropdown-menu - fade in, fade out for dropdown menu
.menu-grid - hove text it will show drop-down menu

<script>
  $(document).ready(function(){
    $('.dropdown-menu').show();
    $('.menu-grid .btn-group').hover(function(){
      $('.dropdown-menu', this).stop(true, true).delay(200).fadeIn();
    }, function(){
      $('.dropdown-menu', this).stop(true, true).delay(1000).fadeOut('fast');
    });
  });
</script>

I hope you are really like this post. if you have any suggestions please comment below. for more updates subscribe to our website.

Menu Link

03 February, 2015