Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,980
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts

    Nested List item control

    Hey guys, been awhile.
    I have a list, we'll make it simple:
    Code:
    <ul>
      <li>Top Item 1
        <ul>
          <li>Sub Item 1 A</li>
          <li>Sub Item 1 B</li>
        </ul>
      </li>
    </ul>
    <ul class="activeLink">
      <li>Top Item 2
        <ul>
          <li>Sub Item 2 A</li>
          <li>Sub Item 2 B</li>
        </ul>
      </li>
    </ul>
    I want it to look sort of like this:
    Code:
        Item 1    Item 2
    And if there is a activeLink class found, the sub items to be displayed below:
    Code:
        Item 1    Item 2
          Sub Item 2 A    Sub Item 2 B
    Almost got it to work, except the sublinks appear with relation to the top heading (so the Item2 sublinks are indented to below the Item2 item). That and I haven't removed the ul indentation yet, but I'm not so worried about that atm.
    As well, I use a new unordered list between each primary item, would this be easier to simply drop it and apply the activeLink class to the list item itself? The current css code in use is like so:
    Code:
            #modLinks ul li { display: inline; float: left; list-style: none; position: relative; margin: 0px 15px; padding: 0px;}
            #modLinks ul li ul { display: none;}
            #modLinks ul.activeLink li ul { display: inline; border: 2px inset; padding: 0px;}
            #modLinks ul li ul {clear: both; float: left; width: 100%;}
            #modLinks ul li ul li { margin: 0px; padding: 0px 15px; float: left;}
    Any ideas? I don't want to do extensive redesign of the lists, but can do minor changes.
    Thanx in advance mates!
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    One list, absolute positioning

    I'd strongly advice you to unite the top list items in a single list and apply the activelink class to the active list item itself as you suggested.

    If you want the sub lists to appear in the same spot regardless of which top level item is active, you could make use of absolute rather than relative positioning; the top level list could function as a positioning parent by making it positioned itself (i.e. relatively positioned with no offsets).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,980
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    Thats sort of the idea I was thinking of, but I wasn't certain how the absolute would work in relation to the parent.
    I will alter my lists, thanx for the advice ronald! I'll be back if I have any other troubles
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 


  •  

    Posting Permissions

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