WordPress.org

Forums

What's the best easy way to make a drop-down menu? (22 posts)

  1. Dgold
    Member
    Posted 7 years ago #

    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

  2. Dgold
    Member
    Posted 7 years ago #

    Seemed like a simple question for a HTML guru

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

  3. JeremyVisser
    Member
    Posted 7 years ago #

    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.

  4. Dgold
    Member
    Posted 7 years ago #

    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?

  5. MichaelH
    Member
    Posted 7 years ago #

    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.

  6. JeremyVisser
    Member
    Posted 7 years ago #

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

  7. Dgold
    Member
    Posted 7 years ago #

    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...

  8. MichaelH
    Member
    Posted 7 years ago #

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

  9. Dgold
    Member
    Posted 7 years ago #

    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).

  10. Dgold
    Member
    Posted 7 years ago #

    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.

  11. Casper
    Member
    Posted 7 years ago #

    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" />
  12. Casper
    Member
    Posted 7 years ago #

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

  13. Dgold
    Member
    Posted 7 years ago #

    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?

  14. JeremyVisser
    Member
    Posted 7 years ago #

    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>
  15. Dgold
    Member
    Posted 7 years ago #

    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.

    ??

  16. JeremyVisser
    Member
    Posted 7 years ago #

    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>
  17. Dgold
    Member
    Posted 7 years ago #

    Now we're cooking to a boil. The above-example is starting to work for me. Now, I would like to add my Categories. I can make option values for each category by-hand, but then I wouldn't get that pretty little show_count #.

    How can I add wp_dropdown_categories or wp_list_categories into the option value list? I tried putting this in there on a line by itself, didn't work,
    <?php wp_dropdown_categories('show_option_all&show_count=1&echo=1'); ?>

    On my site right now, it's goofy because I have 2 drop-down menus side by side. I want to combine.

    thanks everyone for the continuing help on here

  18. ladynada
    Member
    Posted 7 years ago #

    I'm looking to do the same thing, that is have a drop down for cats and have it link as soon as they select with OUT having to hit a button

    nada

  19. JeremyVisser
    Member
    Posted 7 years ago #

    ladynada, the "drop-down" option in the Categories widget should do what you want. (It uses JavaScript.)

  20. npredford
    Member
    Posted 7 years ago #

    I've been reading this thread and wanted to know if there is a plugin to convert my long 'Archives' list into a Drop Down Menu. I am using the Connections theme.

    Or suggesstion for coding to impelement would be a great help.

  21. Sjroep
    Member
    Posted 7 years ago #

  22. Cathy Tibbles
    Member
    Posted 7 years ago #

    This tool here will create a dropdown menu for you, with either a "go" button or a direct link, and all you have to do is enter your desired url's, and it spits it out for you!
    :)
    btw, I'm searching for a dropdown too for my links/ bookmarks , which isn't native to the wp-link-bookmarks tag. Which, by the way, the above does.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags