2009/07/05

Pro Drop Down- 1 sub Violet Style

Hello everyone , at the previous tip about this menu series-Black&Blue Pro Drop Down with Bulkheads.I am sure you were very amazing and you are hoping for the next versions.And now , at this tip you will see the third menu style-Pro Drop Down Violet version.
Vertical,too and the bright color,good for bright pages.
Are you ready to get it ?

Ready ? let's go to blogger!

1.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
=================================================================== */
.preload1 {background: url(prodrop4/pro_drop4_2a.gif);}
.preload1 {background: url(prodrop4/pro_drop4_2b.gif);}

.prodrop4 {padding:0 0 0 32px; margin:0; list-style:none; height:36px; background:transparent url(prodrop4/pro_drop4_back.gif); position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
.prodrop4 li.top {display:block; float:left;}
.prodrop4 li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#666; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 10px; cursor:pointer;background: url(prodrop4/pro_drop4_0a.gif) no-repeat;}
.prodrop4 li a.top_link span {float:left; display:block; padding:0 20px 0 10px; height:36px;background:url(prodrop4/pro_drop4_0b.gif) right top;}
.prodrop4 li a.top_link:hover {color:#000; background: url(prodrop4/pro_drop4_2a.gif) no-repeat; line-height:25px;}
.prodrop4 li a.top_link:hover span {background:url(prodrop4/pro_drop4_2b.gif) no-repeat right top;}

.prodrop4 li:hover > a.top_link {color:#000; background: url(prodrop4/pro_drop4_2a.gif) no-repeat; line-height:25px;}
.prodrop4 li:hover > a.top_link span {background:url(prodrop4/pro_drop4_2b.gif) no-repeat right top;}


.prodrop4 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.prodrop4 a:hover {visibility:visible; position:relative; z-index:200;}
.prodrop4 li:hover {position:relative; z-index:200;}

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

.prodrop4 ul.sub1 {width:160px;}
.prodrop4 ul.sub2 {width:110px;}
.prodrop4 ul.sub3 {width:90px;}
.prodrop4 ul.sub4 {width:112px;}

.prodrop4 :hover ul {left:0; top:35px; background: #b9d3fb; padding:3px; border:1px solid #3a93d2; border-width:0 1px 1px; white-space:nowrap; height:auto; z-index:300;}
.prodrop4 :hover ul li {display:block; height:20px; position:relative; font-weight:normal; width:auto;}
.prodrop4 :hover ul li a {display:block; font-size:11px; height:20px; line-height:20px; width:auto; padding:0 10px; color:#000; text-decoration:none;}
.prodrop4 :hover ul li a:hover {background:#3a93d2; color:#fff;}



Take a look at the red code, they're the places need to be replaced by the icons in the downloaded file.

2.Save and create a HTML/Javascript,add this code in it:

<ul class="prodrop4">
<li class="top"><a id="home" href="http://zenplate.blogspot.com" class="top_link"><span>Home</span></a></li>
<li class="top"><a id="products" href="http://zenplate.blogspot.com" class="top_link"><span>Sales</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub1">
<li><a href="#" class="fly">Digital SLR Cameras</a></li>
<li><a href="#">Interchangeable Lenses</a></li>
<li><a href="#/">Flash Guns and Accessories</a></li>
<li><a href="#">Professional Tripods</a></li>
<li><a href="#">Filters & Lens Hoods</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a id="services" href="http://zenplate.blogspot.com" class="top_link"><span>Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub2">
<li><a href="#">Printing & Framing</a></li>
<li><a href="#">Photo Editing</a></li>
<li><a href="#">Storage & Backup</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a id="contacts" href="http://zenplate.blogspot.com" class="top_link"><span>Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub3">
<li><a href="#">Support</a></li>
<li><a href="#">Sales</a></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"><a id="shop" href="http://zenplate.blogspot.com" class="top_link"><span>Zenplate</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub4">
<li><a href="http://zenplate.blogspot.com/">Jquery tips</a></li>
<li><a href="http://zenplate.blogspot.com/">Css tips </a></li>
<li><a href="http://zenplate.blogspot.com/">Image tips</a></li>
<li><a href="http://zenplate.blogspot.com/2008/12/about-me.html">About me</a></li>
<li><a href="http://feeds2.feedburner.com/zenplate">Zenplate Feed</a></li>
<li><a href="http://twitter.com/zendersto">Zen Twitter </a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a id="privacy" href="http://zenplate.blogspot.com" class="top_link"><span>Make this menu</span></a></li>
</ul>


Done! What are you waiting for ? Save a join now! Share this to your friends and don't forget to subscribe me to get more great tips!Please offer me a back link if you like my blog.Thank you very much friends!

Requirements: CSS
Website: http://www.stunicholls.com
Demo: http://natureblog-zenplate.blogspot.com
Bring to Blogger : Zenplate

2 comments:

Shelly said...

Awesome. I didn't think that it's possible to have drop down menu within blogger? I have bookmarked your site and will try out the code you provided.

Shelly said...

Awesome! Thanks for the tip. I have bookmarked your site and I will try out the coding you provided. I didn't think it is possible to do what you've. Visiting your blog is a great educational experience for me. Learning coding piecemeal and having human interaction makes it fun as well.

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

 
.