Welcome !

Are you looking for a nice css navigation menu for your Blogger blog? You came to the right place, but at the wrong time :) Unfortunately this site is in testing status, and there are only a few css navigation menu here. I advise you to bookmark it and check back regulary for new designs. You can also digg this to help me spreading the word :)

css menu horizontal one

Written By Dilla AS on Saturday, December 24, 2011 | 3:54 AM

Saturday, December 24, 2011



Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
Read More | comments
Posted by Dilla AS at 3:54 AM 0 comments

test customize widget install

Written By Dilla AS on Friday, December 4, 2009 | 12:03 AM

Friday, December 4, 2009

Finally, there is an input button, the value is displayed as the button text.
If you copy this form and paste it to the end of the widget-code that is already in your sidebar, you will get a button below the widget, and clicking the button will install the widget to your visitor's blog.





Read More | comments (1)
Posted by Dilla AS at 12:03 AM 1 comments
Labels:

CSS Style Menu

Written By Dilla AS on Thursday, September 3, 2009 | 10:03 AM

Thursday, September 3, 2009

This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.

Mau CSS Style Menu seperti ini DEMO

Ikuti langkah-langkah berikut ini, ok selamat belajar CSS Style Menu Ria...

Cari code seperti ini :
]]></b:skin>

Kemudian Copy-Paste code berikut ini sebelum code di atas.
#multi-level {height:30px; position:relative; z-index:100;}
#multi-level .pad {float:left;}

/* The menu styling */
/* Remove the padding, margins and bullets from the lists */
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}

/* Set up the top level list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default top link link styling */
.menu li.top a.top_link {display:block; float:left; height:35px;}
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */

/* pre-load the hover images into the lists */
.menu li.p1 {width:65px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh52lYEwp4-mqV8uJ7hLmDs7zYjXc2xxElNudGKxtrcOhvdKYsjexoKtR3T6lE7QrJAnAcp6HZ7-aXDoxe4NmCjb2zpNS31BxeWpExepOms7vj0RjD70bEOrw8zvJj_tvxPBLIcOqOLrU/s320/home_1.gif) no-repeat;;}
.menu li.p2 {width:90px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAU9ScibN6mVPh4Mh1V2VA_d8YILvHqimuV8cFhKqqjPBydg7KJuzCFc_J9L1QTqSGE02X69GSnA0Cva_h3kXUmGXBNP6AuznAdILvLU18dQQ6M2e_msLyyR9cvswwofE3FgB-ey41aWI/s320/products_1.gif) no-repeat;;}
.menu li.p3 {width:88px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip3shQGQDSNyFxOEOAtYIGeWbV0SIaTdSbGXwY5_mnhxa19eDXXeKODxQB_X4GY3sPaUexKN9ALsL6MF3lFTm3kiNELgSdowWyM_yGzG4l5njTSOV7rp_y9a7L_TZauMezVDBP23B_A1o/s320/services_1.gif) no-repeat;;}
.menu li.p4 {width:91px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWPle2yq4rwlBVLAVWwUoM3iW_2DrhCSoIGPW_1pdCfNNqyd3ONxDY9MaEIxk7v8KhZPc_B2Syq956OTA739PABTjVZUZa01sT6lQd9KKWAbcDjvZuoit0XUySIzaVpAdFoUG8HYeSjzU/s320/contacts_1.gif) no-repeat;;}
.menu li.p5 {width:72px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6LwgT21CfOCqzr8J9dqXRE4UxyR3W4VTMqWNhTOn_1Nx0gUZZ7nKkYvk3bWBAekKrVt3NocF0T15WUVIyA6n5sI4HnEnXa2s1YnmSuctVxcOUmX-EgvRSddm1rVTxeiDTad8brSBrcw/s320/shop_1.gif) no-repeat;;}
.menu li.p6 {width:103px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgirJY9JA5iVK5CzAv5BTv05zclblkybLgf9Hl78wvIUE8ywlCWjRQoZR8kU3C0AHfEUpZbHh3Ca3MwgF5nArSjDjMgpR2SxUWvG_UU94vk_2GYYMI3szvVdo9zufVS9zcbCQ5tLe656AE/s320/privacy_1.gif) no-repeat;;}

/* set up the normal unhovered images in the links */
.menu li a#home {width:65px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV24T5rzalAPxp1O39Aft8h3jUb4ymNItRIfIj3z8Z0vUzTgGCzWDaQylANRbLmto8hVqF_BR-mk0Ro2Le2A0cEe2b5FVE38TgwENGZ63pjY6Rbnudfw-AGThkLPuhak26Kr6XvRLsC1g/s320/home_0.gif) no-repeat;}
.menu li a#products {width:90px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgijxaePwUHqeREqmB5VIxWRQ7FBYi0ARvN9pIEaVXHiJhZRmVD6TMqogOwtXEV8XMQXua4aMiiiHHAt3Ib-OGLA-4yZKiWiay3gGvG4W6vH9lrhVHvi3fcFAWabarGJ-TKpq14QbdT7NA/s320/products_0.gif) no-repeat;}
.menu li a#services {width:88px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG9jUcTm6kdqEz29pv0fuJeKT_QAbd-hrX-0OX0ehWA29HnyY2rioLrUXwZGCR-VbQgvlos6oZu6OG3Ap8TXDO69CxdNfaCM-t_TFuI-i3L4EhzX7emjyKmBs9bmxPtjcBZJVN0z_yqhU/s320/services_0.gif) no-repeat;}
.menu li a#contacts {width:91px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJAgh3qQhl2EsyMgIV-PkTfNhHpQBQcRjqf27hQhTtWYlNi1nheXGitoFx1r7siBI2C9LpQo9DtkottyasZ-IxBZeCZ49hKF-2RrulvB_7RZPf3AkkA3XEAyik4_84ZtREVU6vcOwB08U/s320/contacts_0.gif) no-repeat;}
.menu li a#shop {width:72px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1c3-dVaa5Dms3iXaZar02uAo4jinVD3D7SUCG7aaOHqvzJxOV1fhpxBQOC2geTFkfkKlJL8bj6kOi1QO1Pd_9pQR4PDkNeW0lrnCshIafzEAwR3m-EvBc_KhMBM6iCHXSOdSIIubkVCw/s320/shop_0.gif) no-repeat;}
.menu li a#privacy {width:103px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRCuq3u9KHaCrmVQatImgGsFCux5C7x8pxRGfRnYZY7ifU8mBF_4uxDKvtM6XZirLMaEnfJqCxAyMkAjCPk97gpHnS0zVppd6YVRXnNyooccIlaS_HfMvSYfQGG6-FaCH3XJC3fHShS_M/s320/privacy_0.gif) no-repeat;}

/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {visibility:visible;} /* for IE6 */
.menu li:hover { position:relative; z-index:200;} /* for IE7 */

/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */
.menu li a#home:hover, .menu li:hover a#home,
.menu li a#products:hover, .menu li:hover a#products,
.menu li a#services:hover, .menu li:hover a#services,
.menu li a#contacts:hover, .menu li:hover a#contacts,
.menu li a#shop:hover, .menu li:hover a#shop,
.menu li a#privacy:hover, .menu li:hover a#privacy {background:transparent;}

/* keep the 'next' level invisible by placing it off screen. */
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

/* set up the first drop down sub level */
.menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(multi_level-files/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#37a237; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

/* set up the flyout levels when hovering */
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; z-index:200; height:auto; z-index:300;}

Selanjutnya cari code seperti ini :
<div id='header-wrapper'>
.
.
.
</div>

Kalau sudah ketemu, lalu Copy-Paste code di bawah ini persis di bawah code yang tadi:
<div id='multi-level'>
<img alt='' class='pad' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPR8yTdXLkbJ5wFtxY7jm3fCMHIxwo0JkZVpUJEC7kLIL6RHoHhUSGf4hdqqUfyhuM3CnI5LkGSKlKFkegmlVYK0Swbg-H5gDE4nu6gF9eyY0K7MJy8wmYYFg7MB4JrHjTzcCS_gZJptc/s320/pad.gif' title=''/>
<ul class='menu'>
<li class='top p1'><a class='top_link' href='http://css-style-menu.blogspot.com/' id='home'><span>Home</span></a></li>
<li class='top p2'><a class='top_link' href='http://www.cssplay.co.uk' id='products'><span>Products</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class='sub'>
<li><a class='fly' href='../#/'>Cameras<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='../#/'>Nikon</a></li>
<li><a href='../#/'>Minolta</a></li>
<li><a href='../#/'>Pentax</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class='mid'><a class='fly' href='../#/'>Lenses<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='../#/'>Wide Angle</a></li>
<li><a href='../#/'>Standard</a></li>
<li><a href='../#/'>Telephoto</a></li>
<li><a class='fly' href='../#/'>Zoom<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='../#/'>35mm to 125mm</a></li>
<li><a href='../#/'>50mm to 250mm</a></li>
<li><a href='../#/'>125mm to 500mm</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href='../#/'>Mirror</a></li>
<li><a class='fly' href='../#/'>Non standard<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='../#/'>Bayonet mount</a></li>
<li><a href='../#/'>Screw mount</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href='../#/'>Flash Guns</a></li>
<li><a href='../#/'>Tripods</a></li>
<li><a href='../#/'>Filters</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class='top p3'><a class='top_link' href='http://www.cssplay.co.uk' id='services'><span>Services</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class='sub'>
<li><a href='../#/'>Printing</a></li>
<li><a href='../#/'>Photo Framing</a></li>
<li><a href='../#/'>Retouching</a></li>
<li><a href='../#/'>Archiving</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class='top p4'><a class='top_link' href='http://www.cssplay.co.uk' id='contacts'><span>Contacts</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class='sub'>
<li><a href='../#/'>Support</a></li>
<li><a class='fly' href='../#/'>Sales<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='../#/'>USA</a></li>
<li><a href='../#/'>Canadian</a></li>
<li><a href='../#/'>South American</a></li>
<li><a class='fly' href='../#/'>European<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class='fly' href='../#/'>British<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='../#/'>London</a></li>
<li><a href='../#/'>Liverpool</a></li>
<li><a href='../#/'>Glasgow</a></li>
<li><a class='fly' href='../#/'>Bristol<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='../#/'>Redland</a></li>
<li><a href='../#/'>Hanham</a></li>
<li><a href='../#/'>Eastville</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href='../#/'>Cardiff</a></li>
<li><a href='../#/'>Belfast</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href='../#/'>French</a></li>
<li><a href='../#/'>German</a></li>
<li><a href='../#/'>Spanish</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href='../#/'>Australian</a></li>
<li><a href='../#/'>Asian</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href='../#/'>Buying</a></li>
<li><a href='../#/'>Photographers</a></li>
<li><a href='../#/'>Stockist</a></li>
<li><a href='../#/'>General</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class='top p5'><a class='top_link' href='http://www.cssplay.co.uk' id='shop'><span>Shop</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class='sub'>
<li><a href='../#/'>Online</a></li>
<li><a href='../#/'>Catalogue</a></li>
<li><a href='../#/'>Mail Order</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class='top p6'><a class='top_link' href='http://www.cssplay.co.uk' id='privacy'><span>Privacy Policy</span></a></li>
</ul>
<img alt='' class='pad' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPR8yTdXLkbJ5wFtxY7jm3fCMHIxwo0JkZVpUJEC7kLIL6RHoHhUSGf4hdqqUfyhuM3CnI5LkGSKlKFkegmlVYK0Swbg-H5gDE4nu6gF9eyY0K7MJy8wmYYFg7MB4JrHjTzcCS_gZJptc/s320/pad.gif' title=''/>
</div>

Sudah selesai dech, dan jangan lupa disimpan pekerjaannya, lalu lihat hasilnya bagaimana!

Mau lihat hasilnya, DEMO
Read More | comments
Posted by Dilla AS at 10:03 AM 0 comments
Labels:
Subscribe to: Posts (Atom)
 
Copyright © 2011. CSS Style Menu . All Rights Reserved.
Company Info | Contact Us | Privacy policy | Term of use | Widget | Advertise with Us | Site map
Template modify by Creating Website