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 , walau sedikit artikel yang ada disana, tapi kayaknya sang ~~bango~~ eh salah owner mksdx jagoan kode & script :)
Pertama kita bahas CSS Expanding Horizontal Menu
<-- 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
<-- 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 ></a>
<ul>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="javascript: void(0);" class="toggleMenuLink">Testing ></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 ></a>
<ul>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="javascript: void(0);" class="toggleMenuLink">Testing ></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/