Saturday, April 14, 2007

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.

Blogger Dashboard with list of posts of a blog

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.

Drop-down menu generator

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.

10 comments:

  1. Hi, here's another drop down menu generator if you want one:

    http://www.anniyalogam.com/widgets/dropdown.html

    This menu doesn't get any bigger than
    the text you put in them.

    ReplyDelete
  2. Hi Peter. I'm using a drop-down menu by Dynamic Drive but it seem that, it is not clickable when I'm using IE7. One reader told me it is clickable in IE6.

    I know you're a scienctist and not a techie, any thought how to overcome it, to make it clickable in all browsers?

    ReplyDelete
  3. Hi Azman,

    Are you referring to this one: Drop-down menu with description?

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  4. Hello Peter,

    I've use it and a little bit confused if I've a lot of post. So how about I've about 95 posts can I use it?
    I hope to hear from you soon about how to manage it.
    Thank you.

    ReplyDelete
  5. Hi!

    Do you know if there is a way to create this type of navigation menu for blogger templates? Please see this menu bar here....http://chelseabeckphotography.com/blog/
    (I know that this one is a wordpress blog)

    Is there any HTML code for this type of menu drop down?

    Thank you for your time!
    Chelsea

    ReplyDelete
  6. That original drop-down generator idea worked well when I pasted it into a TEXT gadget today.

    As for the limited number of lines, that's not really a problem. Once you've pasted the output from the generator, click on the gadget window's "Edit HTML" option and look at the code. Each link and label are surrounded by *option*-*/option* tag pairs, like this:

    *option value="http://www.htmlgoodies.com/"*HTML Goodies*/option*

    [Note: I had to replace the < and > in each tag with *'s for this post!]

    Copy an option-tag-pair line like this to clipboard. Paste it into the edit window (after the last existing tag pair). Replace the copied URL and label with a new URL and label for another drop-down link. Repeat as needed!

    ReplyDelete
  7. I tried to drag it to the footer, but for some reasons, the widget refused to be dragged. . Each link and label are surrounded by *option*-*/option* tag pairs.


    pull up banners

    ReplyDelete
  8. Thanks for providing your kind information...
    Pull Banner

    ReplyDelete
  9. We can get lot of information thought this site.very nice post.Thanks...!!!!

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics