Tumblr Drop Down Menu Code
Quick tutorial to add a classic Tumblr drop down menu, that is very popular amongst minimalistic blogs. This is not a sliding drop down menu, which requires a different html to be added.
Below you will find 2 versions of the drop down menu, with and without a go button.
How Your Drop Down Menu Should Look Like
Drop Down Menu that Change Page as Selection Changes (no button)
- Go To Customize Theme >> Edit HTML and Paste the following script right after the <head> tag
- Now paste the following code in your description box:
- Replace the “value” parameters with the urls you want to point to for each menu. And also replace the “Link Titles” with the real titles you want for each url
- Save >> Close
<script>
function goToPage(url)
{
if (url != "")
{
.open(url);
}
}
</script>
|
<form> <label><u>S</u>earch Engines</label> <select accesskey="S" onchange="goToPage(this.options(this.selectedIndex).value)"> <option selected>Please select one</option> <option value="http://search.msn.com/">Link Title</option> <option value="http://www.google.com/">Link Title</option> <option value="http://www.search.com/">Link Title</option> <option value="http://www.dogpile.com/">Link Title</option> </select> form> |
Page Changes when clicking on a Go Button
- Go To Customize Theme >> Edit HTML and Paste the following script right after the <head> tag
- Now paste the following code in your description box:
- Replace the “value” parameters with the urls you want to point to for each menu. And also replace the “Link Titles” with the real titles you want for each url
- To change what the go button says, change the value parameter for the “input” field.
- Save >> Close
<script>
function goToNewPage(dropdownlist)
{
var url = dropdownlist.options(dropdownlist.selectedIndex).value;
if (url != "")
{
window.open(url);
}
}
</script>
|
<form name="dropdown"> <label>Search <u>E</u>ngines</label> <select name="list" accesskey="E"> <option selected>Please select one</option> <option value="http://search.msn.com/">Link Title</option> <option value="http://www.google.com/">Link Title</option> <option value="http://www.search.com/">Link Title</option> <option value="http://www.dogpile.com/">Link Title</option> <select> <input type=button value="Go" onclick="goToNewPage(document.dropdown.list)"> </form> |
You can find more link codes and and different menus for your Tumblr in our Tumblr Codes directory.
3 Responses to "Tumblr Drop Down Menu Code"
Add Comment