Menu level problemen

[Edida]

Hoi hoi,

Op www.obsdetimp.nl heb ik een flink aantal bestanden verplaatst naar het zgn. archief.
(zie bovenmenu: De groepen, en daar onderaan.

Nu heb ik in de Stylesheet gepoogd de levels te vermeerderen (want dat moet onbeperkt kunnen), om te zorgen, dat de levels goed blijven werken, maar zoals je daar kunt zien, vouwen de levels direct helemaal uit, maar dan kun je de andere pagina's niet meer goed bereiken.

Dit heb ik aangepast in Navigation: CSSMenu - Horizontal:

Code: Select all

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

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li:hover ul ul ul,
#primary-nav li:hover ul ul ul ul,
#primary-nav li:hover ul ul ul ul ul,
#primary-nav li:hover ul ul ul ul ul ul,
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul 
#primary-nav li.menuparenth ul ul ul,
#primary-nav li.menuparenth ul ul ul ul,
#primary-nav li.menuparenth ul ul ul ul ul,
#primary-nav li.menuparenth ul ul ul ul ul ul,{ 
   display: none; 
}

/* hierboven levels toegevoegd */

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul ul li:hover ul,
#primary-nav ul ul ul ul ul li:hover ul, 
#primary-nav ul ul ul ul ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul 
#primary-nav ul ul ul li.menuparenth ul,
#primary-nav ul ul ul ul li.menuparenth ul,
#primary-nav ul ul ul ul ul li.menuparenth ul,
#primary-nav ul ul ul ul ul ul li.menuparenth ul,{ 
   display: block; 
}

/* hierboven levels toegevoegd */

Nb. Het bovenmenu staat in de hoofdsjabloon als html-blok en daar staat:

Code: Select all

{menu template='CSSMenu Horizontal' start_element="2.1" show_root_siblings="1"}

Helaas heeft dit geen effect op het probleem.

Rolf als je morgen tijd hebt, mag je  :P morgen ook wel even 'naar binnen' op de schoolsite.
Al vast bedankt weer voor de moeite.

Edida

P.S.
Heb de update nog niet uitgevoerd (dit ter info).

[Jos]

Edida, zowel bij de display:none; als bij de display:block; heb je een komma teveel staan. Die voor de accolade hoort er niet.

Dus ,{ 2x vervangen door {

Bij mij werkt je menu dan in Firefox.

[Edida]

Hallo Jos,

Ik heb in een stylesheet genaamd Timp - menu deze kommaatjes weggehaald en een paar regels erboven nog kommaatjes toegevoegd.
Het bovenmenu werkt nu goed in archief. Hartelijk dank voor deze tip dus.

Ik snap helaas nog steeds niets van die verbindingen tussen stylesheets en sjablonen, want ik zie nergens een verwijzing naar genoemde stylesheet. Ook niet in het sjabloon genoemd in de html-blok:

Code: Select all

{menu template='CSSMenu Horizontal' start_element="2.1" show_root_siblings="1"}

Onder menubeheer vind ik CSSMenu Horizontal. Bij de gewone lijst stylsheets zie ik wel staan:
Navigation: CSSMenu - Horizontal,
Daarin vind ik ook die li en ul lijsten nog met die komma-fout, maar omdat het menu nu goed werkt, denk ik niet dat die met elkaar te maken hebben, toch?

Nu wil ik je nog vragen om nog eens goed naar die volledige code te kijken, want ik heb een donkerbruin vermoeden (maar wie ben ik) dat er iets dubbel in staat. Klopt dat? En wat moet er dan precies uit?

Code: Select all

/* 3.0. Menu systeem */


/* 3.1. Horizontaal menu */

/* Horizontal and vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen altered by Bas Hesselink*/


/* Horizontal menu for the CMS CSS Menu Module */

#menu_vert {
   margin-left: 0px; /* org. 1px */
   margin-right: 0px; /* org. 1px */
}

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

/* Fix for Opera 8 */
.clearb { clear: both; }
#horiz-menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   background: #DDDDF4;
   background: url(uploads/images/menu/topbg_blue.gif);
   border-bottom: 0px solid #9090DC;
	width: 100%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#horiz-nav li li { 
   width: 140px;
}

/* Unless you know what you do, do not touch this */ 
#horiz-nav, #horiz-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px;    
}

#horiz-nav ul { 
   position: absolute; 
   top: auto;
   display: none;	  
   border: 1px solid #9090DC;
   padding-top: 1px; 
   width: 140px; /* Opera 9 aanpassing */
}

#horiz-nav ul ul { 
   margin-top: 1px;
   margin-left: 0px;
   left: 100%; 
   top: 0px;
}
	
