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: Blogger tricks
Can we customize colors? I am not a geek...
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
Hey this is a cool blog - I can actually learn to do new things!!!
Really useful info! My blogroll is getting very long and I was looking for a solution! So helpful of you thanks!!!
Tisha
thanks nmotb n tisha... stay in touch
Great code, thanks!
Griffin I hav.nt written that code...
gud job
This is exactly what I have been looking for...Thanks.
Rugjeff
who to get that in blogger beta?
hi arpit
thanks for commenting on my blog..
ya sure we can exchange links.
Keep in touch
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.