2009/05/07

Create 1 sub "Drop down menu" using Jquery

Drop Down Menu- the words are quite familiar to blogger , this bar is very necessary on each blog to contain the labels.Beside, it makes your blog looks professional.Because of its importance , I decided to make the first tip about drop down menu bar.

This is the simple menu bar, so you just have to add some codes to your source code,its advantages are you can change the color and move it to anywhere on your blog.





-To make it , simple log in your blogger account , then go straight to Edit HTML (No check Expand Widget Templates).
-Next add this code before the </head> tag:

<!--jquery-DD-Menu-Starts-->

/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}



<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="Jmenu.js URL" type="text/javascript"></script>
<!--jquery-DD-Menu-Stops-http://zenplate.blogspot.com-->


-Look for the red code above , that is the color code for this menu bar that I have already set it to green, in case you would like to change the color, please click here to get whole color code.
-And the pink code is the link of the js file you have to download above,upload it to your favorite host,I use 110mb.com here.
-Now Save your template, then lets go out to Layout then create a HTML/JavaScript , paste this code in here:

<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://zenplate.blogspot.com">Blogger Help</a></li>
</ul>


Done! Join it now, If you have any problem please leave me a comment below , thanks guys and don't forget to subscribe me, thanks much.
Zen


Requirements:Jquery
Convert to blogger : Zenplate

15 comments:

Amaresh Ch Das said...

Thanks ,

now i want to know as how will i put data into corresponding directories ?

Have alook my blog as per your guidance :-
"http://ittipsandtrics.blogspot.com/"

mail me "amareshchandradas2005@gmail.com"
Thanks in Advance,
-Amaresh

vuluganck said...

@Amaresh Ch Das
I have looked at your blog and I could see it works fine on your blog.But I don't understand what you mean by the words "corresponding directories".Please tell me clearly.

Amaresh Ch Das said...

Now it works fine , thanks buddy,

if i ll place this html code in either left or right side of blog then it's not working fine,.

Will u guide me for this ?

and how to do adsense ?

Thanks in Advance,
-Amaresh

vuluganck said...

I do not try to put the bar at the right or left because the space on right or left is very small that you can not put the navbar there.
I still have 3 kinds of sub navbar and will publish soon.They are better,beautiful and very great.

bala said...

Nice One. If You Tell how to add furthur sub items in the sub menu it will be good. Really i am struggling with that.

vuluganck said...

I have some more kinds of subnav bar with 3 sub level, I will publish all of them within this week, so don't have to change anything of this.

Alert said...

Among the Guides I have come across yours is particulary good and most of all simple and easy.

What I have noticed is that hosting of .js files are becoming a an issue these days(citing bandwidth problem)....Is there any way we can just put the javascripts right inside the blog template itself...I think that will make things a lot easier.

Thanks
Check this out I havve implemented it here... http://nahai.blogspot.com but i'm yet to configure...;) no free time yet :)

vuluganck said...

Dear Alert!
Thanks for you comment on my blog and wish you have a gooday.
I will answer your question that is there any way to put the js directly on blog template and the answer is : No
There is no unlimited host for you and there is no shortcut way to put the js file or any thing can guarantee your file, we have to accept it.

The only way is buying own host and upload to it.
I have to use 100mb.com and it is good for me now,there is no problem when I use free host.

I hope you understand it and I have to say that your blog is very great, it looks very pro and amazing.it is the best blog that Ive ever seen.And I hope I can bring that style to everyone who stop here.Thank you very much, if you still have any question, keep asking me.
Zen

Amaresh Ch Das said...

Thansk yar,

it'w now working fine foe me ...

Have a look my blog,
http://ittipsandtrics.blogspot.com/
Good luck!!

Thanks,
-Amaresh

Idhaya Kaviyam said...

Hi Zen,

I wanted to ask you, why some of the css dropdown menus not operate properly in IE version.For example, i have created a dropdown menus for my blog... http://idhayakaviyam.blogspot.com/, when i try on mozilla firefox, it is normal, but when i operate on IE below 8, the dropdown not shown...how do i fix it?

Idhaya Kaviyam said...

Hi Zen,

Same goes for my background image, when i view in mozilla firefox, ican see my background image but in IE its not appear... i can only see the white background. how do i fix it?

http://idhayakaviyam.blogspot.com/

vuluganck said...

@Idhaya Kaviyam

I have used both firefox and IE and I can not see any problem on your blog.It is very great! Both your menus,too.Maybe you are using the older IE version and not update Windows yet.

If you still in trouble, please take me a photo.I can't imagine it.

Anonymous said...

it's not working for me. iam using blogger's minima template. i got errors. help me out.

zendersto said...

What error? what did it say ?
I have changed a little bit the instruction.You can see it above.Now you wont get any errors.

Anna said...

Hi There

I have implemented this into a site but it appears to be conflicting with the lightbox script that is also running on the page..... any hints on how to fix??

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

 
.