#horiz-nav li { 
   margin-left: -1px;
   float: left;
}

#horiz-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative;
}

/* Styling the basic apperance of the menu elements */
#horiz-nav div { 
   display: block; 
   margin: 0px; 
   padding: 0px 10px; 
   text-decoration: none;
	width: 130px;
	text-align: left;
	border-left: 1px solid black;
}

#horiz-nav a { 
   display: block; 
   margin: 0px; 
   padding: 7px 10px; /*Aangevuld!!! van 5px 10px*/
   text-decoration: none; 
   color: #3C3CB0;
	background: transparent; 
}

#horiz-nav ul a { 
   padding: 5px 10px; /*Aangevuld!!! van 5px 10px*/
}

#horiz-nav a.hoover {    
   background-color: #FFFFEA; 	
}

#horiz-nav li a { 
   border-right: 1px solid #9090DC;
   border-left: 1px solid #9090DC;
}

#horiz-nav li li a { 
   border: 0px solid #9090DC;
}

#horiz-nav li,
#horiz-nav li.menuparent { 
   background-color: #DDDDF4;
	background: url(uploads/data/topbg_blue.gif);	 
}

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

#horiz-nav li.menuactive { 
   background-color: #A4A4E3; 
	background: url(uploads/data/topbg_blue.gif);
}


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

#horiz-nav ul li.menuparent, 
#horiz-nav ul li.menuparent:hover,
#horiz-nav ul li.menuparenth {
/* arrow for menuparents */
   background-image: url(uploads/images/menu/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat;
   background-color: #DDDDF4; 
}


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

#horiz-nav li:hover, 
#horiz-nav li.menuh, 
#horiz-nav li.menuparenth, 
#horiz-nav li.menuactiveh { 
   background-color: #FFFFEA;
	background-image: url(uploads/images/menu/butnbg.gif);	 
}

#horiz-nav ul li { 
	background-image: none;
   background-color: #DDDDF4; /* Aangevuld!!! */
}

#horiz-nav ul li:hover,
#horiz-nav ul li.menuh,
#horiz-nav ul li.menuactiveh { 
	background-color: #FFFFEA;
	background-image: none;
	}

#horiz-nav ul li.menuparenth { 
	background-image: url(uploads/images/menu/arrow.gif); 
	background-position: center right; 
	background-repeat: no-repeat;
	background-color: #FFFFEA;
	}


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

/* 
just add 
#horiz-nav li:hover ul ul, 
#horiz-nav li.menuparenth ul ul ul,
for fourth level 
*/
#horiz-nav ul, 
#horiz-nav li:hover ul, 
#horiz-nav li:hover ul ul, 
#horiz-nav li:hover ul ul ul, 
#horiz-nav li:hover ul ul ul ul,
#horiz-nav li:hover ul ul ul ul ul,
#horiz-nav li:hover ul ul ul ul ul ul,
#horiz-nav li.menuparenth ul, 
#horiz-nav li.menuparenth ul ul,
#horiz-nav li.menuparenth ul ul ul,
#horiz-nav li.menuparenth ul ul ul ul,
#horiz-nav li.menuparenth ul ul ul ul ul,
#horiz-nav li.menuparenth ul ul ul ul ul ul { 
   display: none; 
}

/* add 
#horiz-nav ul ul ul li:hover ul, 
#horiz-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#horiz-nav li:hover ul, 
#horiz-nav ul li:hover ul, 
#horiz-nav ul ul li:hover ul, 
#horiz-nav ul ul ul li:hover ul,
#horiz-nav ul ul ul ul li:hover ul,
#horiz-nav ul ul ul ul ul li:hover ul,
#horiz-nav ul ul ul ul ul ul li:hover ul,
#horiz-nav li.menuparenth ul, 
#horiz-nav ul li.menuparenth ul, 
#horiz-nav ul ul li.menuparenth ul,
#horiz-nav ul ul ul li.menuparenth ul,
#horiz-nav ul ul ul ul li.menuparenth ul, 
#horiz-nav ul ul ul ul ul li.menuparenth ul,
#horiz-nav ul ul ul ul ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#horiz-nav li li { 
   float: left; 
   clear: both; 
}
#horiz-nav li li a { 
   height: 1%; 
}


/* 3.1. Horizontaal menu */

/* The wrapper determines the width of the menu elements */
#vert-menuwrapper { 
   width: 100%; 
}


/* Unless you know what you do, do not touch this */ 
#vert-nav, #vert-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
   width: 100%; 
   margin-left: 0px;
   border-bottom: 1px solid #9090DC; 
   padding-bottom: 1px; 
}

