Menu Dropdown pada PHP Menggunakan Superfish JQuery Plugin

pada tanggal

Ada banyak cara yang dapat dilakukan untuk membuat dropdown menu salah satunya dengan menggunakan Plugin JQuery Superfish. Superfish adalah salah satu plugin gratis yang yang dapat anda download di https://superfish.joelbirch.co/. Plugin ini dapat memudahkan Anda dalam membuat menu dropdown, berikut adalah langkah-langkahnya.

Membuat File tampil.php
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/superfish.css" media="screen">
  <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="js/superfish.js"></script>
  <title>Bedah PHP - Menu Dropdown pada PHP menggunakan Superfish JQuery Plugin</title>
   
  <!-- Baris program ini akan memanggil fungsi superfish() -->
  <script type="text/javascript">
  jQuery(function(){
   jQuery('ul.sf-menu').superfish();
  });
  </script>
</head>

<body>
  <div class="menu-wrap">
    <ul class="sf-menu">
      <li><a href="#">HOME</a></li>
      <li><a href="#">Menu Level 1</a>
        <ul>
          <li><a href="#">Menu Level 2</a></li>
          <li><a href="#">Menu Level 2</a>
            <ul>
            <li><a href="#">Menu Level 3</a></li>
            <li><a href="#">Menu Level 3</a></li>
            <li><a href="#">Menu Level 3</a></li>
            </ul>
          </li>
          <li><a href="#">Menu Level 2</a></li>
        </ul>
      </li>
      <li><a href="#">DATABASE</a></li>
      <li><a href="#">Menu Level 1</a>
        <ul>
        <li><a href="#">Menu Level 2</a></li>
        <li><a href="#">Menu Level 2</a></li>
        <li><a href="#">Menu Level 2</a></li>
        </ul>
      </li>
      <li><a href="#">PROGRAMMING</a>
        <ul>
        <li><a href="#">PHP</a></li>
        <li><a href="#">JAVASCRIPT</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        </ul>
      </li>
      <li><a href="#">TUTORIAL</a></li>
      <li><a href="#">DOWNLOAD</a></li>
    </ul>
  </div>
</body>
</html>
Disini saya menggunakan plugin jquery-1.6.2.min.js, plugin ini dapat Anda download di http://jquery.com/.

Direktori File
DOWNLOAD SOURCE CODE DISINI

Komentar

Posting Komentar