190 replies to this topic

[jaredc]

File Name: ListMenu
File Submitter: Dean
File Submitted: 18 Mar 2007
File Category: Snippets

ListMenu, by JaredC

Pretty flexible navigation menu, displayed as nested lists, styled as you please.

VERSION HISTORY

** 0.6f **
- Fixed bug that caused incorrect behavior on cached pages. (Replaced documentObject['id'] with documentIdentifier).

** 0.6e **
- Added ability to include description
- Added longtitle as link titles if avaialble
- Added CSS documentation to config portion of snippet

** 0.6d **
- Added config option to change style on alternating list items

** 0.6c **
- Made compatible with standard Etomite and Etomite with MODx2

** 0.6b **
- added several snippet variable options
- added ability to select start node of menu (ONLY thru snippet variable)

** 0.6a **
- original

Click here to download this file

Edited by Dean, 18 March 2007 - 07:14 PM.

[Ralph]

rthrash, on Oct 5 2004, 11:05 PM, said:

I'm having some problems with the remove whitespace for IE turned to false.

The menu works as expected with it set to on. However, when set to false, extra stuff gets inserted into my menu. It's putting lowercase Ns between the LI elements.

Otherwise very, very cool!

I believe that you can correct this problem by changing the line of code:

$ieSpace = ($correctForIE)? "" : "n";

to be:

$ieSpace = ($correctForIE)? "" : "\n";

For some reason the Snippet Library removes the slash from newlines...

I hope this helps...

[jaredc]

rad14701, on Oct 5 2004, 11:24 PM, said:

For some reason the Snippet Library removes the slash from newlines...

Thanks Rad for getting to this before I could. I thought that problem got fixed a while back - I guess not. Rats!

** goes away to look for solution / grumbles about the auto-posting of "I have updated this snippet" feature **

Well, it probably comes as no surprise that if you include two backslashes "\\" when you post or edit a snippet, that the first escapes the second. Then it appears correctly in the library for others to copy and paste. This isn't an ideal development quirk to work around, but it does work... for now.

[apodigm]

Jared,

One thing that seems to have been lost in the forums is the posts on how your css customizations looked.

I've been trying to write some CSSs using the built in classes that you have already included in the code, but I can't seem to find the right combination of commands.

Perhaps you can post some example css configurations for the menu.


Thanks,
Apodigm

[jaredc]

Other examples:
*Rad has a modifed version on the bottom left of his site

[visa79]

Hi,

Is it possible to use this ListMenu snippet in etomite 0.5.3? What should I do to get it work?

Thanks,
Visa79

[jaredc]

I thought for sure I had written a 0.5.3 version, but I can't find it anywhere - so I don't have it to pass along to you. Because the snippet API differences between the 0.5.x and 0.6.x are fairly substantial, it would require some work to retrofit this snippet. And since I don't have a functioning version of 0.5.3 any more, I won't be able to do it.

There are a lot of changes that would have to be made. A LOT. Sorry

[tum_k]

In wich css tag must I include "list style type: none"?

/* ListMenu Snippet */

#mainMenuBox {
padding: 0px;
margin:	0px;
height: 100%; 
border:	1px solid #003399;
background: #fff url(../../manager/media/images/bg/section.jpg) no-repeat top right;
}

#LM_level_1, #LM_level_1 ul, #LM_level_1 li {
padding:0px;margin:0px;
}

#LM_level_1 a, #LM_youAreHere {
padding: 4px;
margin: 6px;
margin-bottom: 2px;
margin-top: 2px;
display: block;
border: 1px solid #FFFFFF;
background: #fff url(../../manager/media/images/bg/section.jpg) no-repeat top right;
}

LM_level_1 li a:hover, #LM_level_2 li a:hover, #LM_level_3 li a:hover {color: #821517;background: #fff url(../../manager/media/images/misc/buttonbar.gif) repeat-x top;border: 1px solid #003399;}
#LM_level_2 li a, #LM_level_2 li #LM_youAreHere {padding-left:8px;}
#LM_level_3 li a, #LM_level_3 li #LM_youAreHere {padding-left:16px;}

#LM_level_1 li span#LM_youAreHere {
font-weight:bold;
display: block;
border: 1px solid #FFFFFF;
background: url(../../manager/media/images/bg/section.jpg) no-repeat top right;
}

The styles ul and li are defined somewhere else in the document...

li {
	padding: 0px;
	margin: 6px 0px 0px 15px;
	list-style: disc outside url("../../manager/media/images/misc/li.gif");
}

ul {
	margin: 0px 0px 0px 20px;
}

[jaredc]

I'd try just putting it in this one:

#LM_level_1, #LM_level_1 ul, #LM_level_1 li {
padding:0px;margin:0px;
list-style-type:none;
}

You could do it specifically on only the li by doing a separate declaration, but this is a little less work.

[Dean]

jaredc, on Oct 11 2004, 12:31 PM, said:

Rad has a modifed version on the bottom left of his site

RAD, is the Snippet Code available that you have used to generate your cool graphical menu?

Regards,
Dean

[Ralph]

deanstev, on Oct 28 2004, 04:21 PM, said:

RAD, is the Snippet Code available that you have used to generate your cool graphical menu?

Regards,
Dean

Yes, here is the code I am using on my site... I'm not sure of exactly how few or how many changes I have made to the original as I haven't compared the two... I don't think there are many changes, however...

Attached Files

•  ListMenu.php   5.95K   175 downloads

[Dimmy]

deanstev, on Oct 28 2004, 10:21 PM, said:

RAD, is the Snippet Code available that you have used to generate your cool graphical menu?

Regards,
Dean

That part of Rads site is not working at the moment...
would love to see it.

Would be nice to get focused on making cool multy level horisontal menu's
without the need of a external javascript thing.

[Ralph]

Dimmy, on Oct 28 2004, 06:00 PM, said:

That part of Rads site is not working at the moment...
would love to see it.

Would be nice to get focused on making cool multy level horisontal menu's
without the need of a external javascript thing.

Are you referring to the Milonic Menu that used to be towards the bottom of the page...:?: I only modified existing code for another member... :betterwink: I do have the modified code kicking around and will post it in the downloads section of my site...

[Dean]

rad14701, on Oct 28 2004, 10:59 PM, said:

Yes, here is the code I am using on my site... I'm not sure of exactly how few or how many changes I have made to the original as I haven't compared the two... I don't think there are many changes, however...

Thanks rad, it looks brilliant!

[justme]

I am using the ListMenu V.0.6a and it does everything just nicely. My problem is when I view it with IE 5.5.

for some reason the bottom level showing the child menus begin halfway over the page. I've tried changing my css in all kinds of ways to no great success.

Does anyone know if this is something that I need to change in the snippet itself? I don't want to futze it up for no reason but will if I need to. Just wondering before I start that it isn't a missed coma or something simple like that.

It works fine on my primary browser firefox 0.8 just not in IE.

You can see the offending menu here

http://66.197.162.85/~entwoodn/

Just click on a menu item other than home to bring up a sub menu. that is where the error occurs.

My problem is that I can do a css menu of different styles just fine using straight code, it's incorporating it into the snippets that has me confused.

thanks in advance

[jaredc]

Well the good news is that you don't have to recode any of the snippet. The bad news is, you'll have to track down the CSS bug in IE that is causing the error. I just hate working with CSS in IE because of the numerous bugs and inconsistencies. But that looks like the problem to me, as the code that is being output is good code.