Google Style Drop Down Menu Using Bootstrap with Jquery - Mostlikers

03 February, 2015

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. 

Google style drop down

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.






































Labels:
,


















No comments:















Post a Comment






















        

      









Subscribe to:
Post Comments (Atom)