login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Submenu's wisselen van height

Offline Jointjeff - 17/07/2012 18:06
Avatar van JointjeffHTML interesse Hallo iedereen,

Ik zit met de volgende uitdaging. Als iemand hovert over een list-item moet deze hoger worden. Nu kan ik het probleem het beste laten zien door middel van een voorbeeld: http://jsfiddle.net/XUFv5/

Je ziet dat het hoveren effect heeft op de posities van de andere list items. Ik had daarom al een lelijke oplossing bedacht door er een div-clear-both tussen te zetten, maar dat krijg ik niet verwerkt in de menu functie van WordPress.

Hebben jullie enig idee hoe ik dus dit (http://jsfiddle.net/xQvXk/) resultaat kan bereiken, zonder er een lelijke div-clear-both tussen te zetten?

Hopende op hulp!

6 antwoorden

Gesponsorde links
Offline icemar - 18/07/2012 08:33 (laatste wijziging 18/07/2012 09:50)
Avatar van icemar Lid Je menu is al te breed voor je ul.
Daarnaast klopt het gedrag is geen fout.
Is alleen dat de li groter wordt wil je daar nog meer items in maken ?

In afwachting van je reactie.


edit om spelfout
Offline Jointjeff - 18/07/2012 09:21
Avatar van Jointjeff HTML interesse Icemar, het gedrag klopt inderdaad. Volgens mij heb ik niet aangegeven dat dat niet het geval is. Mijn vraag is hoe ik het wel kan realiseren.

De li veranderd van hoogte wanneer men hovert. Het is alleen niet de bedoeling (ondanks dat gedrag geen fout is), dat het allemaal door elkaar gaat.

De li wordt groter omdat er een submenu binnen de li moet worden weergeven als men hovert.
Offline icemar - 18/07/2012 09:49
Avatar van icemar Lid Hier staan een correct voorbeeld van wat jij wil maken
http://www.lateralcode.com/css-drop-down-menus/
suc6 er mee
Offline Jointjeff - 18/07/2012 09:57
Avatar van Jointjeff HTML interesse Icemar, dat wil ik niet maken. Heb je de voorbeelden wel gezien? Een dropdown maken wil me nog wel lukken, dit is echter een ander probleem.
Offline icemar - 18/07/2012 15:07
Avatar van icemar Lid Ja heb je voorbeeld gezien en is niet anders te maken dan op de manier die hier bovenstaat.

Of je moet alles met javascript gaan maken maar aangezien je dit in wordpress wil gebruiken is dit geen optie.
Offline Jointjeff - 18/07/2012 15:17
Avatar van Jointjeff HTML interesse Ik heb het inmiddels opgelost door de vierde li een clear:both mee te geven.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $("#sitemap > ul > li:nth-child(4)").addClass('laatste');
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.214s