mouse over menu

R-Mijnten

Hallo allemaal,

Ik sukkel nu tegen een klein probleempje aan.
Momenteel ben ik bezig met een submenu mouse over in CSS.
Hoe zorg ik er nu voor dat zodra ik niet over "voetproblemen" ga het menu mooi aansluit bij de rest. Als ik er wel overheen ga moeten ze natuurlijk verschuiven naar beneden.

Menu ingeklapt

Menu uitgeklapt

PHP

<ul class="topmenu">
						<li><a href="index.php?p=voetzorg">Voetzorg</a></li>
						<li><a href="index.php?p=tarieven">Tarieven voetverzorging</a></li>
						<li class="submenu"><a href="index.php?p=voetproblemen">Voetproblemen</a>
							<ul>
								<li><a href="#">Test 1</a></li>
								<li><a href="#">Test 2</a></li>
								<li><a href="#">Test 1</a></li>
							</ul>
						</li>
						<li><a href="index.php?p=producten">Producten Kathleen Kay</a></li>
						<li><a href="index.php?p=foto">Foto's van de praktijk</a></li>
					</ul>

Meer tonen

PHP

ul.topmenu, ul.topmenu ul {
	list-style-image:  url(/images/square.png);
	color: #00b4e4;
	font-size: 14px;
	line-height: 24px;
} 


ul.topmenu li  a{
	color: #646567;
	text-decoration: none;
	font-size: 12px;
	margin-top: 10px;
} 
ul.topmenu li  a:hover{
	color: #00b4e4;
} 


ul.topmenu li ul {
  visibility: hidden; 
  color: #00b4e4;} 
  
ul.topmenu li.submenu:hover ul {
  visibility: visible;
}

Meer tonen

Alvast bedankt!

NielsB

display none en block gebruiken dan haalt die dat lege stuk weg en vervangt die het als je hovert.

daarbij werk met een z-index !

jopitan

Als je van style houdt heb ik dit even snel voor jquery gemaakt:

PHP

$(function() {
			done = 1;
			$("body").on('mouseenter', 'li.submenu', function() {
				if(done == 1) {
					done = 0;
					$('ul', this).toggle(500, function() {
						done = 1;
					});
				}
			});
			$("body").on('mouseleave', 'li.submenu', function() {
				if(done == 1) {
					done = 0;
					$('ul', this).toggle(500, function() {
						done = 1;
					});
				}
			});
		});

Meer tonen

Haal ul.topmenu li.submenu:hover ul uit je css en vervang visibility met display: none; in ul.topmenu li ul.

Als je vragen hebt over waarom ik wat heb gedaan moet je het maar zeggen.

De CSS ziet er bij mij overigens nu zo uit:

PHP

ul.topmenu, ul.topmenu ul { 
		list-style-image:  url(/images/square.png); 
		color: #00b4e4; 
		font-size: 14px; 
		line-height: 24px; 
	}  


	ul.topmenu li  a{ 
		color: #646567; 
		text-decoration: none; 
		font-size: 12px; 
		margin-top: 10px; 
	}  
	
	ul.topmenu li  a:hover{ 
		color: #00b4e4; 
	}  


	ul.topmenu li ul { 
		display: none;
		color: #00b4e4;
	}

Meer tonen

Trouwens probeer geen line-height te gebruiken in menu items, probeer paddings instead

padding: Tpx Rpx Bpx Lpx; (T = Top, R = Right, enzovoort)

R-Mijnten

Probleem opgelost!

Thanks Jopitan!:cheer:

:slotje:

ICTscripters

Dé plek voor IT

Dé plek voor IT

nieuwe game

Criminolz

[Beta] Ottomaan: gratis browserspel met een echte, levende stad. Feedback gezocht!

Port Father: beta van een browsergame in Antwerpen 1931, feedback welkom

Maffia Hotel: een browsergame waarin je van lobbygast naar spil van het hotel groeit

Crime Club volledig herschreven vanaf nul

Malavita (nieuwe maffia game, van 0)

Herkent deze Notion-structuurscan echte problemen?

[Aanbod] Stadskaart voor je browsergame: van menu naar klikbare stad, vanaf €200

[Verkoop] G4G (Gangsters 4 Gangsters): volledige broncode, nieuw gebouwd in PHP 8.3 | € 30 per domein

[TE KOOP] Malavita.be [Maffiaspel, gebaseerd op omicidio.nl, unieke code]

mouse over menu

Registratie

PHP waarschuwt voor twee ernstige bugs die makkelijk uit te buiten lijken

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2