Horizontaal CSS menu met 4 kolommen uitlijnen.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

M B

M B

13/02/2013 11:56:58
Quote Anchor link
Bij het bouwen van een website waar ik momenteel mee bezig ben loop ik tegen het volgende probleem aan. Met een CSS menu van internet (CSSMenuMaker) welke ik naar mijn eigen zin heb aangepast lukt het mij niet om het uitlijnen goed voor elkaar te krijgen.

Voorbeeld: http://jsfiddle.net/MBaNL/hWHGu/1/

Zoals je ziet werken de 4 kolommen al wel maar blijft het geheel meeschuiven met de bovenliggende <li>. Wat ik wil is dat de tweede sub <ul> net als de eerste sub <ul> links wordt uitgelijnd.

Wat mij verder ook wel netjes lijkt is om het "gat" in het tweede sub-menu rechtsonderin op te vullen door het rood als het ware door te laten lopen. Hoe kan ik dat toepassen binnen CSS?

Aangezien ik na een paar jaar weer php aan het oppakken ben en eigenlijk voor het eerst met HTML5 en (goed(?)) met CSS3 bezig ben kom ik er nog niet helemaal uit en hoop ik dat jullie mij verder kunnen helpen.

Alvast bedankt.
 
PHP hulp

PHP hulp

08/10/2024 17:39:37
 
Frank Nietbelangrijk

Frank Nietbelangrijk

13/02/2013 12:40:19
Quote Anchor link
Hallo,

Eigenlijk wil je twee css menu's onder elkaar zoals ik het begrijp. Ik weet niet of dat op deze manier te realiseren is, maar anders kun je zeker met behulp van wat javascript jouw doel bereiken. Met de JQuery library wordt dat nog een stukje makkelijker.

Met dat gat bedoel je wellicht de witte streep tussen de vakken?
Dat zou een border kunnen zijn. je kunt eens border-color:#??????; proberen.

Onthoud dat HTML5 en CSS3 nog beta zijn en nog niet door alle browsers ondersteund worden.
Ik geloof wel dat het de toekomst heeft.
 
M B

M B

14/02/2013 02:10:15
Quote Anchor link
Frank,

JQuery is iets waar ik momenteel alleen nog maar over aan het lezen b enen voor nu alleen nog toekomstmuziek.

Wat betreft het "gat"... zie onder "heeft sub 2" "sub 8" maar eens. Zoals je ziet is die niet aanwezig omdat die niet is aangemaakt. De vraag is dus hoe kan ik dat "gat" opvullen?

De dotted lijn komt uit het originele ontwerp van dit menu maar heb het (nog) niet gewijzigd aangezien dat wel in het design past.

Het menu zoals in het voorbeeld is wat ik dus nu heb met als enig echt probleem dat het sub-ul wordt uitgelijnd omder de hoofd-ul...
Gewijzigd op 14/02/2013 02:10:27 door M B
 
Frank Conijn

Frank Conijn

14/02/2013 02:47:49
Quote Anchor link
M B op 13/02/2013 11:56:58:
Met een CSS menu van internet (CSSMenuMaker)
Dat heeft iemand met jouw talenten toch niet nodig? Die schrijft toch manueel? ;-)

M B op 13/02/2013 11:56:58:
Wat ik wil is dat de tweede sub <ul> net als de eerste sub <ul> links wordt uitgelijnd.
Ik zou je aanraden om horizontale drop down-menu's zo te maken dat de submenu's verticaal naar beneden komen. Anders is het erg lastig manoeuvreren met de muis. Als je het daarmee eens bent, heb ik hier een tutorial voor je. Zou voor jou een eitje moeten zijn.
Gewijzigd op 14/02/2013 02:49:13 door Frank Conijn
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.