Laravel - Membuat menu dropdown dengan script

Sibuk dengan kerjaan dikantor, akhirnya bisa kembali menulis blog,,

Kali ini saya akan membagikan trick membuat sebuah menu dropdown dengan javasqript,,

Tulisan ini merupakan lanjutan dari tulisan yang sebelumnya. sebelum melakukan trick ini saya harap struktur file kita sama jika belum maka anda harus menerapkan tutorial sebelumnya sampai tuntas terlebih dahulu.

Sangat dianjurkan mengikuti tutorial pada blog ini secara berurutan!

Oke langsung saja saya bagikan langkah-langkah dan scriptnya, monggooo...

Pertama, edit code header.php pada path views/layouts/web/header.blade.php menjadi seperti ini

<div class="header">
 <div class="banner">
  <div class="welcome">Welcome</div>
  <div class="gambar"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWOzEVZ-vSf8RORS5_ZF7e0ltWpkD7gFpz-rqKoBgvvfJkgG9iXS5RxO3iU-MF2TvMqhkj7tIalKW48dq7bJv1Rjk-CKPsKLG6lZGuqVAd_IbNHzZYbWDuyvy2Rji4g1VTQsejHbKskbI/s80/mata.png" style="width:"100px" height="129px";"></a></div>
 </div>
 <hr>
 <div class="menu">
  <div class="kiri">
   <li>
    <div class="dropdown">
      <button class="button">Menu(css)</button>
      <div class="dropdown-content">
        <a href="{{ URL::to('users')}}">User</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
   </li>
   <li>
     <div class="dropdown-script">
      <button onclick="myFunction()" class="dropbtn">Menu(css)</button>
      <div id="myDropdown" class="dropdown-content-script">
        <a href="{{ URL::to('users')}}">User</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
     </div>
   </li>
  </div>
  <div class="kanan">
   <li onclick="location.href='{{ URL::to('/') }}';">Login</li>
   <li onclick="location.href='{{ URL::to('/') }}';">Cari</li>
  </div>
 </div>
</div>

Selanjutnya edit file _header.scss menjadi seperti ini

.header{
 text-align: left;
 margin-top: 10px;
 width: 100%;
 height: 197px;
 background-color: white;
 box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
 .banner{
  text-align: center;
  width: 100%;
  height: 129px;
  .welcome{
   padding-top: 60px;
   float: left;
   width: 40%;
   text-align: right;
  }
  .gambar{
   float: left;
   width: 20%;
  }
 }
}
.menu{
 width: 90%;
 margin-right: 5%;
 margin-left: 5%;
 .kiri{
  float: left;
  width: 50%;
  text-align: left;
  li{
   list-style: none;
   display: inline;
   margin-right: 5px;
   /*css for dropdown script*/
   .dropdown-script{
    position: relative;
    display: inline-block;
    a{
     &:hover{
      background-color: #ededed;
      color: black;
      cursor: pointer;
     }
    }
   }
   .dropdown-content-script{
    display: none;
    position: absolute;
    background-color: #e5e5e5;
    min-width: 150px;
    overflow: auto;
    border-radius: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    a{
     color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
   }
   .show{
    display: block;
   }
   /*end*/
  }
  .button {
      background-color: #e5e5e5;
      padding: 11px 20px;
   border-radius: 3px;
   box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
      cursor: pointer;
      border: none;

  }
  .dropdown {
      position: relative;
      display: inline-block;
      &:hover .dropdown-content{
       display: block;
      }
      &:hover .button{
       color: lighten(black, 10%);
    text-decoration: none;
    background-color: #ededed;
      }
  }
  .dropdown-content {
   border-radius: 3px;
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      a{
       color: black;
       padding: 10px 20px;
       text-decoration: none;
       display: block;
       &:hover{
        background-color: #e5e5e5;
       }
      }
  }
 }
 .kanan{
  float: right;
  width: 50%;
  text-align: right;
  li{
   display: inline-block;
   background-color: #e5e5e5;
   margin-right: 5px;
   display: inline-block;
   cursor: pointer;
   padding: 10px 20px;
   border-radius: 3px;
   box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   &:hover {
    color: lighten(black, 10%);
    text-decoration: none;
    background-color: #ededed;
   }
  }
 }
}

pada code tersebut saya menambahkan beberapa code yang sudah saya mark dengan comen /*css for dropdown script*/ silahkan pelajari sendiri bedanya dengan menu dropdown yang menggunakan css biasa. Jangan lupa untuk menjalankan sassnya jika lupa cara menjalankannya silahkan lihat disini.

Kemudian tambahkan folder dan file baru bernama dropdown-menu.js sehingga strukturnya akan tampak seperti ini

Isi dropdown-menu.js dengan code berikut

//munculkan dan tutup dropdown saat button di klik
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// tutup dropdown saat klik diluar button
window.onclick = function(event) {
  if (!event.target.matches('button')) {

    var dropdowns = document.getElementsByClassName("dropdown-content-script");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Edit file master.blade.php pada path views/layouts/web/master.blade.php menjadi seperti ini

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{{ $title }}</title>
 {{ HTML::style('public/css/master/main.css') }}
</head>
<body>
 <!-- Custom Scripts -->
 @section('script')
 @show
 
 @include('layouts.web.header')
 @yield('content')
 @include('layouts.web.footer')
</body>
</html>

Edit pula file hello.blade.php pada path views/web/hello.blade.php menjadi seperti ini

@extends('layouts/web/master')
@section('script')
 {{ HTML::script('public/js/dropdown-menu.js') }}
@stop
@section('content')
 <?php $title = "Welcome" ?>
@stop

Sehingga tampilannya akan tampak seperti ini

===DONE!===