[OPGELOST] Menu moet toch uitklapbaar

[Evert B.]

Hallo mensen,

Ik kom erachter dat ik toch meer content heb dan ik eerder dacht, en dus heb ik toch uitklapbare menu's nodig.

Op deze site zie je links eigenlijk level 1 staan:
1. Instellingen
2. Ouders
3. Kinderen

Klik je op Oudersdan zie een horizontaal menu met:
2.1 Informatie
2.2 Achtergrond
2.3 Persoonlijk advies

Nu wil ik bij hover hieronder nog childs hebben, bijvoorbeeld:
2.1.1 Gezonde basisvoeding
2.1.2 Wat heeft uw kind nodig
2.1.3 etc.

Dit krijg ik echter niet voor elkaar.
Niet als ik de code die ik gebruikt heb voor dit menu er bij zt in stylesheet, en eigenlijk op geen enkele manier. Mijn CSS kennis is te beperkt. Welke crack heeft een gouden tip om mee te beginnen?

De code van dit horizontale menu is als volgt:

Code: Select all

#menu {margin:0 auto; padding:0; height:10px; width:600px; display:block; }
/* background:url("uploads/images/topMenuImages.png") repeat-x; <- verwijderd*/

#menu li{padding:0; margin:0; list-style:none; display:inline;}

#menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url("uploads/images/topMenuImages.png") 0px -30px no-repeat; outline:none;}

#menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url("uploads/images/topMenuImages.png") 100% -30px no-repeat;}

#menu li a:hover{background-position:0px -60px; color:#00a8bd; }

#menu li a:hover span{background-position:100% -60px;}

#menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url("uploads/images/topMenuImages.png") 0px -90px no-repeat; color:rgb(51,146,255);}

#menu li a.active span, .menu li a.active:hover span{background:url("uploads/images/topMenuImages.png") 100% -90px no-repeat;}

#menu li a.menuactive span{background:url("uploads/images/topMenuImages.png") 100% -90px no-repeat;}

#menu li a.menuactive {background-position:0px -90px; color: #00a8bd; }

Hopelijk weet iemand hoe ik verder moet...

[Evert B.]

Ik blijf proberen maar snap het gewoon niet.
Staat er in bovengenoemde code iets over het tweede level? Volgens mij niet toch?

Thanks - Evert

[Jos]

Nee volgens mij ook niet. Dat zou dan iets moeten zijn in de vorm #menu li li  of #menu li ul li

Ik brand mijn vingers niet aan hulp met uitklapmenus, want om die browsercompatible te krijgen (zeker igv IE6) zit de css vaak erg ingewikkeld in elkaar. je komt van het een in het ander...

Ik pak daarom altijd een van de standaard menu-templates van CMSms, of ik kies er een van CSS-Play en maak de menutemplate exact helemaal na, zodat ik de css daarvan zonder aanpassingen kan gebruiken. Maar dat zijn best complexe acties.

[Evert B.]

Oke bedankt Jos.

Ik probeer nu dus om het menu van NCleanBlue te gebruiken.
Ik roep het menu aan met

Code: Select all

{menu template='cssmenu_ulshadow.tpl' start_level='2'}

Alle CSS van het menu heb ik in een apart stylesheet gezet en gekoppeld aan mijn sjabloon. Toch... zie ik bij hover niet de childs...

Iemand een idee waar dit wordt tegengehouden?
Het is hierte zien (enkel bij 'Kinderen', er staat een recept als child onder 'Recepten').

[Jos]

In Firefox zie ik wel een submenu dipsausje

Als de ene browser het wel toont en de andere niet, ga ik altijd eerst op zoek naar html validatiefouten.. En die zijn er:

de id "menuwrapper" wordt 2x gebruikt
de id "primary-nav" wordt 3x gebruikt

een id mag maar één keer voor komen.

Verder zie ik de melding dat er 2x een eindtag in staat terwijl er geen openingstag is die erbij hoort. (de twee net boven **START FOOTER**)

Ik weet niet of dit het probleem oplost, maar het zou in ieder geval een goede start moeten zijn.

[Evert B.]

