Laravel - Membuat menu dropdown dengan style

Setelah pada posting kemarin kita telah membuat css untuk membuat sebuah header, sekarang kita akan membuat menu dropdown pada header.

Oke langsung saja tutorialnya..

Pertama kita jalankan dulu sass pada command prompt dengan cara lihat disini

Selanjutnya isikan code berikut pada file _header.scss dan save

.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;
  }
  .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;
   }
  }
 }
}

Tambahkan code berikut pada file header.blade.php yang terletak pada path protected/app/views/layouts/web/header.blade.php

<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="#">Link 1</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>

Maka tampilan headernya akan menjadi seperti ini

Next tutorial akan saya bagikan juga cara membuat menu dropdown dengan menggunakan script

===DONE!===