Menu Maning Menu Lagi

Dari pada enggak mosting, bagi-bagi lagi artikel mengenai menu saja ah ^{write with keyword MENU on search box} Keberadaan menu sangat vital untuk navigasi sebuat weblogsite. Koben comot pembuatan menu kali ini dari My Website Designers Blog, walau sedikit artikel yang ada disana, tapi kayaknya sang bango eh salah owner mksdx jagoan kode & script :)
Pertama kita bahas CSS Expanding Horizontal Menu
1 <-- Original article, click :P Disana sudah terlihat jelas kode-kodenya sekaligus fixed buat IE. Beben buat lagi dengan version diam ditempat alias menjentul!

demo

Kode CSS

#menu {
width: 90px;
background: #eee;
position: fixed;
top: 10px;
left: 10px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 3px 5px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
background: #333;
text-decoration: none;
color: white;
}
#menu a:hover {
color: white;
background: #555;
}
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul, div#menu ul ul li:hover ul ul {
display: none;
}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {
display: block;
}

Kode HTML

<div id="menu">
<ul>
<li><h2><a href="http://ben-tools.blogspot.com/">Menu Item</a></h2>
<ul>
<li><a href="http://beben-koben.blogspot.com/" title="Beben Koben">Hoogle</a>
<ul>
<li><a href="http://embah-google.blogspot.com/" title="EMbah Google">Beben</a></li>
<li><a href="" title="">Koben</a></li>
<li><a href="" title="">Ganteng</a></li>
</ul>
</li>
<li><a href="http://www.google.com" title="Google">Google</a></li>
<li><a href="http://www.yahoo.com" title="Yahoo">Yahoo</a>
<ul>
<li><a href="" title="">Services</a>
<ul>
<li><a href="http://maps.google.com" title="Maps">Maps</a></li>
<li><a href="http://images.google.com" title="Images">Images</a></li>
<li><a href="http://www.google.com" title="Search">Search</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>

Simple Menu System using jQuery, and Subslide List Elements
2 <-- Click here again for read original trick ;)

demo

CSS Coded

#menu {
color: black;
text-decoration: none;
}
#menu a:hover {
color: #a00;
}
#menu {
margin-left: 0;
padding-left: 0;
list-style: none;
}
#menu ul,
#menu ul li ul,
#menu ul li ul li ul,
#menu ul li ul li ul li ul {
margin-left: 0;
padding-left: 0;
list-style: none;
display: none;
}
#menu li {
padding-left: 15px;
background-image: url(http://www.blogger.com/img/triangle_ltr.gif);
background-repeat: no-repeat;
background-position: 0 .3em;
}

HTML Coded

<ul id="menu">
<li><a href="javascript: void(0);" class="toggleMenuLink">Sub Menu &gt;</a>
<ul>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="javascript: void(0);" class="toggleMenuLink">Testing &gt;</a>
<ul>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
</ul>
</li>
<li><a href="#">Testing</a></li>
</ul>
</li>
<li><a href="http://www.google.com">Normal link</li>
<li><a href="http://www.google.com">Another link</li>
<li><a href="javascript: void(0);" class="toggleMenuLink">Another Sub Menu &gt;</a>
<ul>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="javascript: void(0);" class="toggleMenuLink">Testing &gt;</a>
<ul>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
</ul>
</li>
<li><a href="#">Testing</a></li>
</ul>
</li>
</ul>

jQuery Script

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('a.toggleMenuLink').click(function() {
$(this).siblings('ul').toggle('slow');
});
});
//]]>
</script>
UPDATE!!!Nemu lagi menu pure menggunakan CSS. Cucok banget buat yang suka main pojok kanan atas :))

CSS

.dropdown {
height: 40px;
}
.dropdown ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.dropdown ul li {
display: block;
float: right;
position: relative;
}
.dropdown ul li a {
text-decoration: none;
display: block;
background: #e3e3e3;
border-bottom: 1px solid #ccc;
color: #444;
display: block;
float: left;
font-weight: bold;
padding: 10px 16px;
padding: 11px 16px\9; /* IE9 and below */
*padding: 10px 16px; /* IE7 and below */
}
.dropdown ul li a:hover {
background: #d1e4f8;
color: #000;
text-decoration: none;
}
.dropdown ul li:hover ul.children {
display: block;
position: absolute;
top: 36px;
right: 0;
}
ul.children {
background: #8f714d;
display: none;
margin: 0;
width: 184px;
}
ul.children li {
margin: 0;
}
ul.children a {
border: none;
width: 200px;
}

HTML

<div class="dropdown">
<ul>
<li><a href="#">Login</a>
<ul class="children">
<li><a href="#">Beben</a></li>
<li><a href="#">Koben</a></li>
<li><a href="#">si Bloglang</a></li>
<li><a href="#">anu Ganteng</a></li>
<li><a href="#">Kalem tea</a></li>
</ul>
</li>
</ul>
</div>

demo
http://www.e-seopro.com/2012/08/tutorials-css3-menu-and-navigation.html
Semoga bermanfaat \m/