View Full Version : Help with simple tree menu please.

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.

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.

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

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.

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. */

1.5 should work, but you can adjust the number.

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.

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.

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

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

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

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