Langsung ke konten utama

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.

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Inilah Kelebihan dan Kekurangan Ruby

Ruby merupakan salah satu bahasa pemrograman berorientasi objek berbasis skrip yang dikembangkan oleh Yukihiro Matsumoto yaitu seorang programer asal Jepang. Untuk mengetahui lebih jauh tentang bahasa Ruby silahkan baca postingan sebelumnya : Mengenal Bahasa Pemrograman Ruby  Sesuai judul postingan kali ini kita hanya akan membahas mengenai Kelebihan serta Kekurangan Bahasa Pemrograman Ruby. Berikut beberapa point yang telah kami jabarkan. Kelebihan Bahasa Pemrograman Ruby 1. Kode sederhana  Dibandingkan dengan bahasa pemrograman lainnya, yang kebanyakan untuk menulis kode dibutuhkan sekitar 10 baris, pada Ruby hanya butuh 1 atau 2 baris. Inilah kenapa Ruby dikatakan memiliki kode yang sederhana. Karena kesederhanaan dalam kodenya, akan mengurangi jam kerja programmer. 2. Multi-platform Ruby dapat berjalan di berbagai sistem operasi seperti Mac, Windows, hingga Linux. 3. Tingkat kebebasan yang tinggi Salah satu bentuk kebebasan programer dalam menuliska kode Ruby seperti tidak...
Posting Komentar
Baca selengkapnya

Cara Install ReactJs dengan Mudah

  Sebelumnya kita telah membahas tentang apa itu ReactJs pada postingan Mengenal Apa itu React Js . Untuk itu pada postingan kali ini kita akan memulai langkah pertama untuk bisa mempraktekkan langsung atau membuat project dengan ReactJS. Langkah pertama yang harus dilakukan adalah memasang ReactJs, dimana anda memerlukan NPM. Baca lebih jauh menegenai Apa itu NPM . Adapun Langkah-langkah sebelum anda dapat menginstall ReactJs adalah sebagai berikut : 1. Install Node js -> Baca disini 2. Pastikan NPM sudah terinstall (NPM satu paket ketika Node js di install), cara mengeceknya dengan membuka CMD dan ketikkan perintah npm -v , jika muncul versi NPM seperti pada gambar dibawah, berarti NPM sudah siap digunakan. 3. Install create-react-app caranya buka CMD dan ketikkan perintah npm install -g create-react-app kemudian tunggu hingga proses selesai. Pastikan anda memiliki koneksi internet sebab program akan mendownload beberapa file. Sampai disni anda sudah berhasil memasang d...
Posting Komentar
Baca selengkapnya

Mengenal Apa itu Android Studio

Android Studio merupakan tools IDE ( Integrated Development Environment ) yang digunakan untuk membuat aplikasi android. Fungsi utamanya adalah sebagai editor yang menyediakan berbagai kebutuhan dalam membangun aplikasi android seperti widget, library, dll. Android Studio versi terbaru telah mendukung 2 bahasa pemrograman yaitu Java dan Kotlin. Sebelumnya hanya mendukung bahasa Java. Android Studio hadir sebagai pengganti Eclipse ADT ( Android Development Tools ) yaitu tools utama sebelumnya. Tools Android Studio ini dibangun di atas aplikasi yang sudah populer sebagai editor programer yaitu JetBrains IntelliJ IDE. Selain itu Android Studio di lengkapi dengan Emulator sendiri. Sama halnya seperti Eclipse, Android Studio juga memerlukan SDK ( Software Development Kit ) untuk membangun aplikasi android. Bedanya Android Studio didukung penuh oleh Google sebagai pengembangnya serta menggunakan grandle dalam melakukan build. Baca juga : Perbedaan Membuat Aplikasi Android Menggunakan Ecli...
Posting Komentar
Baca selengkapnya