Membuat Simple Menu Dengan HTML dan CSS

Assalamu’alaikum warahmatullahi wabarakatuh

Halo dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan share tips dan trik tentang Membuat Simple Menu Dengan HTML dan CSS. Dimana menu ini bisa kita gunakan di website atau project, selain itu dengan memanfaatkan fungsi – fungsi css seperti ::after dan ::before menu yang kita buat cukup interaktif.

Baik langsung saja kita implementasikan Membuat Simple Menu Dengan HTML dan CSS teman – teman siapkan text editornya dan ketikkan script html nya di bawah ini

<!DOCTYPE html>
<html>
<head>
	<title><strong>Membuat Simple Menu Dengan HTML dan CSS</strong></title>
</head>
<body>
	<menu>
	  <ul>
	    <li><a href="">HOME</a></li>
	    <li><a href="">ABOUT</a></li>
	    <li><a href="">GALLERY</a></li>
	    <li><a href="">CONTACT</a></li>
	  </ul>
	</menu>
</body>
</html>

Jika sudah save dengan nama index.html, langkah selanjutnya kita berikan css nya di bawah ini

body {margin: 0; display: flex; align-items: center; justify-content: center; background-color: gray;}

:root {font-size: 10px;}

menu ul {padding: 0;list-style: none;}

menu li {
    width: 20rem;
    height: 7rem;
    float: left;
    font-size: 20px;
    text-align: center;
    line-height: 7rem;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    transition: 0.3s;
    margin: 3rem;
}

menu li::before,
menu li::after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    top: 0;
    left: 0;
    transition: 0.3s;
}

menu li::before {
    background-color: white;
    z-index: -1;
    box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}

menu li::after {
    background-color: orange;
    transform: translate(1.5rem, 1.5rem);
    z-index: -2;
}

menu li:hover {
    transform: translate(1.5rem, 1.5rem);
    color: white;
}

menu li:hover::before {
    background-color: orange;
}

menu li:hover::after {
    background-color: white;
    transform: translate(-1.5rem, -1.5rem);
}
menu li a{color: teal; text-decoration: none;}

Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Jika salah satu menu di hover maka kotak dengan background warna orange akan bergantian tukar tempat dengan kotak background berwarna putih

Semua ini adalah pemanfaatan fungsi css ::after dan ::before untuk menukar setelah atau sebelumnya, sedikit tips kali ini tentang Membuat Simple Menu Dengan HTML dan CSS semoga bermanfaat. Terimakasih dan sampai jumpa.

Membuat Simple Menu Dengan HTML dan CSS

Kategori