Cara Mudah Membuat Side Navigation W/Opacity

Pada artikel yang lalu, mungkin saya sudah menjelaskan cara membuat navigation bar keren.

Sama halnya pun dengan artikel kali ini yang menjelaskan tentang bagaimana cara membuat side navigation, namun untuk yang ini kita agak sedikit berbeda, kenapa berbeda dan apa perbedaannya? Jelas berbeda, karena disini kita akan membuat side navigation tersebut menggunakan w/opacity.

Apa Itu Opacity Dan Apa Fungsinya?

Opacity adalah sebuah efek yang dapat menciptakan suatu objek menjadi transparansi yang tidak lain yaitu melalui opacity property ini. Hal ini disebabkan karena transparansi yang tercipta ketika opacity property digunakan, kalian juga bisa menggunakan efek opacity pada box, image atau objek lain seperti teks.

Meskipun opacity effect dapat digunakan tanpa melibatkan hover effect, namun pada kenyataannya lebih banyak desain blog/web yang menggabungkan fungsi CSS opacity property dan hover effect secara bersamaan.

Berikut dibawah ini adalah beberapa contoh value atau nilai dari opacity:

1.0
0.9
0.8
0.7
0.6
0.6
0.5
0.4
0.3
0.2
0.1
0.0

Semakin rendah value atau nilai dari opacity, maka tingkat transparansinya juga akan semakin rendah pula.

Itulah sedikit penjelasan atau pengertian dari opacity. Mari kita lanjutkan ketopik pembahasan yang akan kita kupas secara tuntas.

Mungkin diantara kalian semua sudah paham bagaimana membuat sebuah side navigation menggunakan nilai opacity , akan tetapi untuk para pemula ini adalah hal yang mungkin cukup membingungkan dan maka dari itu disini saya akan memberikan langkah-langkah cara membuatnya.

Untuk cara pembuatannya dapat kalian lihat dibawah ini, agar mudah dipahami.

Apa hal pertama yang harus kita buat?

Langkah pertama yang harus dilakukan yaitu buat sebuah file Css nya, beri nama style.css dan copy kode dibawah ini:

body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
}

/* Add a black background color to the top navigation */
.topnav {
 background: #fff;
 border:2px solid #ddd;
 overflow: hidden;
 width: 100%;
}
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #777;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
 
/* Change the color of links on hover */
.topnav a:hover {
    background-color: #00BBFF;
    color: white;
}
 
/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
 
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
 
a svg{
  transition:all .5s ease;
 
  &:hover{
    #transform:none;
  }
}
 
#ico{
  display: none;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #49ACE1;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Setelah itu pastekan kode Css diatas kedalam file style.css yg telah dibuat tadi.

Langkah selanjutnya adalah, kalian buat lagi file javascript nya terserah mau diberi nama apa saja. Disini saya contohkan sidenav.js copy kodenya dibawah ini dan pastekan kedalam file sidenav.js:

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.7)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
  document.body.style.backgroundColor = "white";
}

Lihat pada bagian document.body.style.backgroundColor = "rgba(0,0,0,0.7)";
Disitu terlihat nilai dari opacity nya yaitu 0.7 Yang tandanya tingkat transparansinya tinggi. Bisa kalian rubah, entah itu lebih rendah ataupun lebih tinggi misalnya menjadi 0.9.

Nah jika sudah selesai, lanjut ke langkah berikutnya yaitu membuat html nya. Perhatikan dibawah ini:

<div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
<a href="#">Mailer</a>
<a href="#">Privacy</a>
<a href="#">Tos</a>
</div>
<nav class="topnav">
<a href="#" onclick="openNav()">
<svg width="30" height="30" id="icoOpen">
<path d="M0,5 30,5" stroke="#777" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#777" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#777" stroke-width="5"/>
</svg>
</a>
</nav>

Sampai tahap ini bisa dikatakan, kita sudah selesai membuat side navigation tersebut. Untuk detailnya bisa kalian praktekan dan coba sendiri dengan mengikuti langkah diatas. Kode-kode diatas akan berjalan jika kalian mengikuti apa yang telah saya jelaskan diatas dengan benar.

Namun untuk melihat berjalan atau tidaknya, silahkan kalian coba akses dan lihat hasilnya. Karena saya sendiri sudah menguji cobanya terlebih dahulu dan hasilnya pun 100% work.

Live demo bisa kalian lihat dibawah:

Live Demo

Saya rasa sudah cukup jelas pembahasan cara mudah membuat side navigation, semoga dapat bermanfaat. Untuk masalah tampilan bisa kalian edit dibagian css nya sesuaikan dengan selera kalian.

Dan jangan lupa juga subscribe blog sederhana ini, agar dapat tutorial menarik lainnya. Apabila menurut kalian artikel ini bermanfaat, silahkan di share kepada yang lainnya.

Akhir kata saya ucapkan, terimakasih.

Virm Aditya

Berita teknologi informasi terkini

Share this post