Its technical, Its bliss.... So here is Technical Bliss....

Create a drop down menu in you blog or webpage

By Arpit On Wednesday, December 13, 2006 At 4:00 PM






If you want to create a drop down menu in your blog or site, here is a small javascript code. (Check out my blogroll section for a working example of this code)

While placing this code on your blog/site you have to follow two steps.

Step 1: Copy the following code in the section where you want to create the drop down menu

<!--code 1 copy start here-->

<form name="form2">
<select name="select2" size="1" style="background-color:#FFFFFF" onChange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')">

<option selected value="http://link1.com/" target="newwin">link1</option>
<option selected value="http://link2.com/" target="newwin">link2</option>
<option selected value="http://link3.com" target="newwin">link3</option>
<option selected value="">My Blogroll</option>
</select>
<br>
</br>
<input type="button" value="Go"
onClick="jumptolink(document.form2.select2)"><br>
<span id="textcontainer2" align="left" style="font:italic 13px Arial">
</span>
</form>

<!--code 1 copy ends here-->


In the above code you can customize the links by palcing your link URL in place of link1.com link2.com and link3.com

also if you dont want to open your link in new window you can simply remove target="newwin"
i.e instead of line
<option selected value="http://link1.com/" target="newwin">link1just write
<option selected value="http://link1.com/">link1
The lable dispayed is My Blogroll. Change that in code if you want something else there.

Step 2:
Place the following part of code at the end of your blog/site template just before the <html> tag.


<!--code 2 copy starts here-->
<script type="text/javascript">



//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE

/// You may define additional text arrays if you have multiple drop downs:
var thetext2=new Array()
thetext2[0]="description of site 1"
thetext2[1]="description of site 2"
thetext2[2]="description of site 3"
thetext2[3]=""

// Now, see 2) below for final customization step

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}

function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}


displaydesc(document.form2.select2, thetext2, 'textcontainer2')

<script>

<!--code 2 copy ends here-->

In the above code look for the text
thetext2[0]="description of site 1"
you can enter a brief discription of site here.

To add more sites in drop down menu
1) Add line
<option selected value="http://link.com/" target="newwin">link</option>
in code 1

2) Add line
thetext2[?]="description of site 3"
in code 2 and replace ? by next no.

If you have any problem regarding this code feel free to comment here.. i will try my best to solve your problem


P.S. As my blog visitors have pointed out, the above code will not work with blogger beta. To implement a drop down menu in blogger beta, see the related post here
this code is taken from dynamicdrive

Related Post(s):
Create a drop down menu for blogger beta



Labels:




>> Add your comments | Add to Technorati | Suscribe to feed | Skip to the Top <<






 
Anonymous Tech Bee Says:

Can we customize colors? I am not a geek...

 
 
Anonymous Arpit Says:

yes sure... you can customize the colour.. in the part1 of the code search for the line
<select name="select2" size="1" style="background-color:#FFFFFF"

now change the colour code (which is here #FFFFFF)to the colour you like.

the colour codes are avaliable at this site http://www.computerhope.com/htmcolor.htm

 
 
Anonymous Anonymous Says:

Hey this is a cool blog - I can actually learn to do new things!!!

 
 
Blogger Tisha! Says:

Really useful info! My blogroll is getting very long and I was looking for a solution! So helpful of you thanks!!!

Tisha

 
 
Anonymous Arpit Says:

thanks nmotb n tisha... stay in touch

 
 
Anonymous Griffin Says:

Great code, thanks!

 
 
Anonymous Arpit Says:

Griffin I hav.nt written that code...

 
 
Anonymous amanda Says:

gud job

 
 
Anonymous Anonymous Says:

This is exactly what I have been looking for...Thanks.

Rugjeff

 
 
Blogger Sumesh Premraj Says:

hey check http://digitol.blogspot.com for tips on Blogger, like customising, ad optimisation etc.

 
 
Anonymous Mizzkit Says:

who to get that in blogger beta?

 
 
Anonymous abhishek bhatnagar Says:

hi arpit

thanks for commenting on my blog..

ya sure we can exchange links.

Keep in touch

 
 
Blogger william Says:

wow that is very good. I am web designer. I have create My blog. I want to put dropdown menu in the blog. From here I have learn that how to add dropdown menu in the blog.

 
 


Looking for Something Else




Technical Bliss is now MeetArpit.com



Email Subscription


    Whenever this blog is updated, you will get it in your mail box. Your email id is completely safe.

    Enter your email address:



    Add this blog to your technorati favorite.
    Add to Technorati Favorites

Previous Posts



My Reader's Community



Feed and Bookmarks

My Blogroll


Credits


    BLOGGER
    Original template design by Arcsin
    pingoat_11.gif



More Me

Blog Poll



© 2007 Technical Bliss | About Us

Disclamer:
All the tricks, tips and hacks provided on this blog are correct up our knowledge. We dont take any legal or moral responsibilty of the damage arising due to use of information provided here.


^Back to Top of this Page^



Creative Commons License
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.