Ja Jos ik ben inmiddels aardig op weg. Ik had het eindelijk in FF zo ver dat er iets te zien was, en toen ging IE weer niet mee. Ik ga er mee verder aan de slag. Bedankt!

Groeten Evert

[Evert B.]

Okay, de simpele validate-foutjes heb ik op kunnne lossen.
Echter, ik krijg 8 foutmeldingen die komen doordat ik 3 keer een {menu} tag in mijn template heb. Hierdoor komen de ID's van de 's die door menu-template gegenereerd worden meerdere keren voor.

Maar aan de menu template kan ik niets doen... hoe moet ik dit oplossen? Het gaat dus om de template van het kopje 'kinderen' (de andere krijgen ook die template als deze goed werkt).

[Jos]

Tja... twee mogelijkheden:

1) 3 verschillende menutemplates gebruiken

2) de id veranderen in class, maar dat moet je dan ook in de css consequent doorvoeren, door # te veranderen in . (punt)

[Evert B.]

De pagina is nu geheel valid.
http://validator.w3.org/check?uri=http% ... ;outline=1

Helaas zit ik nog wel met hetzelfde probleem. Ik stoei dus nog even verder...

Thanks - Evert

[Loupol]

Hallo Evert,

Toevallig viel mijn oog op jouw "menuproblemen" Ik heb daar net drie weken mee zitten stoeien en ben tot aardige resultaten gekomen. Ik heb erg veel gehad aan het artikel over het implementeren van de suckerfish menu's (http://forum.cmsmadesimple.org/index.ph ... 441.0.html)

Wat mij opvalt is dat je drie keer de menutag

Code: Select all

{menu}

gebruikt terwijl je verschillende templates wil gebruiken. Volgens mij moet de menutag er dan zo uitzien:

Code: Select all

{menu template='jouwtemplate1' number_of_levels='aantal niveaus'}

  en voor iedere nieuwe menutemplate maak je dan een nieuwe menutag die naar die specifieke menutemplate verwijst.

Verder krijg ik de indruk dat je dezelfde id's voor verschillende doeleinden wil gebruiken. Ik heb aparte CSS sheets gemaakt voor elke menu-layout. In de templates verwijs je dan ook naar die specifieke id's.

Ook kun je m.b.v.

Code: Select all

if, elseif

in de menutemplates onderdelen van het menu uitsluiten.

Op mijn testsite http://cms.loupol4design.nl kun je de eerste resultaten zien: het accordion menu en het tutorial menu zijn gesplitst en gebaseerd op verschillende templates. Maar, ik kan de pagina's allemaal apart toewijzen aan welk menudeel ze moeten worden toegevoegd.

Eventueel kan ik je de complete theme xml sturen. Die kun je dan importeren en kijken hoe ik de menu templates heb gebouwd.

Overigens moet ik e.e.a. nog wel valideren en ik verwacht dat daar nog wel het nodige uit zal komen.
Maar deze versie werkt geheel correct in IE 7 en 8, safari, chrome en Firefox

Ik hoop dat je er iets mee kunt!
groet,
Cees

[Evert B.]

Loupol, bedankt voor je inbreng, maar ik heb toch nog steeds hoop dat ik gewoon een foutje gemaakt heb. Hieronder is mijn template. Het is het template dat gebruikt wordt bij het onderdeel 'Kinderen' en ook bij 'Ouders'.

Code: Select all

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}

</head>
</__body>

<!--********START HEADER********-->

<div id="header">
	<div id="header_middle">
	<div id="logo"></div>
        <div id="header-topmenu">{menu template='menutemplate_test' number_of_levels="1" }</div>
	<div id="pictos"></div>
	<h1>Gezonde voeding op kinderdagverblijf en BSO</h1>
        <div class="page-menu util-clearfix">
         <div id="menu">
         {menu template='cssmenu_ulshadow.tpl' start_level='2'}
         </div>
         </div>
	</div> <!-- einde div header_middle -->
	
</div> <!-- einde div header -->
<!--********EINDE HEADER********-->

