Tutorial Pemrograman

Cara Membuat Menu Navigasi Samping dengan CSS3

Umumnya tampilan menu navigasi berada di bawah header. Namun dengan bantuan dari CSS3, kita dapat memodifikasi bentuk serta letak menu navigasi. Salah satunya adalah meletakkan menu navigasi di samping kanan atau kiri website. Lalu bagaimana cara membuatnya, serta tampilannya nanti? Tidak sulit kok, kamu hanya perlu mengikuti beberapa langkah mudah di bawah ini:

1. Buka XAMPP yang terinstall dikomputer kamu. Untuk menghubungkan antara coding dan website, aktifkan Apache.

2. Buka teks editor, disini saya menggunakan Notepad++. Ketikkan kode HTML5 berikut ini.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Side Navigation Bar</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
</head>
<body>

<div class="wrapper">
    <div class="side_bar">
        <div class="logo">
          EP
        </div>  
        <div class="menu">
          <ul>
            <li><a href="#" class="active"><i class="fas fa-home icon"></i></a></li>
            <li><a href="#"><i class="fab fa-sketch icon"></i></a></li>
            <li><a href="#"><i class="fas fa-pen-fancy icon"></i></a></li>
            <li><a href="#"><i class="fas fa-blog icon"></i></a></li>
            <li><a href="#"><i class="fas fa-map-signs icon"></i></a></li>
          </ul>
      </div>
      <div class="social_share">
        <i class="fas fa-share-alt"></i>
      </div>
      <div class="icons">
          <ul>
            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
            <li><a href="#"><i class="fab fa-codepen"></i></a></li>
            <li><a href="#"><i class="fab fa-reddit-alien"></i></a></li>
          </ul>
        </div>
    </div>
    <div class="main_container">
      <div class="title">
        Hai, Kawan-Kawan Inwepo!
      </div>
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque tempora dolores totam enim quibusdam! Commodi veritatis aliquid quibusdam, optio cum deleniti vero voluptate ipsa facilis tenetur ex, iste nam sapiente vel eveniet soluta tempora porro, quis voluptates ratione ut nostrum consequatur! Placeat non consequatur quod neque esse voluptas, mollitia voluptatum, fugit similique adipisci voluptatem maiores explicabo aliquid doloremque suscipit tempora facilis? Optio praesentium explicabo mollitia at alias incidunt et, vel adipisci aliquid nihil laboriosam recusandae molestiae ut obcaecati, quia possimus voluptas aut odit nulla? Quam recusandae cum laudantium laboriosam corrupti eaque beatae similique deserunt molestiae, ullam obcaecati hic sit excepturi!
      </div>
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque tempora dolores totam enim quibusdam! Commodi veritatis aliquid quibusdam, optio cum deleniti vero voluptate ipsa facilis tenetur ex, iste nam sapiente vel eveniet soluta tempora porro, quis voluptates ratione ut nostrum consequatur! Placeat non consequatur quod neque esse voluptas, mollitia voluptatum, fugit similique adipisci voluptatem maiores explicabo aliquid doloremque suscipit tempora facilis? Optio praesentium explicabo mollitia at alias incidunt et, vel adipisci aliquid nihil laboriosam recusandae molestiae ut obcaecati, quia possimus voluptas aut odit nulla? Quam recusandae cum laudantium laboriosam corrupti eaque beatae similique deserunt molestiae, ullam obcaecati hic sit excepturi!
      </div>
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque tempora dolores totam enim quibusdam! Commodi veritatis aliquid quibusdam, optio cum deleniti vero voluptate ipsa facilis tenetur ex, iste nam sapiente vel eveniet soluta tempora porro, quis voluptates ratione ut nostrum consequatur! Placeat non consequatur quod neque esse voluptas, mollitia voluptatum, fugit similique adipisci voluptatem maiores explicabo aliquid doloremque suscipit tempora facilis? Optio praesentium explicabo mollitia at alias incidunt et, vel adipisci aliquid nihil laboriosam recusandae molestiae ut obcaecati, quia possimus voluptas aut odit nulla? Quam recusandae cum laudantium laboriosam corrupti eaque beatae similique deserunt molestiae, ullam obcaecati hic sit excepturi!
      </div>
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque tempora dolores totam enim quibusdam! Commodi veritatis aliquid quibusdam, optio cum deleniti vero voluptate ipsa facilis tenetur ex, iste nam sapiente vel eveniet soluta tempora porro, quis voluptates ratione ut nostrum consequatur! Placeat non consequatur quod neque esse voluptas, mollitia voluptatum, fugit similique adipisci voluptatem maiores explicabo aliquid doloremque suscipit tempora facilis? Optio praesentium explicabo mollitia at alias incidunt et, vel adipisci aliquid nihil laboriosam recusandae molestiae ut obcaecati, quia possimus voluptas aut odit nulla? Quam recusandae cum laudantium laboriosam corrupti eaque beatae similique deserunt molestiae, ullam obcaecati hic sit excepturi!
      </div>
  </div>
</div>
</body>
</html>

Simpan kode HTML5 di folder xampplite – htdocs – buat folder baru dengan nama sideNavBar – simpan code HTML5 dengan nama index.php.

3. Untuk melihat hasil, buka browser di komputer kamu dan ketikkan alamat url: http://localhost/sideNavBar, dan lihat hasilnya.

4. Tampilan website menunjukkan beberapa simbol dan teks yang berantakkan. Untuk mempercantik tampilan, ketikkan kode CSS3 berikut.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: tahoma;
}

body{
  background: #2c3e50;
}

.wrapper .side_bar{
  position: fixed;
  top: 0;
  left: 0;
  width: 80px;
  height: 100%;
  background: #dc143c;
  padding: 20px 0;
  z-index: 999;
}

.wrapper .side_bar .logo{
  font-family: "Mountains of Christmas", cursive;
  color: #fff;
  font-weight: bold;
  font-size: 22px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: linear-gradient(to bottom,#ff9f1d,#ffc30d);
  border-radius: 5px;
  margin: 0 auto 40px;
}

.wrapper .side_bar .menu ul li a{
  display: block;
  text-align: center;
  padding: 15px 20px;
  margin: 5px 0;
  font-size: 16px;
  color: #dcd8ef;
  position: relative;
}

.wrapper .side_bar .menu ul li a:before{
  content: "";
  position: absolute;
  top: 0;
  right: 77px;
  width: 100%;
  height: 100%;
  border-right: 3px solid #ffd20b;
  border-radius: 5px;
  transition: opacity 0.2s ease;
  opacity: 0;
}

.wrapper .side_bar .menu ul li a:hover:before,
.wrapper .side_bar .menu ul li a.active:before{
  opacity: 1;
}

.wrapper .side_bar .menu ul li a .icon{
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  background: linear-gradient(to bottom,#4f51a4, #7f7dc6);
}

.social_share{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to top,#ff9f1d,#ffc30d);
  width: 50px;
  height: 50px;
  line-height: 55px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.wrapper .side_bar .icons{
  position: absolute;
  bottom: 20px;
  left: 85px;
  width: 245px;
  height: 50px;
  background: #dc143c;
  border-radius: 5px;
  padding: 10px;
  display: none;
}

.wrapper .side_bar .icons.active{
  display: block;
}

.wrapper .side_bar .icons ul{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wrapper .side_bar .icons ul li{
  width: 30px;
  height: 30px;
  line-height: 35px;
  background: #ffd20b;
  text-align: center;
  margin: 0 5px;
  font-size: 14px;
  border-radius: 50%;
}

.wrapper .side_bar .icons ul li a{
  color: #fff;
}

.wrapper .main_container{
  padding: 20px;
  margin-left: 80px;
}

.wrapper .main_container .content{
  background: #fff;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: 0 0 2px rgba(0,0,0,0.125);
  line-height: 20px;
}

.wrapper .main_container .title{
  font-family: "Mountains of Christmas", cursive;
  margin-bottom: 20px;
  background: #dc143c;
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 30px;
}

Simpan kode HTML5 di folder xampplite – htdocs – buat folder baru dengan nama sideNavBar – simpan kode CSS3 dengan nama style.css.

5. Reload alamat url: http://localhost/sideNavBar, dan lihat hasilnya. Tampilan website sudah cukup baik, namun tombol share belum bisa digunakan.

6. Untuk mengaktifkan tombol share, kita perlu menambahkan kode JavaScript di file index.php. Buka kembali file index.php, dan ketikkan kode JavaScript berikut ini sebelum kode </body>.

<script>
document.querySelector(".social_share").addEventListener("click", function(){
  document.querySelector(".icons").classList.toggle("active");
});
</script>

Jangan lupa untuk Ctrl+S.

7. Reload alamat url: http://localhost/sideNavBar, dan cobalah untuk klik tanda share.

8. Selesai, dan hasilnya cukup menarik. Sekarang kamu bisa menerapkan kode di atas untuk menampilkan menu navigasi samping di website kamu.

Mudah sekali bukan. Sekian tutorial ‘Cara Membuat Menu Navigasi Samping dengan CSS3’. Selamat mencoba.

Tutorial Lainnya dari Penulis:


Komentar

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top