Horizontaal CSS menu met 4 kolommen uitlijnen.

Door M B op 13-02-2013 11:56

3.595 views

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.

Frank Nietbelangrijk

13-02-2013 12:40

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

14-02-2013 02:10 gewijzigd op 14-02-2013 02:10

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...

Frank Conijn

14-02-2013 02:47 gewijzigd op 14-02-2013 02:49

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.

Reageren

Inloggen om te reageren