Cara Membuat Hide Icon Social Media

Cara Membuat Hide Icon Social Media, teman-teman pasti pernah liat dimana sebuah website mempunyai akun social media, dan biasanya juga terdapat di bawah, atau di pojo-pojok bahkan ada juga yang di tampilkan dengan cantik, dimana yang tampil hanya sebuah icon, lalu ketika kita arahkan crusor kita ke atasnya maka tampilah tulisan dari icon tersebut. Sudah ada bayangan ya, tentang artikel kali ini.

Jadi Disini sebenarnya untuk membuat hide icon social media ini kita hanya perlu html dan css, tetapi untuk kali ini saya akan memberikan sebuah javascript sedikit saja, supaya content yang ada di samping tidak tertutup dengan sebuah efek dari sebelah kiri, seperti itu ya.

oke langsung saja, silahkan teman-teman buat file index.html dengan kode seperti ini:

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">Home <i class='fas fa-archive' style='font-size:20px; float: right;'></i></a>
  <a href="#" id="blog">About <i class='fas fa-paper-plane' style='font-size:20px; float: right;'></i></a>
  <a href="#" id="projects">Product <i class='fas fa-quote-right' style='font-size:20px; float: right;'></i></a>
  <a href="#" id="contact">Contact <i class='fas fa-thumbtack' style='font-size:20px; float: right;'></i></a>
</div>

<div style="margin-left:80px;" id="kanan">
  <h2>Cara Membuat hide Nav dengan HTML CSS</h2>
  <p> <i class='fas fa-arrow-alt-circle-left' style='font-size:36px'></i> Silahkan Arahkan Crusor ke menu di samping ini</p>
</div>

dan saya akan percantik dengan CSSnya seperti ini:

#mySidenav a {
  position: absolute;
  left: -80px;
  transition: 0.3s;
  padding: 15px;
  width: 100px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 5px 5px 0;
}

#mySidenav a:hover {
  left: 0;
}

#about {
  top: 20px;
  background-color: #4CAF50;
}

#blog {
  top: 80px;
  background-color: #2196F3;
}

#projects {
  top: 140px;
  background-color: #f44336;
}

#contact {
  top: 200px;
  background-color: #555
}

Seperti yang teman-teman sebenarnya konten icon itu saya hide terlebih dahulu, lalu ketika saya hover dia akan muncul dengan efek transition pergerseran left ke 0 itu akan menjadi lebih smooth. Disini saya juga menggunakan fontawesome untuk sebuah iconya.

Sekarang kita lihat kode javascriptnya:

  var side = document.getElementById("mySidenav");
  var kanan = document.getElementById("kanan");
  side.addEventListener("mouseover", function(){
    kanan.style.marginLeft = "150px"
    kanan.style.transition = "0.5s"
  })
  side.addEventListener("mouseout", function(){
    kanan.style.transition = "0.5s"
    kanan.style.marginLeft = "80px"
  })

Oke seperti yang saya tulis di atas saya membuat sebuah content kanan, di sini saya memberikan efek ketika icon itu ke hover maka kontent kanan pun akan ikut tergeser.

Bisa dilihat silahkan teman-teman arahkan crusor ke arah icon tersebut, dan lihat hasilnya, dan saya rasa cukup sampai disini belajar kita tentang Cara Membuat Hide Icon Social Media, semgoa bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

The post Cara Membuat Hide Icon Social Media appeared first on Kursus Website Terbaik.