Membuat Slide Menu Dengan CSS

Berikut langkah-langkah nya :

Ingredients

  1. Font Electrolize dari Google Web Fonts
  2. Jquery
  3. 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);
		});

Semoga bermanfaat