How To Add A Drop Down Menu On Tumblr

Click here to get to the step by step guide.

When I started designing / developing one of my Tumblr blogs, the very first thing that I wanted to do is to add a drop down menu that would list the pages on my projects, services, etc.

I’m one of those programmers who first search the solution of a problem on the internet before finding the solution myself. So, I googled “drop down menus in Tumblr” and found an excellent site, namely CSS MenuMaker, which provides the HTML/CSS/Javascript code of already created customizable menus! It is also a good basis for learning HTML/CSS/Javascript as you can play with the values to change the look of your menu.

In this post, I’m going to show you how easy it is to add a drop down menu on Tumblr blog. Let’s get started!

How To Add A Drop Down Menu On Tumblr

1) Getting the HTML/CSS/Javascript code

Go to the site, and select the menu that you like the most. I chose this for my blog, because its color is compatible with the theme of my blog, but you can choose any design you want.

2) Downloading the source code

Under the “Download Source” section, download the “source.zip” in your computer and extract the files in it. You will find three different files: styles.css, index.html and script.js for CSS, HTML and Javascript code respectively.

3) Copying the code to your customization section

Copy the CSS code from styles.css and paste it to your “Custom CSS” section in your Tumblr blog, and copy the HTML code from index.html (only copy <div id=’cssmenu’> section!) and paste it to your “Edit HTML” section, just after the title and description of your blog (this should be in the beginning of <body> tag). You need to change the name of pages and the references to them (Hint: <li class=’active’> is for drop down menu). Following is an example of how your code should look like:

Lastly, copy the Javascript code from script.js and paste it just before the </body> tag in “Edit HTML” section. Save the theme and open your blog in a different tab to test the drop down menu.

Do you use a different way to add a drop down menu on Tumblr blog? Tell me in the comments section below!