M E N U

[iStevo]

Jos,
ik voel het, we zijn er bijna.
En wonderwel snap ik het ook een beetje (wat de bedoeling was)

menu 2 staat nu op 11em maar is nog langer dan menu 1.
menu 3 overlapt menu 2 wat inderdaad niet de bedoeling was.

Ga proberen volgende week een verticaal menu te maken met de verkregen info.

[Jos]

Ga proberen volgende week een verticaal menu te maken met de verkregen info.

Het is leuk om mee te spelen en te ontdekken wat je met css kan bereiken, maar Steven, probeer alsjeblieft geen uitklapmenu zelf te maken want dat is echt het ingewikkeldste wat je kan bedenken.
Je ziet zelf nu al dat als je een overlappinkje op het derde niveau wilt invoegen, dat dat direct consequenties heeft voor de rest van je menu... zo verrekte lastig om daar goed uit te komen.

Ik begin er zelf niet eens aan  :-\

Het beste kun je kijken wat de verschillende mogelijkheden van de standaard meegeleverde css-menu's zijn. Daar kun je de kleurtjes van aanpassen en je bent verzekerd van de goede werking. Ook als je ineens besluit om een extra subniveau in je pagina's aan te brengen.

[iStevo]

Jos, dat begrijp ik.
Ben blij dat ik zit waar ik nu zit en heb er toch iets van opgestoken.
Hoop dat we de laatste 2 foutjes kunnen oplossen.

[Jos]

en heb er toch iets van opgestoken.

Daar was het om te doen  

Heb je een link naar een site waar je je menu hebt draaien?

[Jos]

Link via PM ontvangen

Ik zie dat het veroorzaakt wordt door de 20px padding in

Code: Select all

#menu a, #menu h2 {
	padding: 5px 0 5px 20px;

Hoe op te lossen... dat is dus lastig.

#menu a, #menu h2 { heeft ook een width: 100%. Eigenlijk zou die de breedte moeten hebben van het li kader waar het in zit, minus de horizontale padding en minus de breedte van de border, dus 12em - 20px - 2*1px

Dat gaat dus niet.

Als je in plaats van 12em bijvoorbeeld 200px gebruikt, dan kan het rekensommetje wel en kom je uit op een width van 178px

Resultaat: geen overlap meer in je hoofdmenu-items, maar ook geen overlap meer in je derde menu-niveau 

Dat bedoel ik dus... je komt van het één in het ander 

[iStevo]

Gesnopen en gesnapt.
Alles ziet er goed uit.

Heb structuur ongeveer door en ga voor in de toekomst de tip van Rolf volgen

Als je een TEST website maakt, installeer dan eens een oude versie CMSMS vóór 1.6 -> Versie 1.5.4 dus.
Deze is voorzien van eenvoudigere menu en html sjablonen. Om te leren zijn deze gemakkelijker te doorgronden.

Bedankt Jos

[iStevo]

ps.
De bestaande menu sjablonen zijn meestal al voorzien van allerlei hacks voor de browser compatibiliteit. En werken daardoor in alle recente browser. Bij een zelf gemaakt menu heb je die garantie (nog) niet.

Mijn vader beweert dat hij menu niet kan gebruiken.
Ik vermoed dat hij een IE versie heeft (6 of 7) want IE 8 werkt wel, alsook Chrome, FF

[Rolf]

Internet Explorer 6 wordt niet meer ondersteund.
Maar welk menu (link/pm) dan kan ik ook eens kijken in verschillende browsers...

Rolf 

[Rolf]

(Link ontvangen via PM)

Klopt, het menu gaat in IE7 de mist in... 

Even wat me zo opvalt:

#menu li {
position: relative;
width: 200 px;  ul>li {      [/b] hier??[/color]
width: 12em;
float: left;
}

Grt. Rolf

[iStevo]

#menu li {
position: relative;
width: 200 px;   ul>li {      [/b] hier??[/color]
width: 12em;
float: left;
}

Zonder dit staat het menu onder elkaar.

Is er een oplossing voor IE 7?
Een extra code in stylesheet opnemen?

[Rolf]

#menu>ul>li {      [/b] hier??[/color]
width: 12em;
float: left;
}

Zonder dit staat het menu onder elkaar.

Dat geldt alleen voor de float: left hierdoor wordt het horizontaal.
Maar de > in #menu>ul>li dat zegt mij niets... (nou zegt dat ook niet alles natuurlijk )
Is deze er met een reden in gezet (door Jos) als een hack o.i.d.?
Wat gebeurt er (in IE7) als je gewoon #menu ul li doet?

Dit bedoel ik nou met:

De bestaande menu sjablonen zijn meestal al voorzien van allerlei hacks voor de browser compatibiliteit. En werken daardoor in alle recente browser. Bij een zelf gemaakt menu heb je die garantie (nog) niet.

grt. Rolf 

[Jos]

De > in #menu>ul>li is er door Jos expres in gezet. 

Het betekent dat de css alleen wordt toegepast als er een directe parent-child relatie is

In het geval van het menu wil ik alleen het eerste menu-niveau stylen, en juist niet alle onderliggende li elementen.

Dat een spatie tussen 200 en px niet mag is mij niet bekend.

[Rolf]

De > in #menu>ul>li is er door Jos expres in gezet. 

Het betekent dat de css alleen wordt toegepast als er een directe parent-child relatie is

In het geval van het menu wil ik alleen het eerste menu-niveau stylen, en juist niet alle onderliggende li elementen.

Dat vermoedde ik al.
Ik kende het nog niet  Ook weer wat geleerd.

Maar gaat IE7 er ook goed mee om?

Dat een spatie tussen 200 en px niet mag is mij niet bekend.

Wordt gezien als 200px 0px... (W3c)

grt. Rolf 

[Jos]

Maar gaat IE7 er ook goed mee om?

Ja... ik denk dat we het meer in de borders, paddings en/of de margins moeten zoeken, dan wel niet het compenseren daarvan in de hoogte-instellingen 

[iStevo]

ik heb dus nog steeds geen idee hoe de foutmelding met IE7 op te lossen.
Misschien best de raad van Rolf opvolgen en daarom heb ik cms ms 1.5.4 gedownload waar ik dan menu kan 'lenen'.

Maar hoe breng ik dit over naar mijn website?
Ik vind de css code

Code: Select all

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

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

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

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   background-color: #ECECEC;
   border-bottom: 1px solid #C0C0C0;
   width: 100%;
}

/* 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 { 
   display: block; 
   margin: 0px; 
   padding: 5px 10px; 
   text-decoration: none; 
   color: #006699;
}
#primary-nav li a { 
   border-right: 1px solid #C0C0C0;
   border-left: 1px solid #C0C0C0;
}
#primary-nav li li a { 
   border: 1px solid #C0C0C0;
}	
#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 ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/cms/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 */

/* 
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.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* 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 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%; 
}

maar wat moet ik hiermee??

Code: Select all

{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
	var nw="auto",w=document.documentElement.clientWidth;
	if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}


<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}

Of hoe gaat dat juist in zijn werk?