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


Tumblr Drop Down Menu Code


Drop Down Menu that Change Page as Selection Changes (no button)

  1. Go To Customize Theme >> Edit HTML and Paste the following script right after the <head> tag

  2. <script>
     function goToPage(url)
     {
     if (url != "")
     {
     .open(url);
     }
     }
    </script>


  3. Now paste the following code in your description box:

  4. <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>


  5. 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
  6. Save >> Close


Page Changes when clicking on a Go Button

  1. Go To Customize Theme >> Edit HTML and Paste the following script right after the <head> tag

  2. <script>
    function goToNewPage(dropdownlist)
     {
     var url = dropdownlist.options(dropdownlist.selectedIndex).value;
     if (url != "")
     {
     window.open(url);
     }
     }
    </script>


  3. Now paste the following code in your description box:

  4. <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>


  5. 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
  6. To change what the go button says, change the value parameter for the “input” field.
  7. Save >> Close

You can find more link codes and and different menus for your Tumblr in our Tumblr Codes directory.

5 Responses to "Tumblr Drop Down Menu Code"

Add Comment
  1. Novicetek

    October 30, 2012 at 8:22 am

    added method=”link” to make it work

    Thanks

    [Reply]

  2. sears home appliances

    January 16, 2013 at 1:43 am

    Hmm is anyone else experiencing problems with the
    pictures on this blog loading? I’m trying to determine if its a problem on my end or if it’s the blog.
    Any suggestions would be greatly appreciated.

    [Reply]

    Mr. Tumblr Reply:

    Do you mean tumblring.net or your own blog?

    [Reply]

  3. Josie

    April 4, 2013 at 1:01 am

    its not working! When i click the GO button nothing happens. Help?

    [Reply]

  4. uucce.com

    May 6, 2013 at 10:01 pm

    Excellent write-up. I definitely love this site. Stick with it!

    [Reply]

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>