Membuat Menu Navigasi Sederhana Dengan CSS3 Dan Jquery

Pada Tips dan Trik kali ini kita akan mencoba Membuat Menu Navigasi Sederhana Dengan CSS3 Dan Jquery. Ini akan sedikit membantu mempercantik tampilan menu navigasi pada website Anda.

Ikuti langkah-langkahnya.

HTML
Langkah pertama kita akan mulai dengan membuat struktur HTML-nya. Berikut kurang lebih kerangka HTML nya.

<div id="nav">
	<ul>
    	<li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#programming">Programming</a></li>
        <li><a href="#tipstrik">Tips Trik</a></li>
        <li><a href="#profile">Profile</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="clear"></div>
</div>

Jika Anda ingin ada pilihan menu yang terselect secara otomatis, tambahkan class="selected" pada menu yang Anda inginkan. Berikut contohnya:

<li class="selected"><a href="#home">Home</a></li>

CSS
Font custom untuk CSS menggunakan CSS dari Google font API.

@import url(http://fonts.googleapis.com/css?family=Lobster);
body {margin:0; padding:0; background:#ddd;}
#nav{position:relative; margin:40px; background:#eee; padding:0; font-family:'Lobster', Arial, Helvetica, sans-serif; font-size:21px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:2px 2px 3px #ccc; -webkit-box-shadow:2px 2px 3px #ccc; box-shadow:2px 2px 3px #ccc;}
#nav .clear{clear:both;}
#nav ul{padding:0 0 0 5px; margin:0; list-style:none;}
#nav li{float:left; margin:5px 10px 5px 0; background:#eee; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#nav li a{text-decoration:none; color:#9e0039; display:block; padding:10px 15px;}

Tambahkan script berikut untuk me-load library dan UI jquery dari Google.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

jQuery
Langkah terakhir tambahkan script jquery berikut.

<script>
$(document).ready(function(){
	$nav_li=$("#nav li");
	$nav_li_selected=$("#nav li.selected");
	$nav_li_a=$nav_li.children("a");
	var animSpeed=450; //kecepatan fade
	var hoverTextColor="#fff"; //warna teks ketika mouse diatas
	var hoverBackgroundColor="#9e0039"; //warna background ketika mouse diatas
	var textColor=$nav_li_a.css("color");
	var backgroundColor=$nav_li.css("background-color");
	//init selected
	$nav_li_selected.css("background-color",hoverBackgroundColor).children().css("color",hoverTextColor);
	$nav_li_a.hover(function() {
		var $this=$(this);
		$this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
	},function() {
		var $this=$(this);
		if(!$this.parent().is(".selected")){
			$this.stop().animate({ color: textColor }, animSpeed).parent().stop().animate({ backgroundColor: backgroundColor }, animSpeed);
		}
	});
	//selected
	$nav_li_a.click(function(){
		var $this=$(this);
		$this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed).addClass("selected").siblings(".selected").removeClass("selected").stop().animate({ backgroundColor: backgroundColor }, animSpeed).children().stop().animate({ color: textColor }, animSpeed);
	});
});
</script>

Gunakan script jquery berikut jika anda ingin menu terselect ketika menu diklik.
<script>
$(document).ready(function(){
	$nav_li=$("#nav li");
	$nav_li_selected=$("#nav li.selected");
	$nav_li_a=$nav_li.children("a");
	var animSpeed=450; //kecepatan fade
	var hoverTextColor="#fff"; //warna teks ketika mouse diatas
	var hoverBackgroundColor="#9e0039"; //warna background ketika mouse diatas
	var textColor=$nav_li_a.css("color");
	var backgroundColor=$nav_li.css("background-color");
	//init selected
	$nav_li_selected.css("background-color",hoverBackgroundColor).children().css("color",hoverTextColor);
	$nav_li_a.hover(function() {
		var $this=$(this);
		$this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
	},function() {
		var $this=$(this);
		if(!$this.parent().is(".selected")){
			$this.stop().animate({ color: textColor }, animSpeed).parent().stop().animate({ backgroundColor: backgroundColor }, animSpeed);
		}
	});
	//selected
	$nav_li_a.click(function(){
		var $this=$(this);
		$this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed).addClass("selected").siblings(".selected").removeClass("selected").stop().animate({ backgroundColor: backgroundColor }, animSpeed).children().stop().animate({ color: textColor }, animSpeed);
	});
});
</script>

Agar bentuk sudut membulat support pada IE8, kita dapat menggunakan script dari DD_roundies. Dan tambahkan didalam tag head.
<script src="DD_roundies_0.0.2a-min.js"></script>
<script>
DD_roundies.addRule("#nav", "5px");
DD_roundies.addRule("#nav li", "5px");
</script>

Sekian Tips dan Trik kali ini, semoga bermanfaat.

Berikut link demo dan source code lengkapnya yang bisa di download.
DEMO | DOWNLOAD CODE

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *