CSS menu not (yet?) Trinidad ready?

[spoetnik]

Congratulations on the Trinidad release!! Good work.
I just upgraded my website to the latest, and the greatet Trinidad.[url=http://(www.nise.nl)](www.nise.nl)[/url]
No big problmes, the upgrade went great. One clitch, it seems that css menu is broken?? I used the Horizontal css menu, and now it seems broken. Any tips, hints, tricks??

Thanks

[westis]

See this post: http://forum.cmsmadesimple.org/index.ph ... l#msg12788

Basically the thing is that the classes/IDs that CSSMenu outputs has changed and the classes/IDs in the stylesheet therefore no longer work.

If you want to start from the beginning styling your CSSMenu I post the current default stylesheets here. But if you rather want to update a customized stylesheet I'll write a guide on how to do that later today.

Default CSSMenu Horizontal:

Code: Select all

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper clears the floating elements of the menu */

#menuwrapper { 
        overflow: hidden; 
        background-color: #ECECEC;
        border-bottom: 1px solid #C0C0C0;
        }


/* Set the width of the menu elements at second level. Leaving first level flexible. */

#primary-nav li li { 
        width: 200px; 
       }


/* Unless you know what you do, do not touch this */ 

#primary-nav, #primary-nav ul { 
	list-style: none; 
	margin: 0px; 
	padding: 0px; 
	}
#primary-nav ul { 
	position: absolute; 
	top: auto; 
	display: none; 
	}
#primary-nav ul ul { 
	margin-top: 1px;
 	margin-left: -1px;
	left: 100%; 
	top: 0px; 
	}
	
#primary-nav li { 
	margin-left: -1px;
	float: left; 
	}
#primary-nav li li { 
	margin-left: 0px;
	margin-top: -1px;
	float: none; 
	position: relative; 
	}

/* Styling the basic apperance of the menu elements */

#primary-nav a { 
	border: 1px solid black;
	display: block; 
	margin: 0px; 
	padding: 3px 5px; 
	text-decoration: none; 
	}

	
#primary-nav li, #primary-nav li.menuparent { 
	background-color: #ececec; 
	margin-bottom: -1px;
 	margin-left: -1px;
	}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
	background-color: #C7C7C7; 
	margin-bottom: -1px;
 	margin-left: -1px;
	}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth { 
	background-image: url(modules/CSSMenu/images/arrow.gif); 
	background-position: center right; 
	background-repeat: no-repeat; 
	}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh { 
	background-color: #E7AB0B; 
	}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul { 
	display: none; 
	}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul { 
	display: block; 
	}


/* IE Hacks */

#primary-nav li li { 
	float: left; 
	clear: both; 
	}
#primary-nav li li a { 
	height: 1%; 
	}
-->

Default CSSMenu Vertical

Code: Select all

/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper determines the width of the menu elements */

#menuwrapper { 
	width: 200px; 
	}


/* Unless you know what you do, do not touch this */ 

#primary-nav, #primary-nav ul { 
	list-style: none; 
	margin: 0px; 
	padding: 0px; 
	width: 100%; 
	}
#primary-nav ul { 
	position: absolute; 
	top: 0; 
	left: 100%; 
	display: none; 
	}
#primary-nav li { 
	position: relative; 
	margin-bottom: -1px;
 	margin-left: -1px;
	}


/* Styling the basic apperance of the menu elements */

#primary-nav a { 
	border: 1px solid black; 
	display: block; 
	margin: 0px; 
	padding: 3px 5px; 
	text-decoration: none; 
	}
#primary-nav li, #primary-nav li.menuparent { 
	background-color: #ececec; 
	}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
	background-color: #C7C7C7; 
	}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav li.menuparent, #primary-nav li.menuparent:hover, #primary-nav li.menuparenth { 
	background-image: url(modules/CSSMenu/images/arrow.gif); 
	background-position: center right; 
	background-repeat: no-repeat; 
	}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh { 
	background-color: orange; 
	}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul { 
	display: none; 
	}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul { 
	display: block; 
	}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }

[Greg]

I now have .11 installed on my main website and have CSSMenu vert working. However I found a bug when using IE.
With the following structure

home
main1 sub1 subsub1
main2 sub2 subsub2

if sub1 is the active menu item, subsub1 does not display in IE
if sub2 is the active menu item, subsub2 does not display in IE