Results 1 to 10 of 10

Thread: Help with simple tree menu please.

  1. #1
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help with simple tree menu please.

    1) Script Title: simple tree menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

    3) Describe problem: How come the expandable & collapsable items are always centered wherever you put them? Is there some simple way of fixing this up? There's no center code on my page(s) with this. Maybe I'm just overlooking the obvious. Great script, just want to make it go left. Thanks in advance.

    also, the Expand all and Contact (should say Contract) all aren't centered, but the menu is? Help.
    Last edited by Kelly_Wood; 06-06-2007 at 09:23 PM. Reason: forgot something

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Add this to the css:

    #treemenu1 {padding-left:0; margin-left:0; text-indent:-1em;}


    The padding-left and margin-left move the ul to the position where it would be with bullets. Since the style calls for no bullets, there's still a space. But you can use text-indent to position the list as far left as you want.
    Last edited by Veronica; 06-07-2007 at 03:17 AM.

  3. #3
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks

    Thanks, works great.

  4. #4
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default One more question if I may

    Thanks again for the help.

    As seen in the attached pic, how might I move over these children a bit.

    I"m a bit lost here. I'm a designer, not a guru coder.

  5. #5
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That would be in the submenu ul

    .treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
    display: none; /*Hide them by default. Don't delete. */
    text-indent:-1.5em;
    }

    1.5 should work, but you can adjust the number.

  6. #6
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ok, well.

    Thanks again for the response, but that seems to only move the text left (menu items), not the pictures associated with them as seen in the pics if I can attach them.



    Thanks if you can help more.
    Last edited by Kelly_Wood; 06-07-2007 at 07:26 PM. Reason: Adding examples.

  7. #7
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Can you send the exact code you're using or post a link? I guess I'm not sure which pictures you're trying to move, or how you have it set up right now.

  8. #8
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Here

    Here's another pic or two and files to help explain.
    Last edited by Kelly_Wood; 06-07-2007 at 09:32 PM. Reason: adding zip file of files used and another pic.

  9. #9
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OK, try this:

    Code:
    <style>
    #treemenu1 {padding-left:0; margin-left:0; text-indent:10;}
    
    .treeview ul{ /*CSS for Simple Tree Menu*/
    margin: 0;
    padding: 0;
    }
    
    .treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
    background: white url(list.gif) no-repeat left center;
    list-style-type: none;
    padding-left: 10px;
    margin-bottom: 3px;
    }
    
    .treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
    background: white url(closed.gif) no-repeat left 1px;
    cursor: hand !important;
    cursor: pointer !important; 
    }
    
    
    .treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
    display: none; /*Hide them by default. Don't delete. */ 
    }
    
    .treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
    cursor: default; 
    }
    </style>

  10. #10
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Good deal

    Thanks, that's it. Works great. Thank you thank you.

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
  •