Cara Membuat Menu Rounded Menggunakan HTML5 dan CSS3

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Menu Rounded Menggunakan HTML5 dan CSS3

Supaya web teman-teman lebih menarik saya akan memberikan contoh Cara Membuat Menu Rounded Menggunakan HTML5 dan CSS3. berikut langkah-langkahnya:

– Pertama teman-teman buat menu navigasinya dulu seperti kode HTML5 di bawah ini :

<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Sort of Lame CSS Text Changing</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">

<nav>
 
</nav>

</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sort of Lame CSS Text Changing</title>

</head>

<body>

<nav>

</nav>

</div>

</body>

</html>

Jangan lupa save dengan nama index.html

– Kedua teman-teman ketikan tag <li> di dalam tag <ul> sebanyak empat tag :

<nav>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

<nav>

<ul>

</ul>

</nav>

– Ketiga ketikan tag <a> di dalam setiap <li> dan beri class yang berbeda karena kita akan memberikan warna yang berbeda pada saat di hover:

<nav>
  <ul>
    <li><a href="" class="a1">Home</a></li>
    <li><a href="" class="a2">About</a></li>
    <li><a href="" class="a3">Product</a></li>
    <li><a href="" class="a4">Contact</a></li>
  </ul>
</nav>

<nav>

<ul>

<li><a href="" class="a2">About</a></li>

<li><a href="" class="a3">Product</a></li>

<li><a href="" class="a4">Contact</a></li>

</ul>

</nav>

– Keempat teman-teman ketikan css-nya :

*{padding: 0; margin:0}
.container{margin:auto; width: 500px;}
nav{width: 500px; margin-top:20px;}
ul{list-style: none;}
ul li{float: left; margin: 12px;}
ul li a{text-decoration: none;
  background-color: #3ecbad; width: 100px; height: 100px;
  border-radius: 50%; text-align: center; top:15px;
  display: block;
  background: #96f8e3;
  color: #384648;
  border-radius: 50%;
  text-align: center;
  font: 600 16px/100px "Open Sans",sans-serif;
  }
ul li .a1:hover{background-color: #639de9}
ul li .a2:hover{background-color: #f7221b}
ul li .a3:hover{background-color: #eb804b}
ul li .a4:hover{background-color: #cee84e}

*{padding: 0; margin:0}

.container{margin:auto; width: 500px;}

nav{width: 500px; margin-top:20px;}

ul{list-style: none;}

ul li{float: left; margin: 12px;}

ul li a{text-decoration: none;

background-color: #3ecbad; width: 100px; height: 100px;

border-radius: 50%; text-align: center; top:15px;

display: block;

background: #96f8e3;

color: #384648;

border-radius: 50%;

text-align: center;

font: 600 16px/100px "Open Sans",sans-serif;

}

ul li .a1:hover{background-color: #639de9}

ul li .a2:hover{background-color: #f7221b}

ul li .a3:hover{background-color: #eb804b}

ul li .a4:hover{background-color: #cee84e}

Lalu save. Di sini saya memberi nama file css-nya dengan nama file style.css

– Hasilnya akan menjadi seperti ini.

– Dan pada saat di hover backgroundnya akan berubah warna sesuai dengan warna yang kita berikan seperti gambar di bawah:

Bagaimana teman-teman mudahkan Cara Membuat Menu Rounded Menggunakan HTML5 dan CSS3. Â

Sekian tutorial saya untuk kali ini. Sehat selalu ya teman-teman, selamat mencoba.

Facebook DUMET School

Categories