CSSMenu: The ultimate CSS only PHPLayers replacement!

[Ted]

It really shouldn't be case sensitive.  Not totally sure what's going on there.

[Greg]

I fixed it, but unfortunately the class="sectionheader" doesn't exist at the moment so you cant apply custom formatting to section headers. I'll look into a work around... I suppose I could hard code the styling into a style="" property...

Greg that css looks promising. I emailed the author of the original ALA article for his take on a horizontal stylesheet, so if he can't help I might be able to modify your code to suit.

1.1.5 works perfect for my menu structure - Thanks !!!

[Greg]

What about the horizontal and vertical menu here
It is based on the Suckerfish Dropdowns article by Patrick Griffiths and Dan Webb at A List Apart.

[iNSiPiD]

We really need to can any solution that relies on JavaScript to work, particularly when this code could be replaced by server-side scripting.

The CSS actually isn't too bad though.

I'm still wondering what's wrong with bulletmenu though? It works flawlessly for me and can be styled for horizontal or vertical use.

Are we trying to achieve multiple menu functionality?

I'd always dreamed bulletmenu would be revised to do this with luvverly tags like:

{bulletmenu menu="##"}

And then you could assign a menu number to pages in the Content view and CSS would take care of the rest.

Too easy? Prolly not.

[Ted]

I just tried the horizontal code that Greg posted.  It kind of works, but definatly needs some tweaking...

[ljbadenz]

We really need to can any solution that relies on JavaScript to work, particularly when this code could be replaced by server-side scripting.

Technicaly the JavaScript is not required. If you you are using a mozilla based browser then it should work fine without it. But IE's poor CSS implementation requires the use of JavaScript.

[Redguy]

What about the horizontal and vertical menu here
It is based on the Suckerfish Dropdowns article by Patrick Griffiths and Dan Webb at A List Apart.

The Suckerfish Dropdowns are not working well on my old school IE5. However, this is very close to what we need, I think.

I just tried the horizontal code that Greg posted. It kind of works, but definatly needs some tweaking...

Shouldn't we stick to Nick Rigby's vertical CSS code? But just try too tweak the Suckerfish horizontal CSS to match Nick's perfection?

It would just be great if we could get Nick to help us, he is a CSS God:P

And by the way, great work you all:)

[ljbadenz]

It would just be great if we could get Nick to help us, he is a CSS God:P

I emailed him on Monday and replied same day quoting him:

Somebody else had already approached me about this! I will try and put something together for you later today and send it on.

So hopfully he be able to do it and we can finally delete phplayers from our lives.

[Oh Daesu]

i've used cssmenu on www.jugendratebikon.ch. i think it's just great, a perfect replacement for phplayers for me. thanks alot for this!
i'm afraid i'm too less experienced to be able to help about the horicontal menu, its only been like 2 months since i started off with selfhtml .

generally i also would like to thank all devs here for this great and very logical structured cms. i find it amazing what opensource communities can do.

gratz

ohdaesu

[miketmc]

I´m very excited to have CSSMenu in vertical-version, cause I need it as alternativ to phplayers here ---> http://www.shohin-bonsai.de.tf/

Thanks in in advance to all dev´s


- miketmc

[Wolliholiker]

Try that css in combination with the CSSMenu for a nice horizontal dropdown - not perfect yet, but  i think its not far away from what most of you are searching for...
Its based on the suckerfish code... http://www.htmldog.com/articles/suckerfish/dropdowns/
Tested it with IE 5 and 6, Opera 7 and 8 - all worked fine...

Code: Select all

#primary-nav, #primary-nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 21px;
	width: auto;
}

#primary-nav a {
	display: block;
	width: 107px;
	background-color: #000000;
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	color: #ffffff;
	font-size: 11px;
	font-weight: normal;
	text-align: center;
}

#primary-nav a:hover {background-color: #336699;}


#primary-nav li { /* all list items */
	float: left;
	width: 107px; /* width needed or else Opera goes nuts */
}

#primary-nav li ul { /* second-level lists */
	border-right: 1px solid #000000;
	position: absolute;
	width: 107px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#primary-nav li ul ul { /* third-and-above-level lists */
	position: absolute;
	border-right: 1px solid #000000;
	margin: -22px 0 0 107px;
}

#primary-nav li:hover ul ul, #primary-nav li:hover ul ul ul, #primary-nav li.sfhover ul ul, #primary-nav li.sfhover ul ul ul {
	left: -999em;
}

#primary-nav li:hover ul, #primary-nav li li:hover ul, #primary-nav li li li:hover ul, #primary-nav li.sfhover ul, #primary-nav li li.sfhover ul, #primary-nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

BTW - i want to add an alternative menu to my site, a simple select-box with a go button? has anybody done something like that ?

[Redguy]

Try that css in combination with the CSSMenu for a nice horizontal dropdown - not perfect yet, but  i think its not far away from what most of you are searching for...
Its based on the suckerfish code... http://www.htmldog.com/articles/suckerfish/dropdowns/
Tested it with IE 5 and 6, Opera 7 and 8 - all worked fine...

Good job, works and looks great in Firefox, but doesn't work with my IE5?

[Wolliholiker]

Good job, works and looks great in Firefox, but doesn't work with my IE5?

hmm - worked fine in my IE 5.0 tested it now also with Firefox 1.06 and netscape 7.01
- are you sure that its not an problem with your configuration? - otherwise put that Javascriptcode (also from suckerfish) in the CSSMenu.js - i didn't post this because the scripts should do the same job (adding the hover-class to IE), but perhaps this is the reason...

Code: Select all

sfHover = function() {
	var sfEls = document.getElementById("primary-nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

[ljbadenz]

1.1.6:
Horizontal!!!

Just use horizontal='1'

To see what it looks like visit http://www.nickrigby.com/examples/dropdown4/index.htm

If you have a custom CSSMenu.css be sure to do a find and replace '#primary-nav' to '.cssmenu'

I haven't yet to test it on all browsers but it should work.

[angels]

I get some errors with 1.1.6

When installed:
Warning: vsprintf(): Too few arguments in /usr/home/name/domains/site/public_html/newcms/lib/classes/class.module.inc.php on line 1529

When i use this code to insert:
{cms_module module='cssmenu' horizontal='1'}

I get the "error in page" with IE6