SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    Marking menu items that contain sub menus.

    It's weird to to post a thread as an answer and not a questions. I was was fiddling around with CSS3 selectors and had a flashbulb moment for using :nth-child ( and derivatives) to mark menu items that contain sub menus. Basically this would be an alternative to doing something like this: CSS-Test-Your-CSS-Skills-39-dropdown-arrows/page2&

    I haven't seen anyone else using this technique this yet, so I thought I would share it with the rest of the forum. The CSS is VERY minimal and simple, which is why I like it:

    Code:
     .nav li a { display:block; background:orange;  }
     .nav li a:only-child { background: #555; color:#fff }
    The one drawback is that this method is not IE8 or lower friendly. :/

    I have done a complete write up and a quick a demo, for those who may be curious.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Nice work, Ray ... although in this age of small, touch screen devices, these CSS drop downs are becoming obsolete IMHO, as they don't work too well on such devices.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Nice use of :only-child Ray :)

    Had a play around and you can style the item directly rather than by exclusion.
    Code:
    .nav li a { display:block; background:#555;color:#fff  }
    .nav li a:not(:only-child) { background: orange; color:#000}
    You can also use last-child to the same effect:
    Code:
    .nav li a:last-child{background:green}
    Still no IE8 support though.

    Quote Originally Posted by ralph.m View Post
    Nice work, Ray ... although in this age of small, touch screen devices, these CSS drop downs are becoming obsolete IMHO, as they don't work too well on such devices.
    There are a lot of click dropdowns on mobile though as that seems to be the common method for converting wide menus into a single dropdown so Ray's method should still be useful there.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thanks Paul!

    Had a play around and you can style the item directly rather than by exclusion.
    This is true, in practice I am using
    Code:
      .nav li a:first-child:nth-last-child(2):before { ...}
    which actually targets anchors that are followed by (supposedly) drop downs.

    I was avoiding the :NOT idea purposely, but as they say in merry olde England ... in for a penny...

    You can also use last-child to the same effect:
    True.. the flood gates have been opened!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •