Menu yang ketika Mouse Hover akan berganti seperti slide, dibuat dengan CSS dan Jquery.
Kali ini kita akan mencaba membuat contoh menu yang bisa diterapkan di website anda, menu ini cukup menarik karena terlihat agak animatif dengan slide nya.
Oke kita mulai saja langsung
Ingredients
- Font Electrolize dari Google Web Fonts
- Jquery
- Subtlepattern Egg-Shell
Struktur HTML Menu
<div class="mn-container">
<ul id="topnav">
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
Disitu kita membuat container untuk menu, dan sebuah unordered list untuk list menu nya.
Code untuk bagan menu
.mn-container{
margin:50px auto;
width:680px;
padding:20px;
background:rgba(255,255,0,.1);
overflow:hidden;
border:1px solid rgba(225,225,225,.9)
}
Berikut ini code untuk List Menu nya
ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
font-family: 'Electrolize', sans-serif;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #333;
background:rgba(255,255,255,.5);
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
}
ul#topnav a{
color: #ff0000;
background-position: left bottom;
}
ul#topnav span{
background-position: left top;
}
Code Jquery untuk membuat menu terlihat berganti seperti sebuah slide
$(document).ready(function() {
$("#topnav li").prepend("<span></span>");
$("#topnav li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);
});
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40"
}, 500);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0"
}, 500);
});
});
Oke sekian tulisan saya kali ini, semoga bermanfaat ya.
Salam Web Design Indonesia :)
lucuuu….. bagus banget!!! Ajarin untuk gambar juga donk, bikin slide gambar yang klo di klik bisa langsung pindah ke halaman lain.
thanks before, ditunggu banget tutorial berikutnya…
Thanks, kami senang anda menyukai nya :)
Untuk yang gambar maksudnya gimana ya? ada contoh yang pernah dilihat? Atau yang anda maksud itu slideshow?
[…] Membuat Slide Menu Dengan CSS dan Jquery […]
Iya mas slide gambar, slide tsb berjalan otomatis dan pada waktu di klik dapat menuju halaman yg di simbolkan oleh gambar tsb. seperti tampilan pada koran online pada waktu ada berita hangat.
Sangat Membantu mas ,,,,
Saya tunggu mas, Terima Kasih.
mana demonya gan?
Klik aja demo dibagian bawah, trus hover di menu :)
terimakasih gan bermanfaat sekali..izin download
mau tanya kalo yang slide show ketika menscroll menumpuk di menu yang position fixed gimana cara supaya gak numpuk gambarnya di menu ketika di scroll..Terima kasih
Woow..tutorialnya bagus-bagus mas,lebih lagi tiap halaman ada demo-nya masing-masing,dan terutama tutorialnya banyak tentang JQuery yg kebetulan saya baru dalami(bermanfaat).
Kalau ada waktu senggang..boleh dunk mas add tutorial(contoh) tentang desain web dengan penggunaan JQuery untuk mendukung pembangunan web yang responsive, karena yang ada di beberapa web(hasil googling) rata-rata sebenarnya sama.
Trims..n’ keep up the good work.
Gimana kalo menunya mau di kasi Hover yah…
Gimana kalo menunya mau di kasi Bageround Hover yah…
wah ini keren, mau tanya cara masangnya di sintax html gimana yaa.. apa dipasang sesuai urutan atau kita buat file terpisah?
mas cara buat backround slide mirip twitter gimana ya
unik bgt mas..
Gan Cara Menambahkan Slide Dropdownnya gimana ???
Mohon cepat di Respown gan :D
Terimakasih.