Vertikaal menu

Status
Niet open voor verdere reacties.
E

Ernestine

Gebruiker
Lid geworden
11 mrt 2014
Berichten
6
Hoi,
Ik ben bezig met een testsite: http://www.fm-fotografie.nl/test/. Het thema heb ik gekocht. Het enige wat ik nu wil is dat het submenu uitklapt (bij 'Lookbook') en dat de rest van het menu dan blijft staan. Als je hovert over Lookbook dan verschuift het menu contact naar beneden, en dat wil ik niet.
Ik heb diverse instellingen geprobeerd zoals het submenu op: position: absolute en display: block te zetten, maar niks werkt. Ik weet gewoon niet hoe ik dit voor elkaar kan krijgen.

Kan iemand me helpen?

Bedankt en groeten,

Ernestine
 
Misschien dat je je nog even moet verdiepen in het onderwerp "box-model".

De html-elementen nemen bij het renderen in een browser precies die ruimte die ze nodig hebben;
alleen als je 'width' en 'height' een specifieke waarde geeft, dan wordt die gebruikt.

Wat in jouw website gebeurt, is:
De menu-opties zijn li-elementen (lijst onderdelen)
deze liggen netjes boven op elkaar.

Het li-element dat gebruikt wordt voor Lookbook, heeft ook nog een child-element, namelijk een aparte lijst met vijf opties.

Bij het hoveren over Lookbook, klapt het child-element uit (de <ul> met class "submenu") en dat neemt dan automatisch de ruimte die het nodig heeft. Die ruimte wordt toegevoegd aan het parent-element, het <li>-element Lookbook.


Om dit te voorkomen, kun je het <li>-element Lookbook een vaste hoogte geven, van bijvoorbeeld 36 of 35 px. Dat is zo'n beetje de hoogte van de menu-opties.
Dat kun je doen door in de html code de hoogte toe te voegen:
HTML: 
<li id="menu-item-138" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-138" style="height: 35px; left: -10px; opacity: 1;"><a href="#">Lookbook</a>
.
In deze regel code is height: 35px; toegevoegd.


Mooier is natuurlijk om in het css-bestand de hoogte toe te voegen aan de relevante class, bijvoorbeeld aan .menu-item.
 
Super!!! Dat was de oplossing! Ik heb aan het css-bestand .menu-item toegevoegd met de hoogte en het werkt. Dat zo een kleine aanpassing alles in orde maakt...

Hartstikke bedankt!

Ernestine
 
Ik zou de witte buttons in ieder geval even lang maken. Zoals het nu is is het behoorlijk rommelig.
 
Nu loop ik tegen een ander probleem. Als ik b.v. in het submenu naar de tab 'Trouwen' wil gaan, dan verdwijnt het menu al voordat ik het kan selecteren...

??
 
Daar heb ik ook aan gedacht, maar ben bang dat ik dan veel moet aanpassen. In css alle menu elementen eruit en in index ook alles aanpassen. Het is een theme welke ik gekocht heb en ik weet niet precies welke elementen allemaal tot het menu horen. Ik dacht dat het misschien makkelijker zou zijn om hiervoor een oplossing te vinden...
 
Je hoeft niet alle css elementen van het menu te verwijderen. Ze blijven gewoon als wees achter. :)

En dat menu staat op zichzelf, dat kun je zelfs includen voor een beter overzicht.

Je hebt een mooie site, maar die buttons zijn behoorlijk "eenvoudig".

Ik beloof niks, maar als je me per pb een mailtje stuurt, zal ik je m'n emailadres geven.
Kun je de site opsturen en zal ik zo'n CSS menu inbouwen. Kun je het resultaat zien.
Gratis ?, ja gratis. :thumb:
En het blijft privé, jouw site komt niet verder dan mijn pc.
 
Dat zou erg fijn zijn, ik weet niet hoe je een menu kan includen...
Ik wilde een pb sturen, maar volgens mij moet ik dan lid worden of donateur?

Ps: net mijn site op mijn ipad bekeken en daar werken de buttons van het submenu wel goed...???
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan