Pull-up Menu plus Multiple subs Posted by zendersto | at Saturday, August 15, 2009

Hello there, it is very long time for new tip right?Please accept my apology by this menu called Pull-up Menu.Besides, this menu also has multiple subs.Great?Why is it called Pull-up menu ?With the common menus,most templates use drop down menus, it means they will drop from top to down.So of course, pull-up means it will operate by the opposite way.This is the CSS menu, one other kind of menu that I wanna introduce you and provide you,trust me you cannot see these kinds of menu much on the other webs/blogs.Let's make it!

• View live demo


• Download

1.Add this code before the ]]></b:skin> tag, then read the instruction under the code to complete this step :

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated html
is available at http://www.stunicholls.com.
Follow the instruction to make this menu on Zenplate.blogspot.com
=================================================================== */

.preload1 {background: url(blank_over.gif);}
.preload2 {background: url(blank_overa.gif);}
/* top margin for this demo only */
#nav {padding:0; margin:200px 0 0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:verdana, arial, sans-serif;}
#nav li.top {display:block; float:left; padding-top:5px;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ddd; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top; line-height:29px;}
#nav li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top; line-height:29px;}

#nav li:hover > a.top_link {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(blank_over.gif) no-repeat right top; line-height:29px;}
#nav li:hover > a.top_link span.down {background:url(blank_overa.gif) no-repeat right top; line-height:29px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200; background:#fff;}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul
{left:0; bottom:40px; top:auto; background: #fff; padding:3px; border:1px solid #4f8383; white-space:nowrap; width:auto; height:auto; z-index:300;}
* html #nav li:hover ul {width:0;}
#nav li:hover ul li
{display:block; position:relative; float:left; font-weight:normal; background:#fff; clear:left;}
#nav li:hover ul li a
{display:block; font-size:11px; height:20px; line-height:20px; padding:0 5px; color:#000; text-decoration:none;}
#nav li ul li a.fly
{color:#4f8383; font-weight:bold;}
#nav li:hover ul li:hover
{background:#fff;}
#nav li:hover ul li a:hover {text-decoration:underline;}
#nav li:hover ul li a.fly:hover
{background:#4f8383; color:#fff; text-decoration:none;}
#nav li:hover ul li:hover.fly {background:#4f8383;}

#nav li:hover ul li:hover.fly > a.fly {background:#4f8383; color:#fff; text-decoration:none;}

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:-5px; margin-left:100%; bottom:-4px; top:auto; background: #fff; padding:3px; border:1px solid #4f8383; white-space:nowrap; width:auto; z-index:500; height:auto;}

Note: The red code,you will get them-the images in the file you need to download above.Host them and paste instead of the red code.

2.Now at this step, you have 2 choices to add this code : create a HTML/JavaScript and paste or paste directly in your source template in case you know exactly where it is:

<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a id="products" href="#" class="top_link"><span class="down">Products</span></a>
<ul class="sub">
<li class="fly"><a href="#" class="fly">Cameras</a>
<ul>
<li><a href="#">Nikon</a></li>
<li><a href="#">Minolta</a></li>
<li><a href="#">Pentax</a></li>
</ul>
</li>
<li class="fly"><a href="#" class="fly">Lenses</a>
<ul>
<li><a href="#">Wide Angle</a></li>
<li><a href="#">Standard</a></li>
<li><a href="#">Telephoto</a></li>
<li class="fly"><a href="#nogo11" class="fly">Zoom</a>
<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>
</li>
<li><a href="#">Mirror</a></li>
<li class="fly"><a href="#" class="fly">Non standard</a>
<ul>
<li><a href="#">Bayonet mount</a></li>
<li><a href="#">Screw mount</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Flash Guns</a></li>
<li><a href="#">Tripods & Monopods</a></li>
<li><a href="#">Filters</a></li>
</ul>
</li>
<li class="top"><a id="services" href="#" class="top_link"><span class="down">Services</span></a>
<ul class="sub">
<li><a href="#">Printing</a></li>
<li><a href="#">Photo Framing</a></li>
<li><a href="#">Retouching & Renovation</a></li>
<li><a href="#">Archiving</a></li>
</ul>
</li>
<li class="top"><a id="contacts" href="#" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="#">Support</a></li>
<li class="fly"><a href="#" class="fly">Sales</a>
<ul>
<li><a href="#">USA</a></li>
<li><a href="#">Canadian</a></li>
<li><a href="#">South American</a></li>
<li class="fly"><a href="#" class="fly">European</a>
<ul>
<li class="fly"><a href="#" class="fly">British</a>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Liverpool</a></li>

<li><a href="#">Glasgow</a></li>
<li class="fly"><a href="#" class="fly">Bristol</a>
<ul>
<li><a href="#">Redland</a></li>
<li><a href="#">Hanham</a></li>
<li><a href="#">Eastville</a></li>
</ul>
</li>
<li><a href="#">Cardiff</a></li>
<li><a href="#">Belfast</a></li>
</ul>
</li>
<li><a href="#">French</a></li>
<li><a href="#">German</a></li>
<li><a href="#">Spanish</a></li>
</ul>
</li>
<li><a href="#">Australian</a></li>
<li><a href="#">Asian</a></li>
</ul>
</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>
</li>
<li class="top"><a id="shop" href="#" class="top_link"><span class="down">Zenplate</span></a>
<ul class="sub">
<li><a href="http://zenplate.blogspot.com">Zenplate Home</a></li>
<li><a href="http://zenplate.blogspot.com/2008/10/contact-me.html">Contact</a></li>
<li><a href="http://zenplate.blogspot.com">Need help</a></li>
<li><a href="http://www.zenplate.blogspot.com/search/label/css%20menu">Other Menus</a></li>
</ul>
</li>
<li class="top"><a id="privacy" href="http://zenplate.blogspot.com" class="top_link"><span>Privacy Policy</span></a></li>
</ul>

Done, change them by your own,if you do like this menu, please leave me a comment below and don't forget to subscribe me,send this post to your friends.Thank you!