Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Nov 2012
    Posts
    2
    Member #
    33830
    I am trying to create a drop down menu without using the list elements. For example, let's say my current menu looks something like this:
    <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="tool1.html">Tool1</a>
    <a href="tool2.html">Tool2</a>
    <a href="tool3.html">Tool3</a>
    </nav>
    and I want to place all of my tools in a sub menu that only pops up when a main menu item, Tools, is hovered over. I am trying to do this using only CSS and HTML, with no list elements such as <ul>, <li> etc.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I hafta ask: Why?

    I suppose you could use other less semantic elements, like nested divs or spans. In the end, you'd be doing the same thing with less semantic markup.
    AlphaMare likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Nov 2012
    Posts
    2
    Member #
    33830
    Quote Originally Posted by Ronald Roe, post: 244055
    I hafta ask: Why?

    I suppose you could use other less semantic elements, like nested divs or spans. In the end, you'd be doing the same thing with less semantic markup.
    So how would you create the drop down menu using other elements such as div or span?

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    In the end, you're going to need some nesting, since the a submenu is nested inside of a main menu anyway (I'm not talking strictly HTML, but as a more general application of logic). So you might as well use unordered lists.

    I think I get why you'd want to do it without lists (reduced code), but in this case I don't see a logical way to do that whereby the child links (in this case, your tool links) are associated with their parent links.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by [NGW] Mark, post: 244056
    So how would you create the drop down menu using other elements such as div or span?
    Like GAME said, you'd have to nest them in the same way you'd nest the lists. If this is a reduced code thing, you're really only talking about a few hundred bytes worth, if that. One <ul> is <4 bytes. A closing tag, maybe 4. It's more of a pain than it's worth.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Doing it they way you were describing is not worth your time. The reason no one really knows how is because its very unconventional. I never even hear of anyone trying this...
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Not possible ( yeah, it's a challenge if you want )... But technically, without using list elements and spans to define what's what.... There's no way to style it with CSS to function or use the hover descriptors.

    Sure, you can use JavaScript to do this... But if your intention is to reduce code, the JavaScript to write out your menu and the functions are gonna be massive, and utilize much more code than just using spans and divs.

    If it can be done without .... This guy would have done it already http://cssplay.co.uk/menus/

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Webzarus, post: 244124
    There's no way to style it with CSS to function or use the hover descriptors.
    Exactly. One way or another, you'll have to have some sort of HTML hierarchy in order for child and/or descendant selectors to work. That's why we use lists for these things. They're a built-in HTML hierarchy system. And, as WZ said, you absolutely could do this with JS. Add classes to the links and use JS to select and hide/show what you want. There's a bigger problem with that than just extra code, though: It'd be a huge pain in the *** to manage. One small change would cause so much work, you'd be pulling your hair out just thinking about doing it. Changes to a CSS-based setup would be as simple as adding a new list item, and if necessary a nested list for drop down items.
    TheGAME1264 likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:10 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com