DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Lengkap Belajar Javascript # Implementasi javascript pada web

advertisement

Kita sudah belajar berbagai macam fungsi menggunakan javascript.
Pada tutorial kali ini kita akan belajar mengimplementasikan javascript pada web yang sudah kita buat sebelumnya yaitiu pada tutorial mendesain web dengan css.
Disini kita akan coba membuat navigasi menu yang responsive yang bisa di diperluas ketika di buka diukuran layar kecil.
Yuk kita langsung saja ketutorialnya.
Penting: Sebelum membaca tutorial ini pastikan kalian sudah membaca tutorial mendesain web dengan css.

Membuat menu navigasi responsif dengan javascript

Ketika kita membuat banyak sekali link pada navigasi menu, tentu akan jadi masalah ketika halaman web tersebut dibuka menggunakan ukuran layar yang kecil, menu akan menumpuk dan tidak terlihat rapi.
Implementasi javascript pada web


Oleh karena itu kita perlu untuk membuat navigasi tersebut responsif, yaitu dengan cara menyembunyikan item-item menu tersebut.
Untuk membuat navigasi menu yang responsif pertama kita ubah kode menu sebelumnya dengan dengan menambahkan tag list.
Kode  seperti berikut.
<nav>
   <label id="toggle">&#9776;</label>
   <a href="#">Deretcode</a>
   <ul>
      <li class="dropdown">
         <a>Menu&#9660;</a>
         <ul class="submenu">
            <li>
               <a href="#">Submenu</a>
            </li>
            <li>
               <a href="#">Submenu</a>
            </li>
            <li>
               <a href="#">Submenu</a>
            </li>
         </ul>
      </li>
      <li>
         <a href="#">Menu</a>
      </li>
      <li>
         <a href="#">Menu</a>
      </li>
      <li>
         <a href="#">Menu</a>
      </li>
      <li>
         <a href="#">Menu</a>
      </li>
   </ul>
