Membuat Dropdown Menu Keren ~ Dark Jester

Mungkin hampir semua Website mempunyai menu navigasi , apa jadinya jika website tidak mempunyai menu navigasi . Fungsi menu navigasi yaitu agar pengunjung anda lebih mudah untuk mengakses informasi.

Nah , untuk Postingan pertama saya mulai ngeblog , saya akan membuat tutorial membuat Dropdown Menu Simple & Keren yang hanya menggunakan CSS , HTML , dan CSS3.

Hasilnya akan seperti ini

Oke langsung saja Ikuti langkah - langkahnya di bawah ini :

1. Pertama buat file Dropdown.html , kemudian ketik kode di bawah ini


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title> Dropdown With Animation </title>

</head> <link rel="stylesheet" type="text/css" href="Design.css">

<body>

  <div class="menu">

    <ul>

      <li><a href=""> Menu 1 </a></li>

      <li><a href="">Menu 2</a></li>

      <li><a href="">Menu 3 <span class="arrow"></span></a>

<ul>

      <li><a href="">Menu 1</a></li>

      <li><a href="">Menu 2</a></li>

      <li><a href="">Menu 3</a></li>

      <li><a href="">Menu 4</a></li>



</ul>



      </li>

      <li><a href="">Menu 4</a></li>

      <li><a href="">Menu 5</a></li>

      <li><a href="">Menu 6</a></li>

</ul>

  </div>

</body>

2. Lalu kita membuat file CSS nya dengan nama file Design.css isi dengan kode dibawah ini




body {
  background:#b4b4b4;
  font-family:sans-serif;
  margin:0;
}


.menu {
  margin:100px 30px;
}


.menu a {


  text-decoration:none;
  color: #fff;
}


.menu li {
  list-style-type:none;
  float:left;
  width:100px;
  height:30px;
  padding:20px;
  background:#333;
  text-align:center;
  cursor:pointer;
  line-height:30px;
  transition-duration:0.6s;
}


.menu li:hover {
background:#fb099a;
}


.menu li ul li {
  position:relative;
  right:60px;
  top:20px;
}


.menu li ul {
  display:none;
}


.menu ul li span.arrow {
  border:6px solid transparent;
  border-top:9px solid #fff;
  position:absolute;
  top:130px;
  left:460px;
}


.menu li:hover ul {
  display:block;
  animation:drop 1s;
  position:relative;
}


@keyframes drop {
  0%{
    opacity:0;
    left: -400%;
     }


  50%{
  
  opacity:1;
  left: 200px;
  }


  100%{
    opacity:1;
    left:1px;
  }
}

Atau untuk lebih jelasnya bisa di lihat videonya dibawah ini :

Terimakasih , Semoga Bermanfaat :D , Silahkan Komentar jika ada yang di Tanyakan

Tulis disini kode ‘Css’ disini

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.