Cara Membuat Menu Seperti Facebook dengan CSS, Jquery, dan HTML

Hai teman-teman kali ini saya akan berbagi mengenai bagaimana cara membuat menu yang mirip dengan menu milik sosial media terkenal. Apalagi kalau bukan Facebook, saya akan membagikan project yang telah saya buat di akhir postingan. Hasil tampilan nantinya akan nampak seperti gambar berikut.

File utama yang harus anda perhatikan, ada pada file index.php dan css.css dalam folder "asset/css/". Untuk anda yang sudah terbiasa dengan dunia pemrograman web tentunya sudah paham dengan kode-kode yang akan saya bagikan. Bagi yag baru belajar silahkan dalami dulu tentang HTML dan juga CSS.

Index.php

<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<script type="text/javascript" src="asset/js/jq.js"></script>
<script type="text/javascript" src="asset/js/js.js"></script>
</head>
<body>
<div class="menu_atas">
<div class="kiri">
<div class="logo">
<img src="asset/icon/logo.png">
</div>
<div class="cari">
<div class="input">
<input type="text" name="cari" placeholder="Cari">
<div class="cr">
<img src="asset/icon/cari.png">
</div>
</div>
</div>
</div>
<div class="kanan">
<div class="menu">
<div class="m">
<div class="ic_prof">

</div>
<div class="nama">
<a href="#">Coding</a>
</div>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m">
<a href="#">Beranda</a>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m">
<a href="#">Buat</a>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m2">
<div class="ic">

</div>
</div>
<div class="m2">
<div class="ic2">

</div>
</div>
<div class="m2">
<div class="ic3">

</div>
</div>
<div class="m2">
<div class="ic4">

</div>
</div>
<div class="m2">
<div class="ic5" id="drop">

</div>
<div class="ii" style="display: none;">

</div>
<div class="menu_drop" style="display: none;">
<div class="menud">
<a>Grup</a>
</div>
<div class="menud">
<a>Halaman</a>
</div>
<div class="menud">
<a>Aktivitas</a>
</div>
<div class="menud">
<a>Pengaturan</a>
</div>
<div class="menud">
<a>Keluar</a>
</div>
</div>
</div>

</div>
</div>
</div>
<div class="content">

</div>
<script type="text/javascript">
$('#drop').click(function () {
var clas = $(this).attr('class');
if (clas=="ic5_putih") {
$(this).attr('class', 'ic5');
$('.menu_drop').attr('style','display: none;');
$('.ii').attr('style','display: none;');
}
if (clas=="ic5") {
$(this).attr('class', 'ic5_putih');
$('.menu_drop').attr('style','display: block;');
$('.ii').attr('style','display: block;');
}
})
</script>
</body>
</html>

Css.css

body{
margin: unset;
background: #dedede;
}
.menu_atas{
width: 100%;
height: 43px;
background: #ea4335;
border-bottom: 1px solid #7d2929;
}.kiri{
margin-left: 5%;
width: 50%;
height: 100%;
float: left;
}
.kanan{
width: 35%;
height: 100%;
float: left;
}.logo{
padding: 10px;
width: 50px;
float: left;
padding-right: 0px;
}.logo img{
width: 50%;
}.cari{
padding: 10px;
padding-left: 0px;
float: left;
width: 70%;
}.cari input{
width: 90%;
padding: 3px;
float: left;
font-size: 100%;
border:unset;

}.input{
background: white;
border-radius: 2px;
overflow: hidden;
display: flex;

}.cr{
float: left;
padding-top: 5px;
width: 9%;
text-align: center;
cursor: pointer;
}.cr img{
width: 15px;
}.cr:hover{
background: #ebedf0;
}.cr:active{
background: unset;
}.menu{
padding: 7px;
display: flex;
font-family: calibri;

}.menu a{
color: white;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}.m{
padding: 5px;
padding-right: 10px;
padding-left: 10px;
cursor: pointer;
}.m2{
padding: 3px;
padding-right: 10px;
padding-left: 10px;
cursor: pointer;
}
.m:hover{
background: #7d2929;
border-radius: 4px;
}.mn{
padding: 5px;
padding-right: unset;
padding-left: unset;

}.g{
border-right:1px solid #ce3232;
height: 100%;
}.ic_prof{
width: 20px;
height: 20px;
background-image: url('../icon/a.jpg');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
border-radius: 100%;
float: left;

}.nama{
margin-left: 7px;
float: left;
}.ic{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -25px -319px;
}.ic2{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -75px -319px;
}
.ic3{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -50px -294px;
}
.ic4 {
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: 0 -344px;
}.ic5{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -101px -294px;
}.ic5_putih{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -76px -294px;
}
.menu_drop{
width: 150px;
background: white;
position: absolute;
box-shadow: 0px 0px 8px -2px;
border-radius: 2px;
top: 48px;
right: 192px;
border: 1px solid #b6b2b2;
overflow: hidden;
}.ii{
width: 16px;
height: 8px;
background-image: url('../icon/ic2.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -401px -245px;
position: absolute;
top: 36px;
right: 215px;
}.menud{
padding: 5px;
padding-left: 30px;
}.menud a{
color: black;
font-family: roboto;
font-weight: 300;
font-size: 12px;
}.menud:hover{
background: red;
}.menud:hover a{
color: white;
}

Untuk folder dan atribut lengkap silahkan download file projectnya disini.

Friday, June 28, 2019