next »

[sottwell]

In case anybody is interested, I modded ListMenuX to allow for javascript-enabled dropdowns, a-la Suckerfish Dropdowns as found here:

http://www.alistapart.com/articles/dropdowns/

The issue is that good 'ol IE doesn't support the :hover pseudo-class on anything except <a> tags, so having a nice CSS-based dropdown list menu is impossible (well, very awkward and semantically incorrect, anyway) without javascript.  I added an optional argument, "ulId", that determines if the first
<ul> is given an ID for the javascript to do its DOM thing.

Code:

// --------------------
// Snippet: ListMenuX
// --------------------
// Version: 1.2
// Date: 2005.05.31
// jason@opengeek.com
//
// Based on the SimpleListMenu snippet.
//
// Note: This snippet will only show documents and
// folders at the current level and below.
//
// Credit for the base code goes to jeffwhitfield@gmail.com
// based on the SimpleListMenu snippet.
//
// Modded 17/09/2005 by sottwell@sottwell.com
// to add optional argument ulID to allow the top
// ul element to be given an ID.  Nested ul elements
// will not have the id.
// 
// Usage:
// [[ListMenuX?id=0&depth=2&divId=my-menu&activeLinkClass=currentMenuItem]]
//
$id = !isset($id)?$modx->documentIdentifier:$id;
$depth = !isset($depth)?0:$depth;
$nodiv = !isset($nodiv)?false:$nodiv;
$sDivId = empty($divId)?"":" id='$divId'";
$sDivClass = empty($divClass)?"":" class='$divClass'";
$sUlClass = empty($ulClass)?"":" class='$ulClass'";
$sLiClass = empty($liClass)?"":" class='$liClass'";
$sActiveLinkClass = empty($activeLinkClass)?"":" class='$activeLinkClass'";
$ulId = !isset($ulId)?false:$ulId;
$children = $modx->getActiveChildren($id);
$menu = "";
$childrenCount = count($children);
if($children==false) {
return $menu;
}
if ($nodiv==false) $menu .= "<div$sDivId$sDivClass>\n";
if ($ulId==true) {$menu .= "<ul$sUlClass id='nav'>\n";}
else{$menu .= "<ul$sUlClass>\n"; }
foreach ($children as $child)
{
$level = ($depth < 1)?1:$depth;

// If child is current document, add activeLink class
if ($child['id']==$modx->documentIdentifier)
{
$menu .= "<li$sLiClass><a$sActiveLinkClass href='[~".$child['id']."~]' title='".$child['description']."'>".$child['pagetitle']."</a>";
}
else
{
$menu .= "<li$sLiClass><a href='[~".$child['id']."~]' title='".$child['description']."'>".$child['pagetitle']."</a>";
}

if ($depth > 1) {
$subDepth = $depth - 1;
$suffix = "-nested";
if (($snippetOut = $modx->runSnippet('ListMenuX', array('id'=>$child['id'],
'nodiv'=>true,
                'ulId'=>false,
'divId'=>!empty($divId)?$divId.$suffix:'',
'divClass'=>!empty($divClass)?$divClass.$suffix:'',
'ulClass'=>!empty($ulClass)?$ulClass.$suffix:'',
'liClass'=>!empty($liClass)?$liClass.$suffix:'',
'activeLinkClass'=>!empty($activeLinkClass)?$activeLinkClass:'',
'depth'=>$subDepth
))) != false)
{
$menu .= $snippetOut;
}
}

$menu .= "</li>\n";

}

$menu .= "</ul>\n";
if ($nodiv==false) $menu .= "</div>\n";

return $menu;

The javascript that enables the dropdowns in IE:

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]></script>

[xyzvisual]

very good im waiting to use it tonight
i think the only thing is to point to the js from the template and edit the css...
thanks

[xyzvisual]

Hi
i couldent use
i put the code in the head of my template:
<script type=\"text/javascript\" src=\"assets/site/drop.js\"></script>
upload the code into a js (the second quote)to this folder
change my snippet listmenux to the first quote
and call to the snippet from my template whith the code provider
[!ListMenuX?id=21&depth=2&divId=my-menu!]
and it only return in firefox and explorer a simple menu
vertical..
whath doing broung.
is my link to the css
i need to change it
could give an example
thanks

[sottwell]

Sounds like you need to work on the CSS.  There are several articles and tutorials on setting up list-based menus on http://www.alistapart.com; that's where I get all my dropdown menu code from.  It's all in the CSS, with a bit of help from the Javascript to persuade IE to play nice.  The Javascript depends on the presence of a div with the id of "nav" in order to be able to create the rollover dropdown effect.  You can edit that in the .js file if you really want a different id.

Code:

navRoot = document.getElementById("nav");

You can call the CSS file in two different ways in the head of your template:

