Making Pull Down Menu

A blog reader asked (desperate) for a way to create a pull down menu for his posts of recipes. I have got good and bad news for him. The good news is that there is a simple way to get a drop-down menu. Use Drop-down Menu Generator, which I used to generate a script to paste into a HTML/Javascript Page Element. The bad news for me is that the width of the drop down menu is dependent on the description (post title or anchor text) you put for the link to the post. I used it to do a drop-down menu for the posts in this blog: Food, Drinks and Recipe. It is at the top of the main column and will be displayed in the main page as well as the individual post pages (permalinks). I had originally planed to put it in the sidebar, but because the post titles were long, the width of the drop-down menu generated was too wide for the sidebar, so I had to put it above the main column. If you want something similar, you will need to know how to add an extra "Add a Page Element" for the main column by referring to this post: How to add AdSense ads, search box, "sticky post, etc. above the main column (click "BACK" button to get back to this page).

The bad news for him is that there is only a limited number of posts he can put in the drop-down menu, and I doubt that would be sufficient for his long list of recipes. However, I suppose this drop-down menu can still be useful for making drop-down menus like for blogs, etc.

If he is still interested in doing it, this is how to proceed to generate the drop-down menu. For this task, it will be helpful to use a browser like FireFox which have tabbed browsing. In one tab, log into the Blogger account and click "POSTS" for the relevant blog. A page with with a list of posts will appear. Right click on "VIEW" on one of the post and select "Copy Shortcut" to copy the post URL into the clipboard.



Open another tab and surf over to Drop-down Menu Generator. Paste the URL into the "Link URL" field. Then type the title of the post into the field for "Text shown". Continue the same process until you have entered all the post you want to appear in the drop-down menu, or you run out of fields to paste the Link URL.



Click on "Generate" and the script will be generated into the window below. Highlight all the script, copy into clipboard, then in the tab for the Blogger account, paste it into a HTML/Javascript "Add a Page Element" window and save.

Update 22 April, 2007: Phil provided an another drop-down menu (see comments). He gave a link to Drop-down menu creator by Hackosphere. I tried putting a drop-down menu on this blog Articles on Beauty. What you have to do is to provide a title for your drop-down menu, type the title of the link, the URL of the link, then click "Add Option". Make sure you don't click on "Add Option, or the link will appear more than once in the drop-down menu. To add another link, repeat above, and in this way, you can add as many link as you want - an advantage over the drop-down menu described in the post above. However, the drop-down menu width will expand with the text that you add, and it doesn't generate a script for you to paste into an "Add a Page Element" but add the widget direct into your Blogger account (you can choose the blog if you have more than one). Plus apparently, it add the widget to the first section in the template, which in the case of Articles on Beauty was the left sidebar. It ended up at the top of the left sidebar and was too wide for the sidebar. In the Layout, I tried to drag it to the footer, but for some reasons, the widget refused to be dragged. I had to delete the drop-down menu. There is further disadvantage. Even after deleting the pull down menu, Page Elements cannot be dragged and dropped. Looks like I will have to redo the whole template for Articles on Beauty again.