Drop down "menu" in html

Discussion in 'HTML' started by John Roenigk, Dec 28, 2004.

  1. John Roenigk

    John Roenigk Guest

    Is it possible using only html to construct a drop down "menu" from
    which one could choose html links to other web pages?

    John R.
    Austin, Texas
     
    John Roenigk, Dec 28, 2004
    #1
    1. Advertising

  2. On Tue, 28 Dec 2004 14:23:52 GMT, John Roenigk <>
    wrote:

    > Is it possible using only html to construct a drop down "menu" from which
    > one could choose html links to other web pages?
    >


    How do you immagine that to work? HTML, being a markup language, only tells
    what something is supposed to be, like a list of links for a menu. It doesn't
    say how it is supposed to render.

    With proper markup and some simple CSS one can get a nice 'drop down' of 'fly
    out' or whatever effect. Doesn't work in some antique browsers though,
    including IE.


    --
    ,------------- PretLetters: 'woest wyf', met vele interesses: --------------.
    | weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html> |
    | webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html> |
    | zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html> |
    `---------------------------------------------------------------------------'
     
    Barbara de Zoete, Dec 28, 2004
    #2
    1. Advertising

  3. John Roenigk

    SpaceGirl Guest

    John Roenigk wrote:
    > Is it possible using only html to construct a drop down "menu" from
    > which one could choose html links to other web pages?
    >
    > John R.
    > Austin, Texas


    Nope, sorry, can't be done.

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
     
    SpaceGirl, Dec 28, 2004
    #3
  4. John Roenigk

    Richard Guest

    John Roenigk wrote:

    > Is it possible using only html to construct a drop down "menu" from
    > which one could choose html links to other web pages?


    > John R.
    > Austin, Texas


    You can. But not without a lot of extra work.
    The text would not show an underlined link as in normal layout.

    http://www.cs.tut.fi/~jkorpela/forms/navmenu.html

    Shows several examples of the ins and outs of doing this.
    See the section titled "client-side scripting".

    Using <li> might be a better approach for links.


    Of course, we'll now hear the numerous whinings about why one should not use
    javascript for the 10% of the population that has it turned off.
    Which is also covered by showing an example using server side cgi.
     
    Richard, Dec 28, 2004
    #4
  5. John Roenigk

    Richard Guest

    SpaceGirl wrote:

    > John Roenigk wrote:
    >> Is it possible using only html to construct a drop down "menu" from
    >> which one could choose html links to other web pages?
    >>
    >> John R.
    >> Austin, Texas


    > Nope, sorry, can't be done.


    NO?

    <option value="http://www.lissaexplains.com/basics.shtml"> Basics</option>

    duhhhhhhhh. Busted!
     
    Richard, Dec 28, 2004
    #5
  6. John Roenigk

    rf Guest

    "Richard" <Anonymous@127.001>

    > <option value="http://www.lissaexplains.com/basics.shtml"> Basics</option>


    And just what will that do without a bunch of javascript behind it or some
    server side processing?. Last time I looked those things were not "only
    html".

    > duhhhhhhhh. Busted!


    Bloody idiot!

    --
    Cheers
    Richard.
     
    rf, Dec 28, 2004
    #6
  7. John Roenigk

    paul Guest

    rf wrote:
    > "Richard" <Anonymous@127.001>
    >
    >><option value="http://www.lissaexplains.com/basics.shtml"> Basics</option>

    >
    >
    > And just what will that do without a bunch of javascript behind it or some
    > server side processing?. Last time I looked those things were not "only
    > html".



    Server side processing is OK.
    How would that work as a drop box?

    <form name="menu-group" action="index.php" method="post">
    <select multiple size="4" name="menu-item">
    <option value="page1.htm"> page 1</option>
    <option value="page2.htm"> page 2</option>
    <option value="page3.htm"> page 3</option>
    </select>
    </form>

    Set the on-click to reload the page somehow...
     
    paul, Dec 28, 2004
    #7
  8. John Roenigk

    SpaceGirl Guest

    Richard wrote:
    > SpaceGirl wrote:
    >
    >
    >>John Roenigk wrote:
    >>
    >>>Is it possible using only html to construct a drop down "menu" from
    >>>which one could choose html links to other web pages?
    >>>
    >>>John R.
    >>>Austin, Texas

    >
    >
    >>Nope, sorry, can't be done.

    >
    >
    > NO?
    >
    > <option value="http://www.lissaexplains.com/basics.shtml"> Basics</option>
    >
    > duhhhhhhhh. Busted!
    >
    >
    >


    Idiot. Did you actually try that? Because it'll slap you in the face and
    scream "IT DOES NOT WORK WITHOUT JAVASCRIPT"

    duh :)

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
     
    SpaceGirl, Dec 28, 2004
    #8
  9. John Roenigk

    SpaceGirl Guest

    Richard wrote:
    > John Roenigk wrote:
    >
    >
    >>Is it possible using only html to construct a drop down "menu" from
    >>which one could choose html links to other web pages?

    >
    >
    >>John R.
    >>Austin, Texas

    >
    >
    > You can. But not without a lot of extra work.
    > The text would not show an underlined link as in normal layout.
    >
    > http://www.cs.tut.fi/~jkorpela/forms/navmenu.html
    >
    > Shows several examples of the ins and outs of doing this.
    > See the section titled "client-side scripting".
    >
    > Using <li> might be a better approach for links.
    >
    >
    > Of course, we'll now hear the numerous whinings about why one should not use
    > javascript for the 10% of the population that has it turned off.
    > Which is also covered by showing an example using server side cgi.


    The OP said in HTML. You've given a Javascript example. Care to try
    again, but this time IN HTML??? :) Like I said, it can't be done in HTML!

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
     
    SpaceGirl, Dec 28, 2004
    #9
  10. John Roenigk

    SpaceGirl Guest

    paul wrote:
    > rf wrote:
    >
    >> "Richard" <Anonymous@127.001>
    >>
    >>> <option value="http://www.lissaexplains.com/basics.shtml">
    >>> Basics</option>

    >>
    >>
    >>
    >> And just what will that do without a bunch of javascript behind it or
    >> some
    >> server side processing?. Last time I looked those things were not "only
    >> html".

    >
    >
    >
    > Server side processing is OK.
    > How would that work as a drop box?
    >
    > <form name="menu-group" action="index.php" method="post">
    > <select multiple size="4" name="menu-item">
    > <option value="page1.htm"> page 1</option>
    > <option value="page2.htm"> page 2</option>
    > <option value="page3.htm"> page 3</option>
    > </select>
    > </form>
    >
    > Set the on-click to reload the page somehow...


    onclick does not exist in HTML. That's a javascript (dhtml) thing.

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
     
    SpaceGirl, Dec 28, 2004
    #10
  11. John Roenigk

    paul Guest

    SpaceGirl wrote:

    > paul wrote:
    >
    >> rf wrote:
    >>
    >>> "Richard" <Anonymous@127.001>
    >>>
    >>>> <option value="http://www.lissaexplains.com/basics.shtml">
    >>>> Basics</option>
    >>>
    >>>
    >>>
    >>>
    >>> And just what will that do without a bunch of javascript behind it or
    >>> some
    >>> server side processing?. Last time I looked those things were not "only
    >>> html".

    >>
    >>
    >>
    >>
    >> Server side processing is OK.
    >> How would that work as a drop box?
    >>
    >> <form name="menu-group" action="index.php" method="post">
    >> <select multiple size="4" name="menu-item">
    >> <option value="page1.htm"> page 1</option>
    >> <option value="page2.htm"> page 2</option>
    >> <option value="page3.htm"> page 3</option>
    >> </select>
    >> </form>
    >>
    >> Set the on-click to reload the page somehow...

    >
    >
    > onclick does not exist in HTML. That's a javascript (dhtml) thing.


    It can be done with a submit button like this:
    http://www.edgehill.net/1/drop.php
     
    paul, Dec 29, 2004
    #11
  12. John Roenigk

    rf Guest

    "paul" <> wrote

    > It can be done with a submit button like this:
    > http://www.edgehill.net/1/drop.php


    Which requires a server side process, presumably PHP, which is hardly, as
    the OP specified, "only HTML".

    --
    Cheers
    Richard.
     
    rf, Dec 29, 2004
    #12
  13. In article <>, Anonymous@127.001 says...
    > SpaceGirl wrote:
    >
    > > John Roenigk wrote:
    > >> Is it possible using only html to construct a drop down "menu" from
    > >> which one could choose html links to other web pages?
    > >>
    > >> John R.
    > >> Austin, Texas

    >
    > > Nope, sorry, can't be done.

    >
    > NO?
    >
    > <option value="http://www.lissaexplains.com/basics.shtml"> Basics</option>
    >
    > duhhhhhhhh. Busted!


    How will that link to another page, RtS?

    --
    Hywel http://kibo.org.uk/
    I do not eat quiche.
     
    Hywel Jenkins, Dec 29, 2004
    #13
  14. John Roenigk schrieb:
    > Is it possible using only html to construct a drop down "menu" from
    > which one could choose html links to other web pages?


    yes it's possible. even without javascript and server-side coding.
    thanks to CSS you can do this. it works very well on latest browser, but
    not IE (which is not to be considered as a 'modern' browser).

    see the famous suckerfish solution:

    http://www.alistapart.com/articles/dropdowns/

    the good thing is: you only need the javascript for IE users, for all
    other users the drop-down will work without javascript (for those
    interested: this is because IE doesn't understand correct CSS as IE can
    only add pseudo elements to the a tag, and not to other tags, such as li...)

    if you want to see a running suckerfish drop-down:

    www.frauen-an-die-maeuse.ch

    HTH

    bernhard
    ---
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Dec 29, 2004
    #14
  15. SpaceGirl schrieb:
    >
    >
    > The OP said in HTML. You've given a Javascript example. Care to try
    > again, but this time IN HTML??? :) Like I said, it can't be done in HTML!


    yes it can be done in html/css only... without the use of javascript
    (people tend to underestimate the power of XHTML/CSS).
    see:

    http://www.alistapart.com/articles/dropdowns/


    bernhard
    ---
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Dec 29, 2004
    #15
  16. Richard schrieb:
    >
    >
    > You can. But not without a lot of extra work.


    oh in fact it isn't that difficult :)

    > >

    > Using <li> might be a better approach for links.


    yes. that's the only way of doing this:
    <ul>
    <li>Remoras
    <ul>
    <li><a href="">Whalesucker</a></li>
    <li><a href="">Marlinsucker</a></li>
    <li><a href="">Ceylonese remora</a></li>
    <li><a href="">Spearfish remora</a></li>
    <li><a href="">Slender suckerfish</a></li>
    </ul>
    </li>
    </ul>


    together with this css code you have a working example:

    ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    li {
    float: left;
    position: relative;
    width: 10em;
    }
    li ul {
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
    }
    li > ul {
    top: auto;
    left: auto;
    }
    li:hover ul { display: block; }

    note: this is raw code... it works on css2.0 compliant browsers (hence
    not in IE.. for IE you need special javascript treatment.. but just a
    few lines will be necessary)

    <

    >
    >
    > Of course, we'll now hear the numerous whinings about why one should not use
    > javascript for the 10% of the population that has it turned off.
    > Which is also covered by showing an example using server side cgi.


    the nice thing about the suckerfish solution is, that it is fully
    accessible even with js switched off, as it is based on a <ul><li> list.
    up to now, this is the best solution to produce a rock-solid drop-down
    menue according WAI accessibility rules.


    bernhard
    ---
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Dec 29, 2004
    #16
  17. John Roenigk

    Kris Guest

    In article <>,
    Bernhard Sturm <> wrote:

    > > The OP said in HTML. You've given a Javascript example. Care to try
    > > again, but this time IN HTML??? :) Like I said, it can't be done in HTML!

    >
    > yes it can be done in html/css only... without the use of javascript
    > (people tend to underestimate the power of XHTML/CSS).
    > see:
    >
    > http://www.alistapart.com/articles/dropdowns/


    It can even be done in HTML. It should be done in HTML. The menu won't
    drop with CSS|JS|YourFavoriteOptionalTechnology, but who cares? Your
    visitors? If it is a site about dropdown menus, perhaps they do.

    --
    Kris
    <> (nl)
     
    Kris, Dec 29, 2004
    #17
  18. John Roenigk

    Kris Guest

    In article <4all.nl>,
    Kris <> wrote:

    > The menu won't
    > drop with CSS|JS|YourFavoriteOptionalTechnology, but who cares?


    'with' should of course be 'without'.

    --
    Kris
    <> (nl)
     
    Kris, Dec 29, 2004
    #18
  19. Kris schrieb:
    > In article <>,
    > Bernhard Sturm <> wrote:
    >
    >
    >>>The OP said in HTML. You've given a Javascript example. Care to try
    >>>again, but this time IN HTML??? :) Like I said, it can't be done in HTML!

    >>
    >>yes it can be done in html/css only... without the use of javascript
    >>(people tend to underestimate the power of XHTML/CSS).
    >>see:
    >>
    >>http://www.alistapart.com/articles/dropdowns/

    >
    >
    > It can even be done in HTML.


    so please: show it tu us. ;-) according to my knowledge it's not
    possible without the use of CSS. (something which has nothing to do with
    JS, it belongs to HTML, and as a visitor you cannot switch it off
    because security is bothering you :)

    It should be done in HTML. The menu won't
    > drop with CSS|JS|YourFavoriteOptionalTechnology, but who cares? Your
    > visitors? If it is a site about dropdown menus, perhaps they do.


    hmm.. I don't understand you point of view.. can you clarify a bit?
    the overall goal should be accessibility. my proposed solution will fit
    perfect into this


    bernhard
    ---
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Dec 29, 2004
    #19
  20. John Roenigk

    Kris Guest

    In article <>,
    Bernhard Sturm <> wrote:

    > > It can even be done in HTML.

    >
    > so please: show it tu us. ;-)


    Just your average menu. Following a main item delivers you to the page
    that contains the collapsed menu. This is, of course, when the effect of
    dropping down and up is unavailable.

    > according to my knowledge it's not
    > possible without the use of CSS. (something which has nothing to do with
    > JS, it belongs to HTML, and as a visitor you cannot switch it off
    > because security is bothering you :)


    Plenty of browsers allow you to shut down CSS rendering.

    > It should be done in HTML. The menu won't
    > > drop with CSS|JS|YourFavoriteOptionalTechnology, but who cares? Your
    > > visitors? If it is a site about dropdown menus, perhaps they do.

    >
    > hmm.. I don't understand you point of view.. can you clarify a bit?


    See above.

    > the overall goal should be accessibility. my proposed solution will fit
    > perfect into this


    --
    Kris
    <> (nl)
     
    Kris, Dec 29, 2004
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    799
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,047
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    514
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    295
  5. Replies:
    3
    Views:
    312
Loading...

Share This Page