Masih Tentang CSS yang saya share kali ini Sobat..Coba arahkan cursor Sobat pada demo dibawah.Nah itulah yang saya Share kali ini Cara membuat CSS Menu Pull Up Multi Sub Menu,Untuk Menu ini kelihatan Begitu atraktif dan menarik Dengan menu utama yang memuat beberapa sub-sub menu diatasnya .Bagi Sobat yang berminat untuk mencoba yup.. Langsung aja Kita Menuju TKP.
Berikut Langkah-langkahnya Sobat:
- Login ke Blog Sobat
- Masuk Rancangan Pilih tambah gadget HTML/javascript
- Copy Kode dibawah ini
- Rubah nama menu-menunya dan Alamt URLnya
- Untuk membuat posisinya pas sesuaikan kode berwarna merah margin: 0 20px ;
- Dan Biar lebih menarik Utak-atik pada kode-kode lainnya Sobat
- Lalu Simpan dan letakkan dibagian Bawah/footter Blog Sobat Atau bisa juga letakkan dibawah kolong tempat tidur... he..he..he..he...becanda Sob
Demo CSS Menu Pull Up
Kode CSSnya
<style type="text/css">
/* ================================
Originals Version: http://www.stunicholls.com./
Salam Hangat & Happy Blogging
Don't Remove this Code
================================ */
#binkbenks {padding:0; margin:0 ; list-style:none; height:36px;-moz-border-radius: 5px 5px 20px 20px ;;-webkit-border-radius: 5px 5px 20px 20px ;-o-border-radius: 5px 5px 20px 20px ; border:4px inset red; background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); position:relative; z-index:500; font-family:Comic Sans MS;}
#binkbenks li.top {display:block; float:left; padding-top:5px;}
#binkbenks li a.top_link {display:block; float:left; height:37px; line-height:24px; color:#ddd; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
#binkbenks li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;}
#binkbenks li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:none;}
#binkbenks li a.top_link:hover {color:none; background: url(blank_over.gif) no-repeat;}
#binkbenks li a.top_link:hover span {background:none; line-height:29px;}
#binkbenks li a.top_link:hover span.down {background:none; line-height:20px;}
#binkbenks li:hover > a.top_link {color: grey;}
#binkbenks li:hover > a.top_link span {background:none; line-height:24px;}
#binkbenks li:hover > a.top_link span.down {background:none) ; line-height:29px;}
#binkbenks li:hover {position:relative; -moz-border-radius: 5px 5px 10px 10px;-webkit-border-radius: 5px 5px 10px 10px; ;-o-border-radius: 5px 5px 10px 10px; border:3px inset #fff;background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); }
#binkbenks ul,
#binkbenks li:hover ul ul,
#binkbenks li:hover ul li:hover ul ul,
#binkbenks li:hover ul li:hover ul li:hover ul ul,
#binkbenks li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:5px; padding:0; list-style:none;}
#binkbenks li:hover ul
{left:0; bottom:40px; top:auto; padding:2px;-moz-border-radius: 5px;-webkit-border-radius: 5px ;-o-border-radius: 5px; border:2px inset red;background:background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); ; white-space:nowrap; width:auto; height:auto; z-index:300;}
* html
#binkbenks li:hover ul {width:0;}
#binkbenks li:hover ul li
{display:block; position:relative; float:left; font-weight:normal; clear:left;}
#binkbenks li:hover ul li a
{display:block; font-size:12px; height:20px; line-height:20px; padding:0 5px; color:#fff; text-decoration:none;}
#binkbenks li ul li a.fly
{color:#fff; font-weight:bold;}
#binkbenks li:hover ul li:hover.fly > a.fly {color:#fff;}
#binkbenks li:hover ul li:hover ul,
#binkbenks li:hover ul li:hover ul li:hover ul,
#binkbenks li:hover ul li:hover ul li:hover ul li:hover ul,
#binkbenks li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:-5px; margin-left:100%; bottom:-4px; top:auto; padding:3px;-moz-border-radius: 5px ;-webkit-border-radius: 5px ;-o-border-radius: 5px ; border:3px inset red; white-space:nowrap; width:auto; z-index:500; height:auto;}
</style>
<ul id="binkbenks">
<li class="top"><a href="URL BLOG SOBAT" class="top_link"><span>Home</span></a></li>
<li class="top"><a id="menu" href="URL BLOG SOBAT" class="top_link"><span class="down">Menu</span></a>
<ul class="sub">
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Cameras</a>
<ul>
<li><a href="URL BLOG SOBAT">Nikon</a></li>
<li><a href="URL BLOG SOBAT">Minolta</a></li>
<li><a href="URL BLOG SOBAT">Pentax</a></li>
</ul>
</li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Lenses</a>
<ul>
<li><a href="URL BLOG SOBAT">Wide Angle</a></li>
<li><a href="URL BLOG SOBAT">Standard</a></li>
<li><a href="URL BLOG SOBAT">Telephoto</a></li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Zoom</a>
<ul>
<li><a href="URL BLOG SOBAT">standart</a></li>
<li><a href="URL BLOG SOBAT">large</a></li>
<li><a href="URL BLOG SOBAT">x-large</a></li>
</ul>
</li>
<li><a href="URL BLOG SOBAT">Mirror</a></li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Non standard</a>
<ul>
<li><a href="URL BLOG SOBAT">Bayonet mount</a></li>
<li><a href="URL BLOG SOBAT">Screw mount</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL BLOG SOBAT">Flash Guns</a></li>
<li><a href="URL BLOG SOBAT">Tripods & Monopods</a></li>
<li><a href="URL BLOG SOBAT">Filters</a></li>
</ul>
</li>
<li class="top"><a id="services" href="URL BLOG SOBAT" class="top_link"><span class="down">Services</span></a>
<ul class="sub">
<li><a href="URL BLOG SOBAT">Printing</a></li>
<li><a href="URL BLOG SOBAT">Photo Framing</a></li>
<li><a href="URL BLOG SOBAT">Retouching & Renovation</a></li>
<li><a href="URL BLOG SOBAT">Archiving</a></li>
</ul>
</li>
<li class="top"><a id="contacts" href="URL BLOG SOBAT" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href=""url blog sobat>Support</a></li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Sales</a>
<ul>
<li><a href="URL BLOG SOBAT">USA</a></li>
<li><a href="URL BLOG SOBAT">Canadian</a></li>
<li><a href="URL BLOG SOBAT">South American</a></li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">European</a>
<ul>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">British</a>
<ul>
<li><a href="URL BLOG SOBAT">London</a></li>
<li><a href="URL BLOG SOBAT">Liverpool</a></li>
<li><a href="URL BLOG SOBAT">Glasgow</a></li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Bristol</a>
<ul>
<li><a href="URL BLOG SOBAT">Redland</a></li>
<li><a href="URL BLOG SOBAT">Hanham</a></li>
<li><a href="URL BLOG SOBAT">Eastville</a></li>
</ul>
</li>
<li><a href="URL BLOG SOBAT">Cardiff</a></li>
<li><a href="URL BLOG SOBAT">Belfast</a></li>
</ul>
</li>
<li><a href=""url blog sobat>French</a></li>
<li><a href="URL BLOG SOBAT">German</a></li>
<li><a href="URL BLOG SOBAT">Spanish</a></li>
</ul>
</li>
<li><a href="URL BLOG SOBAT">Australian</a></li>
<li><a href="URL BLOG SOBAT">Asian</a></li>
</ul>
</li>
<li><a href="URL BLOG SOBAT">Buying</a></li>
<li><a href="URL BLOG SOBAT">Photographers</a></li>
<li><a href="URL BLOG SOBAT">Stockist</a></li>
<li><a href="URL BLOG SOBAT">General</a></li>
</ul>
</li>
<li class="top"><a id="shop" href="URL BLOG SOBAT" class="top_link"><span class="down">Tips n Triks</span></a>
<ul class="sub">
<li><a href="URL BLOG SOBAT">Merayu Cewek</a></li>
<li><a href="URL BLOG SOBAT">Meperkosa Cewek</a></li>
<li><a href="URL BLOG SOBAT">Bercinta</a></li>
<li><a href="URL BLOG SOBAT">Playboy</a></li>
</ul>
</li>
<li class="top"><a id="chatbox" href="URL BLOG SOBAT" class="top_link"><span>Chat Box</span></a></li>
</ul>
/* ================================
Originals Version: http://www.stunicholls.com./
Salam Hangat & Happy Blogging
Don't Remove this Code
================================ */
#binkbenks {padding:0; margin:0 ; list-style:none; height:36px;-moz-border-radius: 5px 5px 20px 20px ;;-webkit-border-radius: 5px 5px 20px 20px ;-o-border-radius: 5px 5px 20px 20px ; border:4px inset red; background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); position:relative; z-index:500; font-family:Comic Sans MS;}
#binkbenks li.top {display:block; float:left; padding-top:5px;}
#binkbenks li a.top_link {display:block; float:left; height:37px; line-height:24px; color:#ddd; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
#binkbenks li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;}
#binkbenks li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:none;}
#binkbenks li a.top_link:hover {color:none; background: url(blank_over.gif) no-repeat;}
#binkbenks li a.top_link:hover span {background:none; line-height:29px;}
#binkbenks li a.top_link:hover span.down {background:none; line-height:20px;}
#binkbenks li:hover > a.top_link {color: grey;}
#binkbenks li:hover > a.top_link span {background:none; line-height:24px;}
#binkbenks li:hover > a.top_link span.down {background:none) ; line-height:29px;}
#binkbenks li:hover {position:relative; -moz-border-radius: 5px 5px 10px 10px;-webkit-border-radius: 5px 5px 10px 10px; ;-o-border-radius: 5px 5px 10px 10px; border:3px inset #fff;background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); }
#binkbenks ul,
#binkbenks li:hover ul ul,
#binkbenks li:hover ul li:hover ul ul,
#binkbenks li:hover ul li:hover ul li:hover ul ul,
#binkbenks li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:5px; padding:0; list-style:none;}
#binkbenks li:hover ul
{left:0; bottom:40px; top:auto; padding:2px;-moz-border-radius: 5px;-webkit-border-radius: 5px ;-o-border-radius: 5px; border:2px inset red;background:background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); ; white-space:nowrap; width:auto; height:auto; z-index:300;}
* html
#binkbenks li:hover ul {width:0;}
#binkbenks li:hover ul li
{display:block; position:relative; float:left; font-weight:normal; clear:left;}
#binkbenks li:hover ul li a
{display:block; font-size:12px; height:20px; line-height:20px; padding:0 5px; color:#fff; text-decoration:none;}
#binkbenks li ul li a.fly
{color:#fff; font-weight:bold;}
#binkbenks li:hover ul li:hover.fly > a.fly {color:#fff;}
#binkbenks li:hover ul li:hover ul,
#binkbenks li:hover ul li:hover ul li:hover ul,
#binkbenks li:hover ul li:hover ul li:hover ul li:hover ul,
#binkbenks li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:-5px; margin-left:100%; bottom:-4px; top:auto; padding:3px;-moz-border-radius: 5px ;-webkit-border-radius: 5px ;-o-border-radius: 5px ; border:3px inset red; white-space:nowrap; width:auto; z-index:500; height:auto;}
</style>
<ul id="binkbenks">
<li class="top"><a href="URL BLOG SOBAT" class="top_link"><span>Home</span></a></li>
<li class="top"><a id="menu" href="URL BLOG SOBAT" class="top_link"><span class="down">Menu</span></a>
<ul class="sub">
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Cameras</a>
<ul>
<li><a href="URL BLOG SOBAT">Nikon</a></li>
<li><a href="URL BLOG SOBAT">Minolta</a></li>
<li><a href="URL BLOG SOBAT">Pentax</a></li>
</ul>
</li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Lenses</a>
<ul>
<li><a href="URL BLOG SOBAT">Wide Angle</a></li>
<li><a href="URL BLOG SOBAT">Standard</a></li>
<li><a href="URL BLOG SOBAT">Telephoto</a></li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Zoom</a>
<ul>
<li><a href="URL BLOG SOBAT">standart</a></li>
<li><a href="URL BLOG SOBAT">large</a></li>
<li><a href="URL BLOG SOBAT">x-large</a></li>
</ul>
</li>
<li><a href="URL BLOG SOBAT">Mirror</a></li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Non standard</a>
<ul>
<li><a href="URL BLOG SOBAT">Bayonet mount</a></li>
<li><a href="URL BLOG SOBAT">Screw mount</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL BLOG SOBAT">Flash Guns</a></li>
<li><a href="URL BLOG SOBAT">Tripods & Monopods</a></li>
<li><a href="URL BLOG SOBAT">Filters</a></li>
</ul>
</li>
<li class="top"><a id="services" href="URL BLOG SOBAT" class="top_link"><span class="down">Services</span></a>
<ul class="sub">
<li><a href="URL BLOG SOBAT">Printing</a></li>
<li><a href="URL BLOG SOBAT">Photo Framing</a></li>
<li><a href="URL BLOG SOBAT">Retouching & Renovation</a></li>
<li><a href="URL BLOG SOBAT">Archiving</a></li>
</ul>
</li>
<li class="top"><a id="contacts" href="URL BLOG SOBAT" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href=""url blog sobat>Support</a></li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Sales</a>
<ul>
<li><a href="URL BLOG SOBAT">USA</a></li>
<li><a href="URL BLOG SOBAT">Canadian</a></li>
<li><a href="URL BLOG SOBAT">South American</a></li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">European</a>
<ul>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">British</a>
<ul>
<li><a href="URL BLOG SOBAT">London</a></li>
<li><a href="URL BLOG SOBAT">Liverpool</a></li>
<li><a href="URL BLOG SOBAT">Glasgow</a></li>
<li class="fly"><a href="URL BLOG SOBAT" class="fly">Bristol</a>
<ul>
<li><a href="URL BLOG SOBAT">Redland</a></li>
<li><a href="URL BLOG SOBAT">Hanham</a></li>
<li><a href="URL BLOG SOBAT">Eastville</a></li>
</ul>
</li>
<li><a href="URL BLOG SOBAT">Cardiff</a></li>
<li><a href="URL BLOG SOBAT">Belfast</a></li>
</ul>
</li>
<li><a href=""url blog sobat>French</a></li>
<li><a href="URL BLOG SOBAT">German</a></li>
<li><a href="URL BLOG SOBAT">Spanish</a></li>
</ul>
</li>
<li><a href="URL BLOG SOBAT">Australian</a></li>
<li><a href="URL BLOG SOBAT">Asian</a></li>
</ul>
</li>
<li><a href="URL BLOG SOBAT">Buying</a></li>
<li><a href="URL BLOG SOBAT">Photographers</a></li>
<li><a href="URL BLOG SOBAT">Stockist</a></li>
<li><a href="URL BLOG SOBAT">General</a></li>
</ul>
</li>
<li class="top"><a id="shop" href="URL BLOG SOBAT" class="top_link"><span class="down">Tips n Triks</span></a>
<ul class="sub">
<li><a href="URL BLOG SOBAT">Merayu Cewek</a></li>
<li><a href="URL BLOG SOBAT">Meperkosa Cewek</a></li>
<li><a href="URL BLOG SOBAT">Bercinta</a></li>
<li><a href="URL BLOG SOBAT">Playboy</a></li>
</ul>
</li>
<li class="top"><a id="chatbox" href="URL BLOG SOBAT" class="top_link"><span>Chat Box</span></a></li>
</ul>
Selamat Mencoba Semoga Bermanfaat
Menu-Menu Lainnya
Posted On : 7 November 2011 Time : 14.17
