Cara membuat Web Responsive Navbar sederhana dengan HTML, CSS , dan Javascript

pada tanggal

 


    Halo teman-teman, pada blog kali ini saya akan membagikan sedikit toturial sederhana yaitu cara membuat Web Responsive Navbar sederhana dengan HTML, CSS, dan javascript.

    Di sini saya juga menggunakan icons dari fontawesome.com , contoh webnya dapat dilihat pada gif berikut :


Link demonya di sini

Link download/repository nya di sini


Atau silahkan ikuti langkah-lagkah berikut :

  1. Silahkan buat folder dengan nama Responsive-navbar atau apa saja terserah teman-teman.
  2. Di dalam folder tersebut buat 1 file dengan nama index.html dan buat juga folder dengan nama assets untuk menyimpan asset-asset project akan kita buat.
  3. Selanjutnya download fontwesome di situs fontwesome.com dan simpan file di dalam folder assets.
  4. Kemudian buka folder Responsive-navbar tadi pada text editor kesayangan teman-teman.
  5. Di file index.html silahkan copykan script pada nomor 6.
  6. <!doctype html>
<html id="home">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Navbar | Semunfo</title>

    <!-- my css -->
    <link rel="stylesheet" href="assets/style.css">

    <!-- fontawesome -->
    <link href="assets/fw/fwb/css/all.css" rel="stylesheet">
  </head>
  <body>
    <header>
      <nav>
        <div class="logo"><h1>Semunfo</h1></div>
        <div class="openMenu"><i class="fa fa-bars"></i></div>
          <ul class="mainMenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#" class="login">LogIn</a></li>
            <div class="closeMenu"><i class="fa fa-times"></i></div>
          </ul>
      </nav>
    </header>

    <script type="text/javascript">
      const mainMenu = document.querySelector(".mainMenu");
      const closeMenu = document.querySelector(".closeMenu");
      const openMenu = document.querySelector(".openMenu");
      const listMainMenu = document.querySelectorAll("li");


      openMenu.addEventListener('click', show);
      closeMenu.addEventListener('click', close);
      listMainMenu[0].addEventListener('click', close);
      listMainMenu[1].addEventListener('click', close);
      listMainMenu[2].addEventListener('click', close);

      function show() {
        mainMenu.style.display = 'flex';
        mainMenu.style.top = '0';
      }

      function close() {
        mainMenu.style.top = '-100%';
      }
    </script>
  </body>
</html>
  7. Di file assets buat file dengan nama  style.css dan silahkan copykan script pada nomor 8 di dalamnya
  8. /*google font*/
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Quicksand&display=swap');

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

a {
	text-decoration: none;
}

body {
   font-family: 'Quicksand', sans-serif;
}

header {
   display: inline;
}

nav {
	display: flex;
	justify-content: space-around;
   background: whitesmoke;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   height: 100px;
   align-items: center;
}

nav .mainMenu {
	display: flex;
	list-style: none;
	align-items: center;
}

nav .mainMenu li a {
	display: inline-block;
	padding: 15px;
	text-transform: uppercase;
	color: black;
	opacity: 0.5;
}

nav .mainMenu li a:hover {
	opacity: 1;
}

nav .openMenu {
	font-size: 2rem;
	display: none;
	cursor: pointer;
	margin: 5px;
}

nav .mainMenu .closeMenu{
	display: none;
	cursor: pointer;
	font-size: 2rem;
}

nav .logo {
	font-family: 'Kalam', cursive;
	margin: 6px;
}

nav  .mainMenu .login {
	border: 1px solid black;
	border-radius: 20px;
	padding: 8px 15px;
}

nav  .mainMenu .login:hover {
	background-color: white;
}

/*responsive breakpoint*/

@media all and (max-width: 800px) {
	nav .mainMenu {
		height: 300px;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 10;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: top 1s ease;
		display: none;
		background-color: whitesmoke;
	}

	nav .mainMenu .closeMenu {
		display: block;
		position: absolute;
		top: 20px;
		right: 20px;
	}

	nav .openMenu {
		display: block;
	}

	nav .mainMenu li a:hover {
		opacity: 1;
	}
}
  9. Setelah itu silahkan save dan jalankan .

Mungkin cuma itu sedikit tutorial dari saya semoga bermanfaat.

terima kasih.

Komentar

Posting Komentar