2009/06/12

3subs Drop Down Menu

Menu-The most important element for every blog/web.But to make it appropriate with your site is very hard unless you are quite good at design.But for bloggers who don't know much about designing, they still have the great menu style for their blog.Therefore, this post is published.

This is the combination of horizontal and vertical menu style.It has 3 subs so this menu will be the best choice for blogs which are having many categories,labels.Specially, this is the Jquery menu,too!Like I have introduced you the tips about the Jquery menus(you can view them again here or here)but they just have 1 sub level.So some people
complained to me that those menus don't have enough subs to put all the labels!
If you want to know how it looks, I have a beautiful demo for this menu.



Before you start,click on the button above to download the js file.

1.Now visit your source template, add this css code before the
]]></b:skin> tag:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}



2.Add this code before the </head> tag:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://yourhost.menu.js"></script>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->


Upload the menu.js file to your favorite host(110mb.com,hotlinkfiles.com...)
then paste the link instead of the red code.

3.Save all then create a HTML/Javscript, add this code:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.zenplate.blogspot.com">Zenplate</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://zenplate.blogspot.com">Make This Menu</a></li>
<li><a href="http://twitter.com/zendersto">Twitter</a></li>
</ul>
<br style="clear: left"/>
</div>


Done!Now Save it and join.i hope you will like this.If you have any problem please leave me a comment below and do me a back link.Subscribe my Feed now to get the next cool tips!

Requirements: Jquery
Convert to blogger : Zenplate

7 comments:

ebook indonesia - promosi ebook gratis said...

thank you Mr. Zen

Aron Sora said...

I saw this used on another site and I thought the way this site used dropped down menus was great. Instead of having all the typical widgets that blogs have a front page, they had a few menus for the various sites they where members of. For example there was a Community > Bloggers > Blogcatalog menu combination. This made the site neat and information findable. Also, this menu system always for odd widgets to have their own pages with explanations. Reading over your post, it seems so simple to install this. But, bloggers, please don’t have blank menus when you implement this. I’ll tell you, scrolling having your header and having “example” pop down a couple of times if the fastest way to get me to leave your site (other the music playing automatically). Please, also, check the links in your menu bloggers, I’ve seen broken links to contact pages before. It’s annoying. Nice work on this post!

Richard said...

Thanks for sharing the code buddy, this is really helpful. More power.

Los Angeles SEO

smallfreeanime.blogspot.com said...

Thanks for sharing knowledge my friend.
But I have a little problem.
Would you please show me how to remove all the drop down and right arrow?
Or can you write a new tutorial on it?
I need to remove them.
Thanks in advance.

zendersto said...

Dont need to make a new post about it.Just follow this : Can you see the step 3 of this menu? Now remove it and change it by this code instead:
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.zenplate.blogspot.com">Home</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a></li>
<li><a href="http://zenplate.blogspot.com">Zenplate</a></li>
<li><a href="http://twitter.com/zendersto">Twitter</a></li>
</ul>
<br style="clear: left"/>
</div>

I have remove the drop down parts and the arrows too.
If you still in trouble,leave me a comment.Thank you

smallfreeanime.blogspot.com said...

Thanks Zendersto but what I want is to remove the little arrows image after each menu of the drop menu.
All the down arrows images and the right arrows images.

zendersto said...

The arrows have been removed from that code.If you want to remove the arrows from the source clearly just delete this code at the step 1:

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

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

 
.