#vert-nav ul { 
   position: absolute; 
   top: 0;
   left: 100%; 
   display: none;
   background-color: #DDDDF4;
   border: 1px solid #9090DC;
   padding-bottom: 1px; 
   margin-left: -2px;
}

#vert-nav li { 
   margin-bottom: -1px; 
   position: relative;
   *margin-botom: 0px;
   *margin-top: 0px;
   _margin: 0px;
   
}


/* Styling the basic apperance of the menu elements */
#vert-nav a { 
   display: block; 
   *display: inline; 
   _display: block; 
   margin: 0px;
   padding: 5px 10px;
   *padding-left: 10px;
   *padding-bottom: 0px;
   *padding-top: 5px;
   *padding-right: 0px;
   _padding: 5px 10px;
   color: #3C3CB0;
   text-decoration: none;
   *height: 24px;
   *text-align: centre;
}

#vert-nav li, #vert-nav li.menuparent { 
   /* background-color: transparent;  */
   min-height:1em; /* Fixes IE7 bug*/
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#vert-nav li.menuactive { 
   background-color: #A4A4E3; 
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#vert-nav li.menuparent, 
#vert-nav li.menuparent:hover, 
#vert-nav li.menuparenth { 
   background-image: url(uploads/images/menu/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; 
}


/* Styling the apperance of menu items on hover */
#vert-nav li:hover, 
#vert-nav li.menuh, 
#vert-nav li.menuparenth, 
#vert-nav li.menuactiveh { 
   background-color: #FFFFEA; 
}

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#vert-nav ul, 
#vert-nav li:hover ul, 
#vert-nav li:hover ul ul, 
#vert-nav li:hover ul ul ul,
#vert-nav li:hover ul ul ul ul,
#vert-nav li.menuparenth ul, 
#vert-nav li.menuparenth ul ul,
#vert-nav li.menuparenth ul ul ul,
#vert-nav li.menuparenth ul ul ul ul { 
   display: none; 
}
#vert-nav li:hover ul, 
#vert-nav ul li:hover ul, 
#vert-nav ul ul li:hover ul, 
#vert-nav ul ul ul li:hover ul,
#vert-nav ul ul ul ul li:hover ul,
#vert-nav li.menuparenth ul, 
#vert-nav ul li.menuparenth ul, 
#vert-nav ul ul li.menuparenth ul,
#vert-nav ul ul ul li.menuparenth ul,
#vert-nav ul ul ul ul li.menuparenth ul { 
   display: block; 
}


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

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


/* section header */
#vert-nav li.sectionheader {
   border-left: 1px solid #9090DC; 
   border-top: 1px solid #9090DC; 
   font-size: 130%;
   font-weight: bold;
   padding: 1.5em 0 0.8em 0.5em;
   background-color: #fff;
   margin: 0;
   width: 100%;
}


/* separator */
#vert-nav li hr.separator {
   display:block;
   height: 0.5em;
   color: #6D6DD2;
   background-color: #6D6DD2;
   width: 100%;
   border:0;
   margin:0;
   padding:0;   
   border-top: 1px solid #9090DC;
   border-right: 1px solid #9090DC;
}

Bedankt al vast voor je hulp.

Groetjes,
Edida

[RonnyK]

Edida,

in de menu-aanroep die je opgeeft staat GEEN verbinding naar een stylesheet... Deze heeft enkel de naam dat het een CSS-gestyled menu is.

Voor de koppeling is het zo, dat de stylesheets aan de paginasjabloon zijn gekoppeld.

In dit geval hangt je pagina aan een sjabloon. In dat sjabloon roep je dit menu aan, met een specifiek menusjabloon.

Als je nu bij Layout->Sjablonen rechts op het CSS icoon klikt van je paginasjabloon zie je alle gekoppelde stylesheets.

Ronny

[Edida]

Hoi hoi Ronny,

Leuk weer iets van je te horen.
Alles goed? Vakantie weer bijna voorbij, hè? 

Dank voor je uitleg. Nu snap ik iets meer van die koppelingen.

Groetjes
Edida

[RonnyK]

Vakantie is helemaal voorbij, ik ben al weer aan het werk

Ronny

[Edida]

Vakantie is helemaal voorbij, ik ben al weer aan het werk

Zo te zien heb je er wel weer zin in - dus veel plezier en sterkte op/met je werk.

Nb. Ik ben de hele vakantie door bezig geweest met achtertalige zaken en daar zaten heel veel (vrijwilligers)werk gerelateerde dingen bij. Over vakantie gesproken.  .
Maar goed... daar ben ik zelf bij.