<link rel="stylesheet" type="text/css" href="assets/site/mystyle.css" />
- or -
<style type="text/css">
  @import assets/site/mystyle.css;
</style>

Edit the href path to where you put your .css file.
In your .css file, I recommend grouping your entries by the area they are for, and using comments to separate them:

/* Main List Menu style */
#mainMenu ul { list-style:none; }
#nav li ul { display:none; }
#nav li:hover ul, #nav li.over ul { display:block; }
etc etc...

/* Main Content style */
#main p { padding:10px; }
etc etc...

Here's your reading for the week 
I strongly recommend taking the time to work through the tutorials.

http://www.alistapart.com/articles/taminglists

http://www.alistapart.com/articles/dropdowns

http://www.alistapart.com/articles/horizdropdowns

http://www.alistapart.com/articles/hybrid

[xyzvisual]

thanks im waiting to work on it...
the only cuestion is
is posibol to link 2 files of css
and put in the template two calls to <script></script>
one whith the link to the js file
and the other whith some customs scripts i have
sorry for my little knoweledge
thanks again
javier

[sottwell]

You can have as many .css files as you want, using either method.  Be careful of the order you put them, though, these are Cascading style sheets, because the styles "cascade" down like water in a waterfall; for example if you say "body { background:white; }" in the first stylesheet, then "body {background:black;}" in the second one, the body background will be black.

For this reason, if I have a specific snippet whose content requires specific CSS, I am careful to use the snippet name in some way in the id and class names I use in any html the snippet generates.  For example, my Document Manager snippet uses a lot of forms.  All of the html tag id or class names start with dm, such as <form id="dmForm" ...>, or <div class="dmWide">.  This way, you can add the snippet's .css file in the header wihout having to modify your main template's .css file, and you don't need to worry about any style conflicts.

Interestingly, the NiftyCorners javascript rounded corner system has one .css file, import.css, which is linked to in the head of your template, and its content is nothing more than several @import commands, since the javascript itself generates a number of tags requiring specific css.  So if you are going to have a number of .css files, you can do it that way to make it easier to link to them from your template head.

However, if you wish to have alternate stylesheets to allow user to switch styles, you must use the <link rel="alternate stylesheet" title="secondStyle" ... /> form.

Here is the javascript and css links I used for this site (being worked on) http://www.alandaniel.co.uk.  Click on the images at the top to see the style switcher at work.

<script type="text/javascript" src="assets/templates/4in1/javascript/nifty.js"></script>
<script type="text/javascript" src="assets/templates/4in1/javascript/layout.js"></script>
<link rel="stylesheet" type="text/css" title="yellow" href="assets/templates/4in1/styles/import.css" />   
<link rel="alternate stylesheet" type="text/css" title="green" href="assets/templates/4in1/styles/green.css" />
<link rel="alternate stylesheet" type="text/css" title="sky" href="assets/templates/4in1/styles/sky.css" />
<link rel="alternate stylesheet" type="text/css" title="grey" href="assets/templates/4in1/styles/grey.css" />
<link rel="alternate stylesheet" type="text/css" title="puzzle" href="assets/templates/4in1/styles/green.css" />

The "yellow" style, the first one, uses the NiftyCorners javascript system, and you can see that I used the "import.css" file mentioned above.

As far as javascript goes, again you can link to as many as you like, although there is no function comparable to the css @import function; you cannot include or import other .js files from within javascript.

[xyzvisual]

sorry i  see the the post and i think still working in the css dropdown and see the post and reply later but in my main become a diferents ideas for modx and park the css dropdown to later, and dont reply your help.
thanks

[steve_a]

Hmm

I tried this and got a

manager/includes/document.parser.class.inc.php(705) : eval()'d code on line 1

error (some sort of internal php error?)

PS if this script needs a basic css to support this or does the standard css that comes with a standard install deal with this?

Thanks

[sottwell]

In the first place, ListMenuX has not been used for months. And if you get an error, it's best to copy/paste the entire error message into code tags (the # button in the post editing menu), otherwise we have no idea what the error is.

[steve_a]

"In the first place, ListMenuX has not been used for months. "

Thanks that's usefull but may be someone should note this fact on the resources page?
ie version compatibility etc?
so that if is is  no longer current we konw to avoid it!

[sottwell]

Sorry, I should have said that I haven't used it for months. As far as I know, it still works, but although I originally made this mod, as they say in Texas, "I've slept since then", and really don't remember anything about it.

As far as that parse error involving line 1, that means that something is wrong with line 1 of the snippet itself. Maybe a missing / in the initial // comment line? That's a common problem when copy/pasting source code. Without the rest of the error message, it's hard to tell.

And yes, it would need its own CSS styling, since it uses different class names (unless you use the argument options to make it use the same names as the default DropMenu snippet).