PDA

View Full Version : Help with simple tree menu please.



Kelly_Wood
06-06-2007, 09:21 PM
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.

Veronica
06-06-2007, 11:53 PM
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.

Kelly_Wood
06-07-2007, 01:56 PM
Thanks, works great.

Kelly_Wood
06-07-2007, 05:25 PM
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.

Veronica
06-07-2007, 06:46 PM
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.

Kelly_Wood
06-07-2007, 06:58 PM
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.

Veronica
06-07-2007, 08:28 PM
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.

Kelly_Wood
06-07-2007, 09:04 PM
Here's another pic or two and files to help explain.

Veronica
06-07-2007, 10:58 PM
OK, try this:



<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>

Kelly_Wood
06-08-2007, 01:24 AM
Thanks, that's it. Works great. Thank you thank you.