Wednesday, August 27, 2008

Simple guide to add drop-down menu to Blogger.

This post is a step by step guide on how to create a drop down menu for classic Blogger template.

I know there are quite a few guides out there, and mine is just a little different because of the tiny tweak I made. I'm still trying to improve it.

Step 1: To add a drop down menu, place this chunk of code

.dropdown {
font-family: arial;

font-size:10px;

font-weight: 500;

color: #000000;

width:140px;

background-color: #FFFFFF;
}

anywhere in between closing tag.

Step 2: Include this following chunk of code where you want your drop down menu.

<form name="linksmenu">
<select name="url" size="1" class="dropdown" onChange="location = this.options[this.selectedIndex].value;">
<option selected> DISPLAYED TITLE </option>
<option value="ADDRESS OF LINK ONE ">LINK ONE</option>
<option value="ADDRESS OF LINK TWO">LINK TWO</option>
</select>
</form>


(Courtesy of http://blogatech.blogspot.com/2006/05/drop-down-menus.html)


Step 3: Modify "ADDRESS OF LINK ONE" and the rest to the website you want to link to. And "LINK ONE" to a descriptive name you want. Repeat till you complete your list.


At first look, this looks awesome. Perfect. I mean it IS a drop down menu. It works exactly like one.





However this is not the end of your drop down menu.

I tested the drop down menu on my news/current affairs list. Clicking on one of the links will load the site on your current browser. If you click 'Stop' on your browser, and click the title of your drop down menu ' News and stuff ', the blog tries to load something absolutely unspecified because
<option selected> DISPLAYED TITLE </option>

does not specify a value.

In programming, there is no such thing as nothing. And you end up with some silly "Blog not found" error, which is silly since you expect the description to do nothing and just display 'News and stuff'.



Change this line DISPLAYED TITLE to
<option value="" selected> DISPLAYED TITLE </option>

As crappy as typing 2 quotation marks sounds, it tells the server that the value of the option is an empty string, i.e. your drop down menu description just sits pretty and goes nowhere. This will solve the "Blog Not Found" error.

I feel like hacking my blog is my only chance at writing and learning how to code in a new programming language. Whoopee!!!


Links:
Different HTML 5 tags - http://www.w3schools.com/tags/html5_option.asp
Simple Guide to CSS - http://www.w3schools.com/Css/default.asp
Guide - How to display codes in your post



No comments:

Related Posts Plugin for WordPress, Blogger...