WordPress.org

Support

Support » Themes and Templates » What’s the best easy way to make a drop-down menu?

What’s the best easy way to make a drop-down menu?

  • Yes, I’ve searched the Forums and also Google. There seem to be a lot of conflicting methods… Javascript, DHTML, CSS-only, etc. I tried to follow a CSS-only menu tutorial but it seemed complicated for tossing in a few options, and it produced fancy colors when I’m picturing the default dropdown look.

    What’s the right way for me to create a Simple dropdown nav menu, for my sidebar? Where every option in the dropdown goes to a URI (with my own custom URI’s and the word you select in the dropdown), with a little grey “Go” button.

    Basically I want the same thing as wp-dropdown-cats produces, except I need to add my own links in addition to the categories, which I can link by-hand if the template tag doesn’t work with custom links added.

    Thanks for any tips or code for this

Viewing 15 replies - 1 through 15 (of 21 total)
  • Seemed like a simple question for a HTML guru

    anyone know? i’m stuck. I’ll go search more…

    Might want to have a squiz here. In particular, look at the before and after parameters, which you could change to optionss instead of lis.

    Thanks Jeremy. I would indeed attempt to put Dynamic content, such as my Categories, in a drop down.

    However — html n00b that I am — I don’t even know the basic, regular code for a drop-down.

    Should be something like this,

    <start-dropdown-menu>
    <option>Cool</option>
    <option>Aweseome</option>
    <button='Go!'>
    </end-dropdown-menu>

    Can you clue me in, please? Every tutorial I’m finding online about this wants me to use javascript or pure-css dropddowns, and I swear it should just be old-school HTML for the regular drop-down with the regular Submit button?

    It it is categories you speak of, then the template tag, wp_dropdown_categories may be what you want.

    There’s also a Template_Tags/wp_dropdown_pages.

    Widgets for Recent Posts and Categories offer a dropdown option.

    Ah, is there a wp_dropdown_pages function? I had no idea.

    Thanks guys, but I really just want to know the HTML code for making my own dropdown menu. I understand & agree it would be cool to include dynamic content such as Pages or Categories. But I also want to include my own links, for example my Flickr page, or my other blog, or my wp.com link. Therefore I need to customize the code by-hand, adding more <option>’s of my own.

    Another way of asking this is, let’s say I use wp-dropdown-categories, then how do I add 2 or 3 more custom links (that aren’t categories) into the same dropdown?

    So I just want the most-basic possible code for making a dropdown menu. I think it might be considered “a form” in HTML. Surely I don’t need a javascript just for this?

    Has anyone here ever written code for a basic drop-down menu by hand?

    I thought this would entail nothing more than an opening-and-closing statement in HTML, but the answer is elusive… so far…

    There looks to be some pretty good stuff here:
    http://www.google.com/search?q=html+dropdown+form

    I’ve looked at Numerous of those results, and they tend to recommend using Javascript. Which seems crazy to me.

    There’s links for DHTML, CSS-only dropdowns, Javascript dropdowns, etc…. I just want basic HTML same as 1995 for this…

    I will explore more. Believe me I already read tutorials for 2+ hours on this & asked for help here 2 days ago. I was hoping someone could just give me an answer or a link besides Google (which, yes, I’ve seen Google before, thanks).

    For example…

    This link tells me to use some javascript. Then it has a disclaimer that sounds like spyware or something I don’t want on my site: “Disclaimer
    The code in the example above uses a free service of Idocs to redirect browsers that do not use JavaScript. This service is provided without warranty of any kind, and without any promise that the service will always remain available.”

    Whereas this other link tells me how to make a simple HTML drop-down, but it is only for “Milk, Cheese, Butter” not for URL’s/navigation with a “GO” button.

    That is why I am confused what to do. There are 100’s of links and I can’t find a direct answer, so just hoping someone with HTML experience will have mercy and throw me some code, or tell me this isn’t possible.

    is it just the basics you want?? e.g.,

    <select>
    <option><a href="x">Link</a></option>
    <option><a href="x">Link</a></option>
    <option><a href="x">Link</a></option>
    <option><a href="x">Link</a></option>
    <option><a href="x">Link</a></option>
    </select>
    <input type="submit" />

    note: – you’d obviously want to wrap that in some CSS, but that’s to come..

    Thanks for replying CabGfx.

    I got that part of the code you showed me, above. It makes a dropdown list with a “Submit” button. But the submit button does not DO anything. It doesn’t send the broswer to that hot-link.

    I want to select the Link from the dropdown menu, and press “Go” just like clickin’ a link?

    This is getting a little complicated. For this to work properly, either you need to run a custom PHP script, or require use of JavaScript.

    This is a JavaScript example.

    <select onclick="if (this.value) { document.location = this.value; }">
    <option value="" selected="selected"></option>
    <option value="http://www.google.com/">Google</option>
    <option value="http://en.wikipedia.org/wiki/Aerogel">Aerogel</option>
    <option value="http://jeremy.sunriseroad.net/">The best site in the world</option>
    </select>

    Thanks Jeremy. We’re making progress now.

    How can I do that example you just wrote, PLUS add a working “Go” button, instead of redirecting immediately onclick in the dropdown?

    I don’t know java. I copy-pasted your example and it works, except there’s no button. I can put a button with
    <input type="submit" />
    but it doesn’t do anything, and the dropdown is still on-click.

    ??

    I’m not on my regular copy of Firefox, so I haven’t tested this code yet, but see if this works:

    <select id="dgold_nav">
    <option value="" selected="selected"></option>
    <option value="http://www.google.com/">Google</option>
    <option value="http://en.wikipedia.org/wiki/Aerogel">Aerogel</option>
    <option value="http://jeremy.sunriseroad.net/">The best site in the world</option>
    </select>
    <button onclick="x = document.getElementById('dgold_nav'); if (x.value) { document.location = x.value; }">Go!</button>
Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘What’s the best easy way to make a drop-down menu?’ is closed to new replies.
Skip to toolbar