<!--********START MIDDEN GEBIED********-->
<div class="colmask leftmenu">
    <div class="colright">
        <div class="col1wrap">
            <div class="col1">

			<!--********START RECHTER KOLOM CONTENT********-->
                <!-- Column 2 start -->
                <!-- <h2>{title}</h2> -->
				
                {content}

                            
				<!-- Column 2 end -->
			<!--********EINDE RECHTER KOLOM CONTENT********-->
            </div>
        </div>
        <div class="col2">
		<!--********START LINKER KOLOM********-->
            <!-- Column 1 start -->
                        	{global_content name='Voor kinderen'}
                  	<!-- {global_content name='linksonder'} -->
      </div> <!-- einde leftcol-->
            

			<!-- Column 1 end -->
		<!--********EINDE LINKER KOLOM********-->
        </div>
    </div>
<!--  </div> </div> -->

<!--********START FOOTER********-->
<div id="footer">
	<div id="footer_middle">
{global_content name='footer'}
	</div> <!-- einde footer_middle -->
</div>
<!--********EINDE FOOTER********-->

<__script__ src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</__script>
<__script__ type="text/javascript">
_uacct = "UA-1848067-8";
urchinTracker();
</__script>
<__body>
</__html>

Dus ik roep het bovenste menu aan met:

Code: Select all

{menu template='menutemplate_test' number_of_levels="1" }

Het footer menu roep ik aan met:

Code: Select all

{menu template='minimal_menu.tpl' number_of_levels="1"}

Die menu's werken beide goed, in FF, IE etc.

Echter, het is het hoofd menu wat fout gaat. Dit roep ik aan met:

Code: Select all

{menu template='cssmenu_ulshadow.tpl' start_level='2'}

Het werkt wel in FF en oudere versies van IE, maar niet niet met alle IE's.

Wie wil mag mij een PM sturen voor inlog in de admin...

Groeten Evert

[Loupol]

Hallo Evert,

Heb je hier al gekeken? Daar staan wat speciale verwijzingen voor IE.

http://wiki.cmsmadesimple.org/index.php ... nu_Manager

Wellicht kom je er verder mee.

Succes!

groet,

Cees

[Evert B.]

http://wiki.cmsmadesimple.org/index.php ... nu_Manager

Hier stond nog een tip. Ik heb nu de volgende code toegevoegd in het stylesheet.

Code: Select all

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

Werkt niet

Ik heb nu alle andere menu's uit-ge-comment met behalve het hoofdmenu en toch werkt het menu niet in IE. Als de originele code van NCCleanblue opnieuw plaats doet hij het nog steeds niet.

Is mijn aanroep fout voor IE?:

Code: Select all

{menu template='cssmenu_ulshadow.tpl' start_level='2'}

http://kidsfoodcare.nl/index.php?page=voor-kinderen

[Evert B.]

Sorrie voor de vele berichten... Ik blijf stoeien en ooit kom ik er uit...

Ik heb iets ontdekt. Als je op onderstaande link klikt en je hovert over het menuitem 'kinderen' dan is het plots wel deels zichtbaar in IE.
http://kidsfoodcare.nl/index.php?page=voor-kinderen

Het zal iets te maken hebben met z-index of overflow.
In onderstaand stylesheet heb ik alle overflow: hidden veranderd in visible. DIt werkte ook niet maar wie weet ziet een 'crack' het meteen?

Code: Select all

* {
	margin: 0px;
	padding: 0px;
} 

   /* <!-- */
    /* General styles */
    body {
margin: 0px 0px 0px 0px;
padding: 0px;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        width:100%;
	font-size:90%;
       font-family: verdana, sans-serif;
    }
	a {
    	color:#369;
	}
	a:hover {
		color:#fff;
		background:#369;
		text-decoration:none;
	}
    h1, h2, h3 {
        margin:.8em 0 .2em 0;
        padding:0;
    }
    p {
        margin:.4em 0 .8em 0;
        padding:0;
    }
	img {
		margin:10px 0 5px;
	}
	/* Header styles */
	
    #header {
        clear:both;
        float:left;
        width:100%;
    }
	
	#topheader {
	    clear:both;
        float:left;
        width:100%;
		height: 18px;
		background: #00a8db;
    }

#menu {
position: absolute;
top: 111px;
left:260px;
height: 25px;
}
	
	#header_middle {
	width: 800px;
	margin-left:auto;    /*toegevoegd EJB*/
	margin-right:auto;
	position:relative;
	height: 140px;       /*met 93px komen lijntjes overeen*/
	}
	
	#header {
	border-bottom:1px solid #00a8db;
	background-image: url('uploads/images/bg_banner.jpg');
	}
	
	#logo {
	position: absolute;
	left: 0px;
	top: -2px;
	height:139px;
	width: 258px;
	background-image: url('uploads/images/bg_banner22kopie.jpg');
	}
        
        #header-topmenu {
	position: absolute;
	height: 20px;
	width: 500px;
	right: 0px;
	top: 10px;
        font-size: 10px;
        text-decoration: none;
        }
	
	#pictos {
	position: absolute;
	height: 80px;
	width: 492px;
	right: 0px;
	top: 30px;
	background-image: url('uploads/images/site/horizontaal dagritme1kopie.png');
	}
	
	#header h1 {
	position: absolute;
	top: 99px;
	left: 10px;
	font-size: 12px;
	font-family: candara, verdana;
	width: 250px;
	text-align: center;
	}
	

	/* column container */
	.colmask {
		position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	    clear:both;
	   /*float:left;            */
        width:800px;			/* width of whole page - was 100% EJB */
		overflow:visible;	/* This chops off any overhanging divs */ /* was hidden EJB */
		margin-left:auto;    /*toegevoegd EJB*/
		margin-right:auto;    /*toegevoegd EJB*/
		border-left: 0px solid #00a8db;
		border-right: 0px solid #00a8db;
	}

	/* 2 column left menu settings */
	.leftmenu {
	    background:#fff;
	}
    .leftmenu .colright {
        float:left;
        width:200%; /* was 200% EJB*/
		position:relative;
		left:200px;
        background-image:url('uploads/images/jolie_fruit_ingekleurdkopie_vaag500.jpg');
        background-position:right bottom;
        background-repeat:repeat-x;
    }
    .leftmenu .col1wrap {
	    float:right;
	    width:50%;
	    position:relative;
	    right:200px;
	    padding-bottom:1em;
	}

	.leftmenu .col1 {
        margin:10px 15px 0 215px;
	    position:relative;
	    right:100%;
	    overflow:visible; /* was hidden EJB */
	}
    .leftmenu .col2 {
        float:left;
        width:170px;
        position:relative;
        right:185px;
    }


#leftcoldiv {
margin-top: 10px;
}
#leftcoldiv_top {
width: 180px;
height: 17px;
background-image:url('uploads/images/blue-lighter-top.gif');
}
#leftcoldiv_bottom {
width: 180px;
height: 17px;
background-image:url('uploads/images/blue-lighter-onder.gif');
}
#leftcoldiv_midden {
width: 180px;
height: 7px;
background-image:url('uploads/images/blue-lighter-midden.gif');
background-repeat: repeat-y;
height:auto;
font-size: 10px;
}

#inside {
margin-left: 10px;
width: 160px;
}


	/* Footer styles */
	#footer {
        clear:both;
        float:left;
        width:100%;
		height: 97px;
		border-top:2px solid #00a8db;
		border-bottom:0px solid #00a8db;
		background-image: url('uploads/images/footer_img2.png');
    }
	
	#footer_middle {
	width: 800px;
	margin-left:auto;    /*toegevoegd EJB*/
	margin-right:auto;
        text-align: center;
        font-size: 10px;
	}
	
    #footer p {
        padding:10px;
        margin:0;
    }

.home {
height: 141px;
border-bottom: 1px dashed #99d9ea;
padding-top: 10px;
}

    /* --> */
    </style>
    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
    .col1 {
	    width:100%;
	}
    </style>
    <![endif]-->

Ik gebruikte juist dit stylesheet van http://matthewjamestaylor.com/blog/-website-layouts omdat deze hoog staan aangeschreven...

[voorhammr]

Evert, ik zie geen rare dingen. In ie8 en IE7 doen de menu's het prima.