collapsible menu

4,213 Posts

doze Reply #11, 20 years, 3 months ago

Quote from: SoftDux at Jul 06, 2006, 03:01 PM

I did, but my dropdown doesn’t drop down....

Oh, the menu also needs this javascript what I attached below. I tried the menu on my site when I wrote that post, but I forgot that I used mollio teplate on that document when testing, and it has the "hover anything" javascript in it.. Sorry. But just add the javascript to your template and you should be seeing menus dropping down happily..

And here’s another way to do a dropdown (ripped from mollio template, so credits to whoever they belong to). Go here and download the attached file. Open that archive and make a new snippet to your modx from the contents of MollioMenu.txt.

Then add this css to your stylesheet:

/* NAV - top horizontal nav */
#nav, #nav ul {padding: 0;margin: 0;list-style: none}
#nav {font-weight:bold;height:2.09em;font: bold 96% arial;margin: 0 105px 0 40px}
#nav li {position:relative;background: #999;float: left;width: 10em;display:block;margin: 0;border-bottom: 3px solid #666;border-right: 3px solid #252525;padding:0}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {text-decoration:none;cursor:pointer;color:#fff;display: block;padding: 4px 10px 2px}
#nav a:hover {color:#000}
	
#nav li ul {border-left: 1px solid #c00;background: #f6f6f6 url("images/featurebox_bg.gif") no-repeat 100% 100%;width:15.8em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em}
#nav li:hover ul, #nav li.sfhover ul {left: 0;z-index:99999}
	
#nav li li {background:none;float:none;border:none;border: 1px solid #999;border-top:1px solid #fff;border-right:none;border-left:none;padding-left:0}
#nav li li.last {border-bottom:none}
#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {color:#000;padding: 3px 10px 2px;width:14em}
#nav li li a:hover {color:#fff;background:#c00}
	
#nav li.active {background: #c00;border-bottom: 3px solid #c00}
#nav li.active ul {border:none;background: #c00 url("images/featurebox2_bg.gif") no-repeat 100% 100%}
#nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {}
#nav li.active a:hover {color:#000}
	
#nav li.active li {border:none;border-top: 1px solid #c15c5c;border-bottom: 1px solid #870000}
#nav li.active li.last {border-bottom: none}
#nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#fff}
#nav li.active li a:hover {background: #666 url("images/sprites.gif") repeat-x 0 99%;color:#fff}
	
#nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#fff;font-weight:bold;background: #666 url("images/sprites.gif") repeat-x 0 99%}

/* hide from IE mac \*/
#nav li {width:auto}
/* end hiding from IE5 mac */

And include this javascript to your template:

/*
son of suckerfish menu script from:
http://www.htmldog.com/articles/suckerfish/dropdowns/
 */
 
 sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
			this.style.zIndex=200; //this line added to force flyout to be above relatively positioned stuff in IE
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

And use this snippet call (assuming that you created the snippet with a name MollioMenu):

[!MollioMenu? &hereClass=`active` &levelLimit=`2` &topnavClass=`nav` &selfAsLink=`1`!]

Then all you need to do is style the menu as you please..

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

48 Posts

SoftDux Reply #12, 20 years, 3 months ago

Ok, I’m probably missing something here now......

I copied the JS into my template, i asume this is right:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>[(site_name)] - [*pagetitle*]</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="[(base_url)]assets/templates/exhibit/style.css" type="text/css" media="screen" />
        
        
        
        <SCRIPT LANGUAGE="Javascript">
<!--
 /*
son of suckerfish menu script from:
http://www.htmldog.com/articles/suckerfish/dropdowns/
 */

 sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
			this.style.zIndex=200; //this line added to force flyout to be above relatively positioned stuff in IE
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
-->
</SCRIPT>
    </head>
    <body leftmargin="0" topmargin="0" rightmargin="0" center="">
        <table width="98%" cellspacing="1" cellpadding="1" border="0">
            <tbody>
                <tr>
                    <td><img width="359" height="102" alt="" src="[(base_url)]assets/templates/exhibit/images/exhibitions_header.jpg" /></td>
                    <td> </td>
                </tr>
                <tr>
                    <td align="left" colspan="2"> 	<!-- menu and other blocks goes here --> 	         <!-- [[DropMenu? &startDoc=`0` &levelLimit=`2` &here=`activeLink` &topdiv=`1` &topdivClass=`navlist` &subdiv=`1` &subdivClass=`subnavlist`]]  -->



[!DropMenu? &hereClass=`active` &levelLimit=`2` &topnavClass=`nav` &selfAsLink=`1`!]
<!-- [[DropMenu? &startDoc=`0` &levelLimit=`2` &here=`activeLink` &topdiv=`1` &topdivClass=`navlist` &subdiv=`1` &subdivClass=`subnavlist`]] -->
 </td>
                </tr>
                <tr>
                    <td valign="top" height="53" background="[(base_url)]assets/templates/exhibit/images/yello_line.jpg"> </td>
                    <td background="[(base_url)]assets/templates/exhibit/images/yello_line.jpg" align="right"><img height="53" alt="" src="[(base_url)]assets/templates/exhibit/images/yello_dot.jpg" /></td>
                </tr>
            </tbody>
        </table>
        <h1>[*longtitle*]</h1>
        [*content*]
        <div id="footer"> 	Copyright © [(site_name)] 2006<br />    <br />                  </div>
