Selasa, 01 Mei 2012

Menu Vertikal Melayang Dengan jQuery Dan CSS


By on 15.03

Menu Vertikal Melayang Dengan jQuery Dan CSS - Kali ini saya akan membahas bagaimana cara membuat Menu Vertikal Melayang Dengan jQuery Dan CSS, sebelumnya saya sudah pernah bahas Cara  Membuat Menu Vertikal Dengan Icon, kalai ini saya akan membahas bagaimana cara membuat menu vertikal melayang ditambah icon menggunakan jQuery dan CSS, jika sobat penasaran lihat DEMO
Jika sudah melihat Demo nya saat kursor mouse diarahkan pada menu ini maka menu tersebut akan terbuka.
Jika sobat tertarik bagaimana Cara Membuatnya silahkan ikuti langkah-langkah dibawah ini :

1. Login ke Blog kamu.
2. Pilih Rancangan lalu Centang Expand Widget Template.
3. Cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode ]]></b:skin>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
background-image: url(http://4.bp.blogspot.com/-ZWHmqKVWw-4/T5adP49ZqUI/AAAAAAAAA4E/QA-Z-pCsoME/s1600/home.png);
}
ul#navigation .about a {
background-image: url(http://2.bp.blogspot.com/-7xv_kHaMWDk/T5adQpDSE0I/AAAAAAAAA4M/OhNkgLEnbvw/s1600/idcard.png);
}
ul#navigation .search a {
background-image: url(http://4.bp.blogspot.com/-yMVKk5O3uWk/T5adUYsvmXI/AAAAAAAAA4s/fUoCnxHVkIk/s1600/search.png);
}
ul#navigation .podcasts a {
background-image: url(http://2.bp.blogspot.com/-xel5YPcktJg/T5adRKXclnI/AAAAAAAAA4Y/I_o3QZZn1wA/s1600/ipod.png);
}
ul#navigation .rssfeed a {
background-image: url(http://1.bp.blogspot.com/-MndXeDPjRL8/T5adTrza4vI/AAAAAAAAA4k/UCDeLmrgnZE/s1600/rss.png);
}
ul#navigation .photos a {
background-image: url(http://3.bp.blogspot.com/-LnoSTyruZKM/T5adPPq4FqI/AAAAAAAAA4A/HFNnyG80CBU/s1600/camera.png);
}
ul#navigation .contact a {
background-image: url(http://3.bp.blogspot.com/-3Y6wAMo7Exc/T5adSUyD5bI/AAAAAAAAA4g/TVK9INPVWM0/s1600/mail.png);
}
Selanjutnya cari kode <body> atau </head> pilih salah satu saja dan letakan kode dibawah ini tepat di bawah 2 kode tadi mau. (Pilih Salah satu saja antara kode </head> dan <body>)
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
</head>
<body>
<p style="display:none;"> Navigation Menu by<a href="http://www.latesthack.com">Latest Hack</a></p>
<ul id="navigation">
<li class="home"><a href="" title="Home"></a></li>
<li class="about"><a href="#" title="About"></a></li>
<li class="search"><a href="#" title="Search"></a></li>
<li class="photos"><a href="#" title="Photos"></a></li>
<li class="rssfeed"><a href="#" title="Rss Feed"></a></li>
<li class="podcasts"><a href="#" title="Podcasts"></a></li>
<li class="contact"><a href="#" title="Contact"></a></li>
</ul>
Ganti tanda # dengan URL yang dituju.
Pilih dulu Pertinjauan apakah muncul, jika muncul pilih simpan template.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

2 komentar:

  1. terima kasih info yg sangat bermanfaat ini..


    #Semoga sehat selalu

    BalasHapus