Probleempje in navigation menu

Status
Niet open voor verdere reacties.
J

jorenman

Gebruiker
Lid geworden
27 jul 2013
Berichten
222
fout.jpggoed.jpg

Ik heb met CSS en HTML een navigation menu gemaakt, maar er is een probleem.

Als ik met mijn muis over een list item ga dan komt er een ul onderuit, alleen dan gaan de andere list-items naar rechts.
Het is moeilijk uit te leggen, maar als je naar de afbeeldingen kijkt, snap je denk ik wel wat ik bedoel.

Weet iemand hoe je ervoor zorgt dat de list-items niet naar rechts gaan en gewoon blijven staan als je met een muis over een list item gaat?

Hier heb je de bijbehorende CSS:
Code: 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
 body, p {
 margin: 0;
 }
 #header {
 margin: 0;
 height: 60px;
 width: 100%;
 background: #03325e;
 float: left;
 }
 #headmenu {
 margin-left: 45%;
 height: 60px;
 padding: 0;
 }
 #headmenu ul {
 margin: 0;
 padding: 0;
 list-style: none;
 height: 60px;
 }
 #headmenu ul li {
 margin: 0;
 line-height: 60px;
 padding-left: 18px;
 padding-right: 18px;
 float: left;
 display: block;
 font-family: Verdana;
 background: #03325e;
 font-size: 14px;
 }
 #headmenu ul li a {
 color: #b8b8b8;
 text-decoration: none;
 }
 #headmenu ul li a:hover {
 color: #fff;
 }
 #headmenu ul li:hover  ul {
 display: block;
 }
 #headmenu ul ul {
 display: none;
 position: relative;
 z-index: 2;
 }
 #headmenu ul ul li {
 float: none;
 }
 
Laatst bewerkt door een moderator:
Hoi jorenman, ik heb de universele menu framework in de bijlage gedaan. Het beste kun je de framework gebruiken. Als je de html erbij doet kan ik verder kijken.
 

Bijlagen

Hallo,

Ik snap vrij weinig van de zip file die je me hebt gestuurd.
Maar ik weet wel dat je in de zip file met width werkte, maar ik werk niet met width maar met padding.

De reden dat ik met padding werk is omdat je anders verschillende leegtes tussen de list items krijgt, omdat de woorden niet even lang zijn.

Weet iemand hoe ik dit kan oplossen en waarbij ik padding/margin kan blijven gebruiken?
 
Met het framework (css: regel 27-44) kun je elk css-only menu maken dat je wilt. Je hoeft dan niet meer na te denken over de werking, maar je kunt gelijk met de opmaak aan de gang. Ook op de manier zoals jij het wilt :d Helpen is lastig zonder de html van het menu....
 
Ik heb het navigatie menu gemaakt in Wordpress, dus ik denk dat je aan de HTML code niet zoveel hebt.
 
Het stukje html (alleen van het menu) zoals je het in de browser ziet zou zeker wel helpen... Misschien kun je iets met het volgende
Neem de menu framework op in je css (regel 27-44 van de css in de zip).
Zet class="menu" in de toplevel ul (het hoogste niveau)
Code: 
#header {
	width: 100%;
	height: 60px;
	float: left;
	background: #03325e;
}
#headmenu {
	margin-left: 45%;
	height: 60px;
}
#headmenu ul.menu a,
#headmenu ul.menu span {
	width: auto;
	line-height: 60px;
	padding: 0 18px;
	font-family: verdana, geneva, sans-serif;
	background: #03325e;
	font-size: 14px;
	color: #b8b8b8;
	white-space: nowrap;
}
#headmenu ul.menu li:hover > a,
#headmenu ul.menu li:hover > span {
	color: #fff;
}
Als je in de zip bij de html kijkt dan zie je dat er bij elk submenu geen <a> is opgenomen. Dit is gedaan voor touch screens (mobiles).

edit 1: ik had de background van #header en #headmenu verwisseld. Is aangepast in code hierboven :)
edit 2: het menu is cross-browser.
edit 3: bij de <a> heb ik een white-space: nowrap toegevoegd dan blijft de tekst netjes op 1 regel
edit 4: hover aangepast zodat je het menupad kan zien (alle parents op een hoger niveau hebben de hover kleur)
 
