2009/08/15

Pull-up Menu plus Multiple subs

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!


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!

1 comments:

Blogger said...

Thank's for all....

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.