<center>{{Banners}}</center>
    </body>
</html>

And this is the CSS, with the added code you have:

* { padding:0; margin:0; border:0; }
body { margin:0 20px; }
#banner { background: #cdcdcd; border-left:1px solid #ababab; border-right:1px solid #ababab; }
#banner h1 { padding:10px; }
#wrapper { background: #ffffff; border-left:1px solid #ababab; border-right:1px solid #ababab; }
#container { width: 100%; background: #ffffff; float: left; margin-right: -200px; }
#content { background: #ffffff; margin-right: 200px; height:200px; border-right:1px dotted #ababab; }
#sidebar { width: 200px; float: right; }
#footer { float: bottom; background: #cdcdcd; border-left:1px solid #ababab; border-right:1px solid #ababab; }
.clearing { clear:both; height:0; }

div.navlist ul { font-family: sans-serif; }

div.navlist ul a
{
font-weight: bold;
text-decoration: none;
}

div.navlist ul, div.navlist ul ul, div.navlist ul li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

div.navlist ul li { float: left; }

div.navlist ul li a
{
color: #ffffff;
background-color: #003366;
padding: 3px;
border: 1px #ffffff outset;
}

div.navlist ul li a:hover
{
color: #ffff00;
background-color: #003366;
}

div.navlist ul li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}

div.subnavlist ul { display: none; }
div.subnavlist ul li { float: none; }

div.subnavlist ul li a
{
padding: 0px;
margin: 0px;
}

div.navlist ul li:hover div.subnavlist ul
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

div.navlist ul li:hover div.subnavlist ul li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}

div.navlist ul li:hover div.subnavlist ul li a:before { content: " >> "; }










/* NAV - top horizontal nav */
#nav, #nav ul {padding: 0;margin: 0;list-style: none}
#nav {font-weight:bold;height:2.09em;font: bold 96% arial;margin: 0 105px 0 40px}
#nav li {position:relative;background: #999;float: left;width: 10em;display:block;margin: 0;border-bottom: 3px solid #666;border-right: 3px solid #252525;padding:0}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {text-decoration:none;cursor:pointer;color:#fff;display: block;padding: 4px 10px 2px}
#nav a:hover {color:#000}

#nav li ul {border-left: 1px solid #c00;background: #f6f6f6 url("images/featurebox_bg.gif") no-repeat 100% 100%;width:15.8em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em}
#nav li:hover ul, #nav li.sfhover ul {left: 0;z-index:99999}

#nav li li {background:none;float:none;border:none;border: 1px solid #999;border-top:1px solid #fff;border-right:none;border-left:none;padding-left:0}
#nav li li.last {border-bottom:none}
#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {color:#000;padding: 3px 10px 2px;width:14em}
#nav li li a:hover {color:#fff;background:#c00}

#nav li.active {background: #c00;border-bottom: 3px solid #c00}
#nav li.active ul {border:none;background: #c00 url("images/featurebox2_bg.gif") no-repeat 100% 100%}
#nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {}
#nav li.active a:hover {color:#000}

#nav li.active li {border:none;border-top: 1px solid #c15c5c;border-bottom: 1px solid #870000}
#nav li.active li.last {border-bottom: none}
#nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#fff}
#nav li.active li a:hover {background: #666 url("images/sprites.gif") repeat-x 0 99%;color:#fff}

#nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#fff;font-weight:bold;background: #666 url("images/sprites.gif") repeat-x 0 99%}

/* hide from IE mac \*/
#nav li {width:auto}
/* end hiding from IE5 mac */

It doesn’t work, in fact it stipped down the formatting completely, so I muct be missing something.

I already have a snipped called DropMenu (the default one), so I changed the code that you have to this:

[!DropMenu? &hereClass=`active` &levelLimit=`2` &topnavClass=`nav` &selfAsLink=`1`!]

I can see it’s using the the class "nav", which is in the CSS file, yet I get a JS error in IE:

Line: 17
Char: 2
Error: 'document.getElementById(...)' is null or not an object
Code: 0
URL: http://domi.softdux.com/about.html

This is line 17:

	var sfEls = document.getElementById("nav").getElementsByTagName("LI");

Which refers to the nav class, I asume and the LI refers to the list elements - that’s as much as I can gather, but why does it give an error?

Any suggestions?

cPanel :: Fantastico :: RVSkin :: WHM :: ModernBill :: Reseller Hosting :: SSL Certificates :: Domain Registrations :: Affiliate Program :: Blog Hosting :: CMS Hosting :: Forum Hosting :: E-Commerce Hosting
SoftDux- The Leaders in Software
Use the coupon: modx to get 20% off our packages

- 177 Posts
seventhapex Reply #13, 20 years, 3 months ago

do this and you shouldn’t need the javascript anymore... "http://modxcms.com/forums/index.php/topic,2282.0.html"