Laatst bewerkt:
Hier is de code van het HTML bestand:
HTML: 
<!doctype html>
<html>
<head>
<title>Peter Wouters | Home </title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="header">
	  <div id="logo">
	         <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-1') ) : endif; ?>
	  </div>
	  <div id="headmenu">
	         <?php wp_nav_menu(array('theme_location' => 'primary'));?>
	  </div>
</div>

Beste bron, jouw laatste code heeft helaas niet geholpen.
 
'theme_location' => 'primary' (custom menu??). Je geeft de php van wordpress. Heb je de html output van de live website pagina?
 
Knipsel.PNG

Hier heb je een afbeelding waar je de HTML structuur kan zien.
 
Bij mij werkt het.
menu.jpg
Heb je in je css ergens dingen staan die het menu aanpassen, bijvoorbeeld bij
#headmenu
.menu-header-menu-container
#menu-header-menu
.menu (andere .menu dan dat van mij)
of andere onderdelen van het menu (zoals menu-item-has-children)
 
Ik heb het menu wat ingekort (je kunt het lange menu uit de zip halen)
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headmenu">
<div class="menu-header-menu-container">
<ul id="menu-header-menu" class="[COLOR="#0000FF"]menu[/COLOR]">
  <li><a href="#">Home</a></li>
  <li><a href="#">Producten</a>
    <ul>
      <li><a href="#">Laptops</a></li>
    </ul>
  </li>
</ul>
</div>
</div>
</div>
</div> <!--/wrapper-->
</body>
</html>
Code: 
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%;
	font: inherit; vertical-align: baseline;
}

/* wat algemene dingetjes */
html, body, div, ul, li, a, p, span {
	font: normal 100% arial, sans-serif;
}
body {
	width: 100%;
	height: 100%;
	background: #ccc;
}
a {
	text-decoration: none; cursor: pointer;}
a:hover, a:focus {
	text-decoration: underline;}
a:active, a:focus {
	outline: 0; outline-style: none; outline-width: 0;}
#wrapper {
	width: 900px;
	height: 600px;
	margin: 50px auto 0 auto;
	background: #ddd;
}

/*  menu framework - niet wijzigen */
.menu, .menu li, .menu ul, .menu a, .menu span {
	margin:0;padding:0;border:0;outline:0;list-style:none;}
.menu {
	position:relative;z-index:597;float:left;}
.menu li {
	float:left;min-height:1px;line-height:1;vertical-align:middle;}
.menu li:hover {
	position:relative;z-index:599;cursor:pointer;}
.menu a, .menu span {
	display:block;text-decoration:none;}
.menu ul {
	visibility:hidden;position:absolute;top:100%;left:0;z-index:598;}
.menu ul li {
	float:none;}
.menu ul ul {
	top:0;left:100%;}
.menu li:hover > ul {
	visibility:visible;}

/* opmaak van menu */
#header {
	width: 100%;
	height: 60px;
	float: left;
	background: #03325e;
}
#headmenu {
	margin-left: 45%;
	height: 60px;
}
#headmenu ul.menu a,
#headmenu ul.menu span {
	width: auto;
	line-height: 60px;
	padding: 0 18px;
	font-family: verdana, geneva, sans-serif;
	background: #03325e;
	font-size: 14px;
	color: #b8b8b8;
	white-space: nowrap;
}
#headmenu ul.menu li:hover > a,
#headmenu ul.menu li:hover > span {
	color: #fff;
}
 
Laatst bewerkt:
Dankjewel!

Het heeft gewerkt!

Dankjewel dat je hebt geantwoord!

Met vriendelijke groeten,

Jorenman
 
Oja, over de touch screens. Bij een touch screen werkt dit submenu (menukop is tekst) beter
<li><span>Producten</span>
<ul>
... dan dit submenu (menukop is een pagina)
<li><a href="#">Producten</a>
<ul>

Suc6 met je website :thumb:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan