Jump to content


[Snippet] ListMenu


  • You cannot reply to this topic
190 replies to this topic

#1 jaredc

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,193 posts

Posted 13 September 2004 - 01:16 PM

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.


#2 Guest_rthrash_*

  • Guests

Posted 06 October 2004 - 03:05 AM

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!

#3 Ralph

    Loves Etomite Forums!

  • Admin
  • 6,524 posts
  • Gender:Male

Posted 06 October 2004 - 03:24 AM

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... B)

#4 Guest_rthrash_*

  • Guests

Posted 06 October 2004 - 03:29 AM

I just found this and was coming to report back to the forum. Thanks for your help and beating me to the punch... works beautifully! :D

#5 jaredc

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,193 posts

Posted 06 October 2004 - 12:12 PM

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.

#6 apodigm

    Etomite Forum Newbie

  • Member
  • 41 posts

Posted 11 October 2004 - 07:41 AM

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

#7 jaredc

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,193 posts

Posted 11 October 2004 - 11:31 AM

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

#8 Guest_rthrash_*

  • Guests

Posted 12 October 2004 - 03:04 AM

apodigm, on Oct 11 2004, 02:41 AM, said:

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.

Here's another example of a slightly modified version on a site we're developing for ourselves right now. This menu relies on heavy CSS styling, to avoid the "box-and-border" look (and there is absolutely nothing the matter with that look!): http://www.[DO NOT CIRCUMVENT THE WORD FILTER]/new1/Etomite0.6/index.php

Here's the CSS that controls the styling:
#nav { width: 500px }
#nav ul {
    position: relative;
    left: 20px;
    top: 0px;
    line-height: 45px;
    margin: 0;
    padding: 0;
    list-style-type: none; }

#nav li, #nav ul ul li {
	text-decoration: none;
    display: inline; }

#nav a {
    padding: 3px 16px;
    text-decoration: none;
    color: #9E9E9E }
#nav a:hover {
    color: #808080; }
#nav ul ul {
    position: absolute;
    top: 30px;
    left: 0;
    line-height: 10px;
    border-top: 1px solid #ddd;
    margin: -1px 0 0;
    padding: 3px 0 0;
    width: 100%; }

#here,
.LM_expanded,
.LM-expanded a { 
    background: transparent url(../images/nav.png) no-repeat 1px 2px;
    padding: 0 16px;
    color: #808080; }
.LM_expanded { 
    padding: 0;
    color: #808080; 
    background-image: url(../images/nav2.png); }


It's a work in progress so ignore the inevitable goofy content everywhere.

P.S.
If the above links 404, just look at the root level of the site 'cause it will have gone live! http://www.[DO NOT CIRCUMVENT THE WORD FILTER]/

#9 visa79

    Etomite Forum Newbie

  • Member
  • 23 posts

Posted 13 October 2004 - 05:50 AM

Hi,

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

Thanks,
Visa79

#10 jaredc

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,193 posts

Posted 13 October 2004 - 01:24 PM

I thought for sure I had written a 0.5.3 version, but I can't find it anywhere :angry: - 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 :o

#11 tum_k

    Etomite Forum Newbie

  • Member
  • 2 posts

Posted 15 October 2004 - 08:04 PM

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


#12 Guest_rthrash_*

  • Guests

Posted 15 October 2004 - 08:33 PM

I'm guessing that you should add the following rule without seeing the XHMTL:

#mainMenuBox ul {
    list-style-type: none; }


#13 jaredc

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,193 posts

Posted 15 October 2004 - 08:36 PM

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.

#14 Dean

    Loves Etomite Forums!

  • Admin
  • 4,758 posts
  • Gender:Male

Posted 28 October 2004 - 08:21 PM

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

#15 Ralph

    Loves Etomite Forums!

  • Admin
  • 6,524 posts
  • Gender:Male

Posted 28 October 2004 - 09:59 PM

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... B)

Attached Files



#16 Dimmy

    Etomite Forum Fan

  • Member
  • Pip
  • 109 posts

Posted 28 October 2004 - 10:00 PM

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.

#17 Ralph

    Loves Etomite Forums!

  • Admin
  • 6,524 posts
  • Gender:Male

Posted 28 October 2004 - 10:14 PM

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... B)

#18 Dean

    Loves Etomite Forums!

  • Admin
  • 4,758 posts
  • Gender:Male

Posted 29 October 2004 - 09:00 AM

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... B)

Thanks rad, it looks brilliant! B)

#19 justme

    Etomite Forum Newbie

  • Member
  • 15 posts

Posted 21 November 2004 - 09:36 PM

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

#20 jaredc

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,193 posts

Posted 22 November 2004 - 01:21 AM

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.





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users