Lengkapi Template dengan JavaScript

Setelah kita membuat template sebelum nya kita bahas sebelum nya di : Membuat Template Web Modern
Maka kita akan mendesain dalam bentuk Mobile Friendly salah satunya dengan kita melengkapi dengan JavaScript, Penggunaan Javascript di template ini bersifat Opsional, Kodenya tertentu bisa kita terapkan di template jika fungsionalitasnya memang selalu diperlukan di setiap halam website kita.

Sebagai contoh dengan melalui JavaScript berbasis jQuery kita bisa membuat daftar menu utama menjadi mode Dropdown yang pastinya bersifat Responsife.

# Buka Teks editor agan dan tulis kode JavaScript berikut :

$("#menu-mini").html($("#menu-utama").html());
$("#menu-ganti span") .click(function(){
    if ($("nav#menu-mini ul").hasClass("expanded")) {
        $("nav#menu-mini
ul.expanded").removeClass(expanded").slideUp(250);
  } else {
    $("nav#memu-mini
ul").addClass("expanded").slideDown(250);
});

# Simpan hasilnya di folder sebelum nya kita buat dengan nama menu.js
# Buka lagi file template kita edit elemen nav sehingga menjadi seperti berikut :

<nav id="menu-utama">
    <!-- menu utama -->
    <ul>
      <li><a href="#">Menu pertama</a></li>
      <li><a href="#">Menu kedua</a></li>
      <li><a href="#">Menu ketiga</a></li>
    </ul>
</nav>
<div id="menu-ganti">
    <span>Menu &#8801;</span>
</div>
<nav id="menu-mini"></nav>

# Sisipkan rujukan script library jQuery dan script menu.js yang telah kita buat di bagian paling bawah template dan lalu simpan perubahannya di template kita.

<--tag script disini-->
    <script src="https://ajaxgoogleaois.com/ajax/libs/jquery/1.11.3/jquery.min.jas"></script>
    <script src="menu.js"></script>
    </body>

# Selanjutnya buka file CSS anda buang seluruh selector nav yang telah kita buat sebelum nya :

nav {
  float: right;
nav li {
  display: inline;
}
nav li a {
  border: 1px solid #fff;
  background-color: #eee;
  padding: 5px 10px;
}

 # Lalu Ganti selector nav yang sudah terhapus dengan aturan aturan baru sebagai berikut :

 nav#menu-utama {
  float: right;
}
nav#menu-utama li {
  display: inline;
}
nav#menu-utama li a {
  border: 1px solid #fff;
  background-color: #eee;
  padding: 5px 10px;
}
nav#menu-utama li a:hover {
  background-color: #fff;
}
#menu-ganti {
  display: none;
  float: right;
  padding-top: 10px;
}
#menu-ganti span {
  display: inline;
  border: 1px solid #fff;
  background-color: #eee;
  padding: 5px 10px;
  cursor: pointer;
}
#menu-ganti span:hover {
  background-color: #fff;
}

nav#menu-mini {
  position: relative;
  display: none;
}
nav#menu-mini ul {
  display: none;
  list-style-type: none;
  position: absolute;
  left: 0;
  right 0;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  background-color: #eee;
}
nav#menu-mini li {
  display: block;
  padding: 5px 0;
  margin: 0 5px;
  border-bottom: 1px solid #fff;
}
nav#menu-mini li:last-child {
border-botttom: none;
}
nav#menu-mini a {
  display: block;
  padding: 10px 30px;
}
nav#menu-mini a:hover {
  background-color: #fff;
}
@media all and (max-widht: 767px) {
  #menu-ganti {
    display: block;
  }
  nav#menu-utama {
    display: none;
  }
  nav#menu-mini {
    display: block;
  }
}

# Simpanlah perubahan di file CSS lalu coba preview template mungkin sekilas tidak ada perubahan pada menu saat dibuka di browser, Namun jika jendela browser disperkecil atau halaman website kita dalam mode ponsel maka menunya akan menjadi mode menu Dropdow.

Catatan : dengan melalui teknik yang sama kita bisa menggunakan kode JavaScript untuk keperluan lain di dalam template website kita.