</nav>
Kemudian kita atur tampilannya menggunakan css. 
Kodenya seperti berikut
nav{display: flex;align-items: center;justify-content: center;padding:0px;margin:9px 0px 9px 0px;}
nav ul {list-style: none;display: flex;}
nav #toggle{display: none;}
nav  a{text-decoration: none;}
nav  a:hover{text-decoration: underline;}
nav .submenu{display: none;background-color:white;color:black;padding:9px;border-radius:3px;border:1px #eaeaea solid}
nav .dropdown:hover > .submenu{display: block;position: absolute;z-index: 1;}
nav *{margin:0px 9px 0px 9px}
@media screen and (max-width: 600px) {
  nav{display: block}
  nav #toggle{display: inline-block;}
  nav ul{list-style: none;display: none;}
  nav li{margin:9px}
  nav .dropdown:hover > .submenu{position: relative;}
  .expansed{display:block;}
}

Terakhir kita buat kode javascriptnya agar bisa diperluas ketika web dibuka di ukuran layar kecil.
var toggle = document.querySelector("nav #toggle");
var elementul = document.querySelector("nav > ul");
toggle.onclick = function(){  elementul.className==""? elementul.className+="expansed" : elementul.className = ""}
Sehingga kode akhir kita seperti berikut
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         *{margin:0}
         body{margin:0;font-family: sans-serif;text-align:center;}
         body > *{padding:3px;margin-bottom:9px;}
         #header{background-color:#006d68;color:white;margin-bottom:0px}
         #header img {vertical-align:middle;margin:3px;}
         nav{display: flex;align-items: center;justify-content: center;padding:0px;margin:9px 0px 9px 0px;}
         nav ul {list-style: none;display: flex;}
         nav #toggle{display: none;}
         nav  a{text-decoration: none;}
         nav  a:hover{text-decoration: underline;}
         nav .submenu{display: none;background-color:white;color:black;padding:9px;border-radius:3px;border:1px #eaeaea solid}
         nav .dropdown:hover > .submenu{display: block;position: absolute;z-index: 1;}
         nav *{margin:0px 9px 0px 9px}
         @media screen and (max-width: 600px) {
         nav{display: block}
         nav #toggle{display: inline-block;}
         nav ul{list-style: none;display: none;}
         nav li{margin:9px}
         nav .dropdown:hover > .submenu{position: relative;}
         .expansed{display:block;}
         }
         #about{padding:37px;background-color:#006d68;color:white;}
         #about strong {font-size:28px;}
         #about p {line-height:2}
         #service strong {font-size:28px;color:#006d68;}
         .container{display:flex;flex-wrap:wrap;}
         .card{margin:3px;padding-top:57px;padding-bottom:57px;background-color:#4f9065;color:white;border-radius:9px;width:calc(33.333333% - 9px)}
         @media screen and (max-width: 600px) {
         .card{width:100%}
         nav{display: block}
         nav > strong > label{display: inline-block;}
         nav ul{list-style: none;display: none;}
         nav .dropdown:hover > .submenu{position: relative;}
         }
         #contact{padding:37px;background-color:#006d68;color:white;}
         #contact strong {font-size:28px;color:white;}
         form{display: grid;grid-template-columns: 93px 250px;display: grid;justify-content: center;align-content: center;gap: 3px;}
         input{border-radius:3px;height:24px;border:none}
         footer{padding:37px;margin:0px;background-color:black;color:white;}
      </style>
   </head>
   <body>
      <header id="header">
         <h1><img src="DeretCode.png"  width="49px" /> Deretcode.com</h1>
      </header>
      <nav>
         <label id="toggle">&#9776;</label>
         <a href="#">Deretcode</a>
         <ul>
            <li class="dropdown">
               <a>Menu&#9660;</a>
               <ul class="submenu">
                  <li>
                     <a href="#">Submenu</a>
                  </li>
                  <li>
                     <a href="#">Submenu</a>
                  </li>
                  <li>
                     <a href="#">Submenu</a>
                  </li>
               </ul>
            </li>
            <li>
               <a href="#">Menu</a>
            </li>
            <li>
               <a href="#">Menu</a>
            </li>
            <li>
               <a href="#">Menu</a>
            </li>
            <li>
               <a href="#">Menu</a>
            </li>
         </ul>
      </nav>
      <div id="about">
         <strong>About Us</strong>
         <p>Deretcode adalah blog berisi tutorial pemrograman <br/>dan semua yang berkaitan dengan teknologi informasi.</p>
      </div>
      <div id="service">
         <strong>Our Service</strong>
         <div class="container">
            <div class="card">
               Jasa desain web
            </div>
            <div class="card">
               Jasa Seo
            </div>
            <div class="card">
               Jasa Mencintaimu
            </div>
         </div>
      </div>
      <div id="contact">
         <strong>Contact Us</strong><br/><br/>
         <form>
            <label>Nama</label><input type="text"/>
            <label>Email</label><input type="text"/>
            <label>Pesan</label><textarea></textarea>
            <br/><input type="submit" value="kirim">
         </form>
      </div>
      <footer>
         Copyright © 2020<br/>Template by deretcode.com<br/>
      </footer>
      <script>
         var toggle = document.querySelector("nav #toggle");
         var elementul = document.querySelector("nav > ul");
         toggle.onclick = function(){  elementul.className==""? elementul.className+="expansed" : elementul.className = ""}
      </script>
   </body>
</html>
Hasilnya seperti berikut
Implementasi javascript pada web


Sampai disini tutorial contoh implementasi javascript pada halaman web. Silahkan kalian atur sendiri navigasi menu sesuka kalian dan buat fitur-fitur lainya menggunakan javascript seperti membuat slide gambar, parallax scrolling effect dan lain sebagainya.

Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share.
Jika ada hal yang ingin disampaikan atau pertanyaan terkait pembahasan kali ini, silahkan tulis di kolom komentar.
Good luck!

advertisement



0 Komentar untuk " Tutorial Lengkap Belajar Javascript # Implementasi javascript pada web"

Silahkan berkomentar dengan baik dan bijak!