SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Hiding some but not all

    Hello!

    I've got some css that I'll be using to hide certain links depending on the user. My css to do this looks like:

    Code:
    <style>
    #menu-main {
    display:none;
    }
    #menu-main.menu li.lms{
    display:block;
    }
    </style>
    Basically, I expect the code to hide everything with an id of menu-main, but not hide the list elements with a class of lms. My corresponding html looks like:

    Code:
    <ul id="menu-main" class="menu">
        <li class="lms"><a>Some Tools</a>
             <ul class="sub-menu">
                 <li><a href="/somelink.php">Menu Item</a></li>
                 <li><a href="/admin/add_instructor.php" >Do something</a></li>
             </ul>
        </li>
        <li><a>Other Tools</a>
            <ul class="sub-menu">
            <li><a href="/somewhere.php">Another menu item</a></li>
            <li><a href="/somewhereelse.php" >Do something else</a></li>
            </ul>
        </li>
    </ul>
    As written above, neither the Some Tools list item nor its subitems appear as expected. Any thoughts would be appreciated.

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    when you hide #main-menu all its children are hidden, regardless of their display value.

    This should work (hide all <li>s but show the ones with class "lms"):

    Code css:
    #menu-main li {
        display:none;
    }
    #menu-main .lms {
        display:block;
    }

    PS. Don't overdo it with selectors, there is only one #menu-main, so you can just use that in css, no need to also add .menu to it, that just forces the browser to do an additional check for nothing. Similarly, since all items with class "lms" are <li>s (right?) there is no need to define li.lms, but just .lms
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That almost did it for me. The problem, however, is that:

    HTML Code:
    <li><a href="/somelink.php">Menu Item</a></li>
     <li><a href="/admin/add_instructor.php" >Do something</a></li>
    are still hidden and I need these guys to show as well. One solution that works is that I can just add a class of "lms" to each of these li's. However, might there be a "cleaner" solution?

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Right, my bad. Make that

    Code css:
    #menu-main li {
        display:none;
    }
    #menu-main .lms,
    #menu-main .lms li {
        display:block;
    }
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect! Thank you for the additional bit of css.


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
  •