www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] CSS selector for navigation items

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    185

    resolved [RESOLVED] CSS selector for navigation items

    After much thought I have come up with a simple way to describe my question on selectors for different navigation items.

    Can someone tell me how to specify a CSS selector for "Menu 1", "Menu 2" and "Sub Menu 1" which do not include any of the other navigation items.

    My requirement calls for different styling (position, font, etc.) on each of the items within the navigation bar.

    I understand how select all the li ul items, but I can't figure out how to specify each one separately from every other ones.

    I have been trying to get the nth-child selector to work, without any luck.

    Code:
     <li>
            <a href="#">Menu 1</a>
        </li>
        <li><a href="#">Menu 2</a>
    
            <ul class="sub-menu">
                <li>
                    <a href="#">Sub Menu 1</a>
                </li>
                <li>
                    <a href="#">Sub Menu 2</a>
                </li>
                <li>
                    <a href="#">Sub Menu 3</a>
                </li>
                <li>
                    <a href="#">Sub Menu 4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
    
        </li>
    Last edited by lkeeney; 05-30-2014 at 11:34 PM.
    Larry

  2. #2
    Join Date
    May 2014
    Posts
    911
    Well, first I'd get rid of that sub-menu class... you usually don't need it.

    If you don't care about IE6, you can use the "combinator" selector ">"

    Let's say that the outer UL is #mainMenu

    Code:
    <ul id="mainMenu">
      <li> <!-- #mainMenu>li -->
        <ul> <!-- #mainMenu>li>ul -->
          <li> <!-- #mainMenu>ul>ul>li -->
    See how that works?

    Which is pretty slick since it means you don't even need extra classes in the markup (which if your CSS .

    The only problem is, again... IE6 support. Even I (a stickler for legacy browser support) have reached the point of no longer bothering to fret over IE6. We kind of need to stop bending over backwards to support browsers that are over a decade old when there are free alternatives that do work.

    That said, if you care about IE6 support you can use the classic child selectors, just as you nest override anything you previously set that you don't want.

    For example:

    Code:
    #mainMenu li {
      float:left;
      display:inline; /* prevent IE margin bugs */
      margin-right:1em;
    }
    
    #mainMenu li li {
      float:none;
      display:block;
      margin:0;
    }
    Which sucks... bad. But if you care about IE it's either do that, or stuff classes on EVERYTHING.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    185
    Thanks for the information.

    I worked on this until late last night trying different things, and finally came up with this method. This allows me full control over each link individually, which I need for this very unusual navigation setup.

    Do you see any problems doing it this way?

    Code:
    <ul id="menu">
        <li id="select1">
            <a href="#">Menu 1</a>
        </li>
        <li id="select2"><a href="#">Menu 2</a>
            <ul>
                <li>
                    <a href="#">Sub Menu 1</a>
                </li>
                <li id="selectsub2">
                    <a href="#">Sub Menu 2</a>
                </li>...............
    By the way, I built the photo frames the client insisted on with CSS. Each one has a dark outer frame, a colored matting, and a white area where the photo would be in a picture frame. In this case the navigation text sits where the picture would be in the frame.
    Last edited by lkeeney; 05-31-2014 at 11:49 AM.
    Larry

  4. #4
    Join Date
    Jan 2014
    Location
    Pakistan
    Posts
    15
    Well i don,t think people are still using ancient browsers like IE6.In USA are people still using IE6?

  5. #5
    Join Date
    May 2014
    Posts
    911
    Quote Originally Posted by ITPRO View Post
    Well i don,t think people are still using ancient browsers like IE6.In USA are people still using IE6?
    More than you would think... In a lot of offices the systems are locked down so users can't install their own software -- and in-house crapplets written in the '90's often use Trident (the IE rendering engine) to render their UI... and upgrading to IE7/newer often breaks those so a lot of companies are more willing to run the security risks and poor support for legacy IE, than they are to take the time to rewrite their little in-house crapplications.

    You also have a lot of businesses and organizations who just don't have the $$$ to update; and they look at developers who won't support them with distrust. The local mental health clinic here, which offers free and scaled payment services to the community is operating on a shoestring -- I do work for them on their ASA/400 mainframe from time to time (at half my normal billing rate just because they do so much for the community) and their entire offices are still running Win98 on PII's, P3's and even a couple K6's... Office 98 does what they need done, so they don't understand why they 'need' to update their browser or OS just because web developers are, and I quote one of their staff: "A bunch of self righteous art ..." -- I'll omit the rest of that statement for the over-sensitive out there.

    You also have windows mobile. While it has ALWAYS been a "also ran" -- particularly with Google and Apple making what RIM and M$ were doing look like outright ineptitude -- Windows CE devices (like the various AMD Geode thin clients), which you'll still find in a lot of public libraries as thin clients (though thankfully being slowly replaced by atom powered boxes) often don't have anything but IE6 or even 5.5 on them. Why? Because Windows CE didn't even get past IE 5.x until Windows CE 6... which would be 2006. Later more modern IE have only materialized for Windows CE/Mobile over the past three years! Which yes, is actually kind of shameful.

    One of my sites I still get a decent amount of IE 5.2 mac traffic -- Most recent version of IE for the Mac, that a LOT of Mac users still refuse to let go of even though it's not been officially supported since 2003. That same site sees a lot of IE6 traffic too - and I think I know why; it's musician oriented, and for a lot of musicians Intel OSX and Vista/Newer OS are crippled on professional audio capabilities; same reason I still get iBrowse users showing up in my logs -- a laugh since that means's Commodore Amiga users; a computer that was last manufactured new in 1996.

    But then that's why semantic markup and graceful degradation should be part of every site design.
    Java is to JavaScript as Ham is to Hamburger.

  6. #6
    Join Date
    May 2014
    Posts
    911
    Quote Originally Posted by lkeeney View Post
    Do you see any problems doing it this way?
    I'd probably lose the ID on the LI as unnecessary, but other than that I don't see any real issues.

    Quote Originally Posted by lkeeney View Post
    By the way, I built the photo frames the client insisted on with CSS. Each one has a dark outer frame, a colored matting, and a white area where the photo would be in a picture frame. In this case the navigation text sits where the picture would be in the frame.
    Which should be simple enough with either a float or flex-box. (the latter only really useful if you don't care about IE9/earlier)
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles