Membuat Menu Hover Responsive Dengan Bootraps

Kali ini kenny akan membagikan tutorial membuat menu hover responsive dengan bootraps. Pembuatannya sangatlah mudah kalau kalian sudah mengenal class dan id dari CSS bootraps.

Dengan tampilan yang responsive menu hover ini memungkinkan akan menyesuaikan di segala ukuran layar, baik it laptop, android ataupun ios.

Seperti yang kita ketahui tampilan menu bootraps ada dua macam 2 macam gelap dan juga terang, kali ini kenny akan memberikan source kode menu hover responsive bootrraps dengan warna gelap.

Berikut Source kodenya

1. Untuk bootrapsnya kenny menggunakan versi 3.1.1

Letakkan  link Bootraps di bawah ini sebelum tag /head

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

2. Bagian HTML

Silahkan sesuaikan bagian HTML di bawah ini anda bisa mengganti tanda # dengan link aktip anda dan mengganti tulisan menu yang sesuai dengan blog anda.

<div class="body-wrap">
  <div class="container">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" 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="#">Icon</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="#">Complete</a></li>
            <li><a href="#">Ongoing</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Romance</a></li>
                <li><a href="#">Super Power</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>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Archive</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-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>
  </div>
</div>

3. Bagian CSS

Letakkan CSS di bawah sebelum tag /head

<style>
 body {font-family: 'PT Sans', sans-serif;font-size: 13px;font-weight: 400;color: #4f5d6e;position: relative;background: rgb(26, 49, 95);}
 .body-wrap {min-height: 700px;}
 .body-wrap {position: relative;z-index: 0;}
 .body-wrap:before,
 .body-wrap:after {content: '';position: absolute;top: 0;left: 0;right: 0;z-index: -1;height: 260px;}
 .body-wrap:after {top: auto;bottom: 0;filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0);}
 nav {margin-top: 60px;box-shadow: 5px 4px 5px #000;}
</style>

4. Bagian Javascripts

Letakkan Javascripts sebelum tag /body

<script type="text/javascript" charset="utf-8" async defer>
 $('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
 }, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
 });
</script>

Sekian tutorial membuat menu responsive hover dengan bootraps

Demo