Cara Membuat Hide Icon Social Media

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

Jadi Disini hakekatnya bagi merancang hide icon social media ini kita hanya perlu html dan css, tetapi bagi kali ini saya akan memberikan sebuah javascript sedikit saja, supaya content yang terdapat di samping tak tertutup dengan sebuah efek dari sebelah kiri, seperti itu ya.

oke seketika saja, silahkan teman-teman bikin 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 Merancang hide Nav dengan HTML CSS</h2>
  <p> <i class='fas fa-arrow-alt-circle-left' style='font-size:36px'></i> Silahkan Arahkan Crusor ke fitur 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 hakekatnya 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 pun menggunakan fontawesome bagi sebuah iconya.

Kini 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 merancang sebuah content kanan, di sini saya memberikan efek ketika icon itu ke hover karenanya kontent kanan pun akan ikut tergeser.

 

 

 

 

Dapat dilihat silahkan teman-teman arahkan crusor ke arah icon tersebut, dan lihat hasilnya, dan saya rasa lumayan hingga disini belajar kita mengenai Cara Merancang Hide Icon Social Media, semgoa bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.

Sumber https://kursuswebsite.org