CSSMenu: The ultimate CSS only PHPLayers replacement!

[ljbadenz]

I am trying to implement a new menu system. I will be based on a modified bulletmenu. But my first problem is putting bulletmenu code into doaction().

I though it might have been as easy as copying and pasting but looking at phplayers, I don't think so.

I basically want the smae output as bulletmenu.

---

[glow=red,2,300]Read the latest posts below!!![/glow]
Jump to http://forum.cmsmadesimple.org/index.ph ... ml#msg6844

[Ted]

I was playing with the same thing on Sunday.  Here is the module code I was using, though, take note that I removed some stuff for hiding fields and cleaned up the xhtml compliance.  http://cmsmadesimple.org/pastebin/86

[ljbadenz]

OK, I'll see if I can modify it to implement the a list apart article http://www.alistapart.com/articles/horizdropdowns.

And Ill paste the code back here.

[ljbadenz]

OK I uploaded my modified CSSMenu to http://www.ibbs.co.nz/temp/CSSMenu.zip.

The only thing I can't get to work is ContentStylesheet and ContentPreRender. I don't know why, but it just refuses to add the script and css.

I grabbed the code from PHPLayers but it just doesn't want to work. So whishy tell me how to fix it and I'll post a working version for inclusion in the svn.

Here is my code for ContentStylesheet and ContentPreRender:

Code: Select all

function ContentPreRender(&$content)
	{
		if (eregi('\{cms_module module=[\"\']?cssmenu[\"\']?', $content))
		{
			$config = $this->cms->config;
			$text =	'<__script__ language="JavaScript" type="text/javascript" src="'.$config['root_url'].'/modules/CSSMenu/CSSMenu.js"></__script>' . "\n";

			$content = ereg_replace("<\/head>", $text."</head>", $content);
		}
	}

	function ContentStylesheet(&$stylesheet)
	{
		if ($this->cms)
		{
			$config = $this->cms->config;
			@ob_start();
			@readfile(dirname(__FILE__).'/CSSMenu.css');
			$stylesheet = @ob_get_contents() . $stylesheet;
			@ob_end_clean();
		}
	}

[Ted]

The results of those functions will get cached.  Turn on debug in config.php and that will disable caching.

[ljbadenz]

Great it now includes the files.

But now in order for the js to work I need to add 'id="nav"' to the very first ul.

Please tell me what I need to edit in the php.

[Ted]

Check you pm.  Lemme know if it works.  Thanks.

[ljbadenz]

[Drum roll here]

Introducing: CSSMenu 1.1.6! (new version)

Finally what we have all been waitng for, a CSS only PHPLayers alternative!

Features:

• Vertical style PHPLayers replacement
• Standards conforming
• Uses CSS
• No JavaScript (well a small bit is required for IE)
• Degrades nicely into a bulleted list
• New: Added the IE6 flicker fix.
• New: Hprizontal style!

Current limitaitons: Only three levels deep and only one menu per page.

Get it here http://www.ibbs.co.nz/files/CSSMenu-1.1.6.zip. (1.16)
To see it in action visit www.ibbs.co.nz.

It fully supports these browsers:

Windows

• Internet Explorer 6
• Internet Explorer 5.5
• Internet Explorer 5.01
• Opera 7+
• Netscape 7+
• Firefox 1+

Macintosh

• Safari 1+
• Firefox 1+
• Internet Explorer 5.2
• Opera 7+
• Netscape 7+
• Camino 0.8.4

Lets not forget Linux - those geeky browsers follow the standards precisely and as such are supported.

It was based on wishy's CSSMenu code he gave me. I then modified it to work with the stylesheets described in Drop-Down Menus, Horizontal Style, Drop-Down Menus, Horizontal Style: Pt 2, and Drop-Down Menus, Horizontal Style: Pt 3.

To change the stylesheet edit /modules/CSSMenu/CSSMenu.css, refer to the above articles for more information.

It is ready to implement on your website just insert {cms_module module='cssmenu'}.

There is still some work to be done on the PHP side, so hopefully whishy will add this to the SVN and will work on it.

Changelog:

• 1.0: Initial whishy code
• 1.1: Modified by ljbadenz to include above mention article's CSS.
• 1.1.1: Added the IE6 flicker fix.
• 1.1.1 Patch 1: Fixed missing arrow.
• 1.1.1 Patch 2 now 1.1.3: Fixed first div being replaced with a li.
• 1.1.4: Fixed admin link falling outside of the menu structure.  Made section headings bold.
• 1.1.5: Fixed section headings when used as a submenu.
• 1.1.6: Fixed script tag to be xhtml strict. Added horizontal option.

TODO:

• Horizontal layout
• More than one menu on a page
• More than three levels deep (unlikely)
• More languages

[Ted]

Happy, happy day!

This is a wonderful thing.  I'll try to look more in depth at it tomorrow.  Looks great, though!

[ljbadenz]

You should probably make a backup of the zip file in case I delete in the future. (I will always have a backup on my PC though.)

[Ted]

Umm...  actually, you didn't attach it anywhere or put up a link. 

[ljbadenz]

Sorry, I thought you would use the old link at the top.
But no worries, I have added the link in bold

[Ted]

Oh, I didn't realize that was there.  I'm a little slow...

[Greg]

Really getting close. I find the JS isn't working in IE, however if I add "body {behavior:url(csshover.htc);}" to the CSS and add the csshover.htc file to the root folder IE works fine. This is the file I sent you wishy, not sure if you shared it with ljbadenz.

[Ted]

No, I didn't.  Bad wishy.  As soon as I get a free moment, I'll compile everything together and see what we have.