Stylish Dropline Menu Posted by zendersto | at Thursday, July 23, 2009

Good day my friends! I am very eager now so these tips tell me that they want to be published and love to be placed on your blog now.Of course I cannot resist.

Introduce to you, this is the newest kind of menu, old but not really old , this is not seen regularly on any blog and website, called Dropline Menu.Yeah my menu albums are still so much in my personal data, but anyway you will see them all! Certainly you have seen this menu, but not much guides can offer you the tip about making this type of menu.It is very comfortable and nice if you are so boring about the "old man" drop down menus.Ok I bla bla bla too much, take a look at the demo and lets do it!

• View live demo


• Download

1.This is so old step for you , add this code before the
]]></b:skin> tag:

/* ================================================================
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
=================================================================== */

#nav {
height:36px; position:relative; font-family:arial, verdana, sans-serif; font-size:11px;z-index:500;
}
#nav .select {
margin:0; padding:0; list-style:none; white-space:nowrap;
}
#nav li {
float:left; background:url(blank_over_p.gif);
}
#nav .select a {
display:block; height:36px; float:left; background: url(blank_p.gif); padding:0 0 0 15px; text-decoration:none; line-height:25px; white-space:nowrap; color:#ddd;
}
#nav .select a b {
display:block; padding:0 30px 10px 15px; background:url(blank_p.gif) right top;
}
#nav .select li:hover a {
background: url(blank_over_p.gif); padding:0 0 0 15px; line-height:27px; cursor:pointer; color:#fff;
}
#nav .select li:hover a b {
display:block; padding:0 30px 9px 15px; background:url(blank_over_p.gif) right top; cursor:pointer;
}
#nav .sub {
display:none; margin:0; padding:0 0 0 60px;list-style:none;
}
#nav .sub li {background:transparent;}
#nav .select li:hover .sub {
height:18px; display:block; position:absolute; float:left; width:750px; top:28px; left:0; text-align:center;
}
#nav .select li:hover .sub li a {
display:block;height:18px; line-height:16px; float:left; background:transparent url(transparent.gif); padding:0 16px; margin:0; white-space:nowrap; border:1px solid #000; border-color:#888 #777 #666 #ddd; color:#888;font-size:10px;
}
#nav .select li:hover .sub li a:hover {
color:#000; background:#e8e8e8; border-color: #fff #333 #000 #fff; line-height:15px;
}

At this step, just notice the red code, you can get the icons in the file you have to download.Upload them and paste the links there.

2.Add this script before the </head> tag:
<script src="stuHover.js" type="text/javascript"></script>

Notice the blue code, there is one js file,you need to download and upload it to your favorite host, get the direct link and paste there.Done!

3.This is the last step and from this step you can option by your own labels,create a HTML/Javscript and paste this code, or you can put right in your source template if you know which place to place:

<div id='nav'>
<ul class='select'><li><a href='#'><b>Home</b></a></li>
<li><a href='#'><b>Joseph Turner</b></a>
<ul class='sub'>
<li><a href='#'>Fishermen at Sea</a></li>
<li><a href='#'>The Shipwreck</a></li>
<li><a href='#'>The Vale of Ashburnham</a></li>

<li><a href='#'>Crossing the Brook</a></li>
</ul>
</li>
<li><a href='#'><b>John Constable</b></a>
<ul class='sub'>
<li><a href='#'>The Hay Wain</a></li>
<li><a href='#'>Brighton Beach</a></li>
<li><a href='#'>Malvern Hall</a></li>

<li><a href='#'>Salisbury Cathedral</a></li>
<li><a href='#'>Weymouth Bay</a></li>
</ul>
</li>
<li><a href='#'><b>Henri Matisse</b></a>
<ul class='sub'>
<li><a href='#'>The Girl with Green Eyes</a></li>
<li><a href='#'>The Dream</a></li>

<li><a href='#'>Woman in Blue</a></li>
<li><a href='#'>The Yellow Dress</a></li>
<li><a href='#'>The Piano Lesson</a></li>
</ul>
</li>
<li><a href='#'><b>Zenplate</b></a>
<ul class='sub'>
<li><a href='http://zenplate.blogspot.com/2008/12/about-me.html'>About Zenplate</a></li>

<li><a href='http://zenplate.blogspot.com/2008/10/contact-me.html'>Need for help</a></li>
<li><a href='http://www.zenplate.blogspot.com/search/label/Jquery%20menu'>Jquery Menus</a></li>
<li><a href='http://www.zenplate.blogspot.com/search/label/css%20menu'>Css Menu</a></li>
<li><a href='http://zenplate.blogspot.com/2009/07/stylish-dropline-menu.html'>How to make this menu?</a></li>
</ul>
</li>
</ul>
</div>

All Done, Now save and join, if you feel there is any problem please leave a comment below, share this tip to your friends and subscribe me see the next great and amazing drop line menu version!

Requirements : CSS
Website: http://www.stunicholls.com/menu/pro_dropline_1.html
Convert to Blogger : Zenplate