1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Simple Clickable Drop-down Menu

Discussion in 'CSS' started by turtile, Mar 9, 2015.

  1. #1
    Hi,

    I'm trying to create a simple clickable drop down menu. The reason is because tablet viewports are moving into desktop viewports (and there are many desktop with touchscreens).
    SEMrush
    I've seen > used. Anywhere that explains how it works? Is there a better way that works on all devices?

    Basically I want:

    <nav>
    <ul>
    <li><a href="#">Link</a></li>
    <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    <li><a href="#">Link</a></li>
    <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    </ul>
    </nav>
    Code (markup):
    Thank you for any help.
     
    turtile, Mar 9, 2015 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #2
    Well, setting aside the HTML 5 code bloat with the idiotic redundant NAV tag (not a fan in case you couldn't guess) it would first help if you had VALID markup -- your lack of indentation in your code block probably being a contributor to that. A UL cannot be the child of a UL, you need it inside an LI. I ASSUME those are your flyouts, in which case I SUSPECT your markup should be more like this:

    <ul id="mainMenu">
    	<li>
    		<a href="#">Link</a>
    		<ul>
    			<li><a href="#">Link</a></li>
    			<li><a href="#">Link</a></li>
    		</ul>
    	</li><li>
    		<a href="#">Link</a>
    		<ul>
    			<li><a href="#">Link</a></li>
    			<li><a href="#">Link</a></li>
    		</ul>
    	</li>
    </ul>
    Code (markup):
    When you say ">" I assume you mean the CSS 2 "child selector" -- which basically means targeting the direct children of the element instead of ALL children. Using the menu code I just posted, "#mainMenu>li" would target the two outermost LI, but none of the LI inside the UL inside the LI, while "#mainMenu li" would target ALL LI inside #mainMenu.

    Used to be we avoided using the child selector because IE6 didn't support it. If you don't care about a decade and a half old browser, go ahead and use it now... though really in most cases you shouldn't actually need it unless you're getting too complex for your own good.

    ... like making clickable dropdown menu garbage in the responsive layout age -- usually a case of trying to shoe-horn too many links into a menu and pissing on accessibility. Best way of doing it? DON'T!
     
    deathshadow, Mar 10, 2015 IP
  3. turtile

    turtile Member

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    46
    #3
    It was just a quick (bad) example! I'm editing Wordpress's output. The client wants it no matter what... So the child selector will work? I don't have any iOS tablet devices or desktop touch screens to test it on.
     
    turtile, Mar 10, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #4
    You shouldn't need one - use chrome's emulation modes to set the screen size... you won't be able to do fancy gestures, but if all you are testing is a "click to open" you won't need that.

    ... and yeah, as long as you don't care about IE6/earlier, go ahead and use the child selector, though you shouldn't actually NEED to use it if your markup makes any sense whatsoever.

    Though you said turdpress, so sensible markup is either out the window entirely or you're stuck spending the next six months trying to bend that disaster over the table and make it your *****.
     
    deathshadow, Mar 10, 2015 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #5
    I'm no fan of wordpress either, but it's not THAT hard to make it output decent code - it just involves making your own template (overriding built-in functions in your own functions.php) and also, depending on which plugins you use, overriding those too, since they more often than not output horrible, horrible code.
     
    PoPSiCLe, Mar 10, 2015 IP
  6. turtile

    turtile Member

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    46
    #6
    How would I change the markup so that the first touch brings out the flyout without executing the link?
     
    turtile, Mar 10, 2015 IP