Cara Membuat Dropdown Menu Dengan AngularJs

Dropdown menu adalah suatu menu yang terdapat submenu di bawahnya ketika di klik atau di hover atau diarahkan mousenya. Dan pada kesempatan kali ini saya akan membahas Cara Membuat Dropdown Menu Dengan AngularJs. Untuk menu dropdown kali ini yang akan saya buat akan muncul ketika kita melakukan klik pada menu.

Langkah pertama Cara Membuat Dropdown Menu Dengan AngularJs kita buat tampilan htmlnya terlebih dahulu seperti script di bawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Cara Membuat Dropdown Menu Dengan AngularJs</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="myApp">

<menu ng-controller=myCtrl>
    <ul>
      <li><a href="" value="">Home</a></li>
      <li><a href="" value="" ng-click="paket()">Paket</a>
          <ul ng-show="subMenuPaket">
            <li><a href=""></a>Web Master</li>
            <li><a href=""></a>Digital Marketing</li>
            <li><a href=""></a>Coding For Kids</li>
            <li><a href=""></a>Design Graphic</li>
          </ul>
      </li>
      <li><a href="" value="">About</a></li>
      <li><a href="" value="" ng-click="contact()">Contact</a>
        <ul ng-show="subMenuContact">
            <li><a href=""></a>Dumet School Grogol</li>
            <li><a href=""></a>Dumet School Srengseng</li>
            <li><a href=""></a>Dumet School Tebet</li>
            <li><a href=""></a>Dumet School Depok</li>
            <li><a href=""></a>Dumet School Gading</li>
          </ul>
      </li>
    </ul>
  </menu>
</body>
</html>

Teman-teman jangan lupa cantumkan ling angularjsnya. Kemudian mengaktifkannya dengan memberikan direktif ng-app=”myApp” dengan arameter yang sudah di tentunkan. Dan untuk menu yang terdapat submenunya saya berikan direktif ng-click dengan parameter yang berisi nama fungsi untuk dapat menjalankan fungsi. Karena submenu akan saya tampilkan dengan membuat sebuah fungsi. Dan tag ul yang posisinya sebagai submenu saya berikan ng-show sesuai parameternya.

Dan berikut ini style cssnya untuk mengatur tampilan menu.

<style>
  *{padding: 0;margin:0;}
    li{width: 100px;text-align: center;float: left;list-style: none;background-color: salmon;padding: 10px;position: relative;}
    li>ul{position: absolute;top:38px; left:0;}
    li>ul li{border-bottom: 1px solid grey;}
    li:hover{background-color: lightblue}
  </style>
Langkah terakhir saya akan membuat fungsi untuk menampilkan submenu dari menu paket dan menu contact. 
<script>
  var app = angular.module("myApp",[]);
  app.controller("myCtrl", function($scope){
    $scope.subMenuPaket = false;
    $scope.paket = function(){
      if($scope.subMenuPaket == false){
        $scope.subMenuPaket = true;
      }else{
        $scope.subMenuPaket = false;
      }
    }
    $scope.subMenuContact = false;
    $scope.contact = function(){
      if($scope.subMenuContact == false){
        $scope.subMenuContact = true;
      }else{
        $scope.subMenuContact = false;
      }
    }
  })
</script>

Didalam fungsi tersebut saya sudah membuat kondisi untuk mengecek nilai subMenuPaket dan subMenuContact yang akan di cetak di ng-show pada tag ul. Jika teman-teman buka di browser, maka akan seperti pada gambar di bawah ini.

Demikian artikel tentang Cara Membuat Dropdown Menu Dengan AngularJs. Semoga bermanfaat dan selamat mencoba.

Cara Membuat Dropdown Menu Dengan AngularJs

Kategori