menu past zich niet goed aan de breedte van een mobiele versie

Status
Niet open voor verdere reacties.

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
hallo mijn menu past zich niet goed aan de breedte van een mobiele versie. de top menu's schuiven dan over elkaar heen, hoe krijg je dit netjes?
ik heb echter wel een max-width opgegeven in de nav.
max-width: 100%;
opmaak is met html5 en css.

Code:
/* reset */

html, body, div, ul, li, a, p, img, span, iframe, h1, h2, h3, h4 {
	margin: 0; padding: 0; border: 0; outline: 0;
	font-size: 100%; vertical-align: baseline; background: transparent;
}

body {background: url(images/bg-dark.jpg) fixed; color: #FFFFFF; font: normal 1em arial, helvetica, sans-serif;} /* verander kleur van de p atribuut */


#skippy 
{
position: absolute; 
left: -2000px; 
top: 0; 
z-index: 50; 
width: 10.5em; 
border: red solid 3px; 
background: white; 
font-size: 2em; 
text-align: center; 
line-height: 2em;
}
#skippy:focus, 
#skippy:active 
{
left: 50%; 
margin-left: -5.25em;
}
nav 
{
display: block; 
width: 39.8em; 
max-width: 100%;  
margin: 30px auto 0;
}
ul 
{
list-style-type: none; 
margin: 0; 
padding: 0;
}
li 
{
position: relative; 
float: left; 
width: 6.5em; 
color: black; 
background: #e4e4e4; 
line-height: 2em; 
text-align: center; 
-moz-transition: 0.2s; 
-ms-transition: 0.2s; 
-o-transition: 0.2s; 
-webkit-transition: 0.2s; 
transition: 0.2s;
}
#top > li 
{
border: black solid; 
border-width: 1px 1px 1px 0;
}
#top li:first-child 
{
border-left: black solid 1px;
}
li ul
{
position: absolute; 
top: -2000px; 
left: -1px; 
opacity: 0; 
-moz-transition: opacity 0.3s; 
-ms-transition: opacity 0.3s; 
-o-transition: opacity 0.3s; 
-webkit-transition: opacity 0.3s; 
transition: opacity 0.3s;
}
li li
 {
border: black solid; 
border-width: 0 1px 1px;
}
nav a 
{
display: block; 
text-decoration: none; 
color: black;
}
li:hover
 {
background: white;
}
li:hover ul 
{
top: 2em; 
margin-top: 1px;
opacity: 1;
}


HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hitdance radio</title>
<meta name="description" content="hitdance radio, met muziek voor jong en oud, en de leukste dj's"> 
<meta name="keywords" content="dance, hardstyle, apresski, nederlands, rock, jaren 70, jaren 80, jaren 90, hitdance, radio, studio, radio station, verzoekplaat, live streams, hitdance radio, spiegelplaat, online, dj team, speler, verzoekje, boekingen, dj eric, dj sylvester,  facebook, programma, draaien, informatie, sponsors">
<meta name="viewport" content="width=device-width, user-scalable=yes">
 
<link href="hitdance.css" rel="stylesheet" type="text/css">

</head>

<body>

<a id="skippy" href="#content" tabindex="1">Skip menu met links</a>
<nav>
	<ul id="top">
		<li>Knop 1
			<ul>
				<li><a href="menu-066-achter-dl.html" title="Knop 1 - 1">Knop 1 - 1</a></li>
				<li><a href="menu-066-achter-dl.html" title="Knop 1 - 2">Knop 1 - 2</a></li>
			</ul>
		</li>
		<li>Knop 2
			<ul>
				<li><a href="menu-066-achter-dl.html" title="Knop 2 - 1">Knop 2 - 1</a></li>
				<li><a href="menu-066-achter-dl.html" title="Knop 2 - 2">Knop 2 - 2</a></li>
			</ul>
		</li>
		<li>Knop 3
			<ul>
				<li><a href="menu-066-achter-dl.html" title="Knop 3 - 1">Knop 3 - 1</a></li>
				<li><a href="menu-066-achter-dl.html" title="Knop 3 - 2">Knop 3 - 2</a></li>
			</ul>
		</li>
		<li>Knop 4
			<ul>
				<li><a href="menu-066-achter-dl.html" title="Knop 4 - 1">Knop 4 - 1</a></li>
				<li><a href="menu-066-achter-dl.html" title="Knop 4 - 2">Knop 4 - 2</a></li>
			</ul>
		</li>
		<li>Knop 5
			<ul>
				<li><a href="menu-066-achter-dl.html" title="Knop 5 - 1">Knop 5 - 1</a></li>
				<li><a href="menu-066-achter-dl.html" title="Knop 5 - 2">Knop 5 - 2</a></li>
			</ul>
		</li>
		<li>Knop 6
			<ul>
				<li><a href="menu-066-achter-dl.html" title="Knop 6 - 1">Knop 6 - 1</a></li>
				<li><a href="menu-066-achter-dl.html" title="Knop 6 - 2">Knop 6 - 2</a></li>
			</ul>
		</li>
	</ul>
</nav>

</body>
</html>
 
Dit is het nu
menu100.png
Wat wil je hier veranderen?
 
menu past zich niet goed aan de breedte van een mobiele versie. de top menu's schuiven dan over elkaar heen, hoe krijg je dit netjes?
dit is goed bij een mouseover:
a.jpg
maar als ik het scherm verklein naar bv een mobiel versie schuift het menu in elkaar, en is de top menu niet meer leesbaar. bij een mouseover gebeurd er niks en zijn sommige sub menu's weg.
zie:
b.jpg
 
Misschien heb je iets aan dit mobile menu (alleen css).
Even in een apart bestand testen en dan aanpassen voor je website.
Code:
HTML:

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<title>Hitdance radio</title>
<link href="hitdance.css" rel="stylesheet">
</head>
<body>
<nav>
<label for="show-menu" class="show-menu">Toon Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
  <li><a href="index.php">Knop 1</a></li>
  <li><a href="javascript:void(0);">Knop 2 ↓</a>
    <ul class="hidden">
      <li><a href="index.php">Sub 2.1</a></li>
      <li><a href="index.php">Sub 2.2</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">Knop 3 ↓</a>
    <ul class="hidden">
      <li><a href="index.php">Sub 3.1</a></li>
      <li><a href="index.php">Sub 3.2</a></li>
      <li><a href="index.php">Sub 3.3</a></li>
    </ul>
  </li>
  <li><a href="index.php">Knop 4</a></li>
  <li><a href="javascript:void(0);">Knop 5 ↓</a>
    <ul class="hidden">
      <li><a href="index.php">Sub 5.1</a></li>
      <li><a href="index.php">Sub 5.2</a></li>
      <li><a href="index.php">Sub 5.3</a></li>
    </ul>
  </li>
  <li><a href="index.php">Knop 6</a></li>
</ul>
</nav>
</body>
</html>

CSS:

nav {
  width: 730px;
  margin: 30px auto 0 auto;
  display: block;
  position: relative;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}
nav li {
  display: inline-block;
  float: left;
  margin-right: 1px;
}
nav li a {
  display: block;
  min-width: 120px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-family: "helvetica neue", helvetica, arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
}
nav li:hover a {
  background: #19c589;
}
nav li:hover ul a {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}
nav li:hover ul a:hover {
  background: #19c589;
  color: #fff;
}
nav li ul {
  display: none;
}
nav li ul li {
  display: block;
  float: none;
}
nav li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}
nav ul li a:hover + .hidden, .hidden:hover {
  display: block;
}
nav .show-menu {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
  display: none;
}
nav input[type=checkbox]{
  display: none;
  -webkit-appearance: none;
}
nav input[type=checkbox]:checked ~ #menu{
  display: block;
}

@media screen and (max-width : 760px){
  nav {
    width: 100%;
  }
  nav ul {
    position: static;
    display: none;
  }
  nav li {
    margin-bottom: 1px;
  }
  nav ul li, li a {
    width: 100%;
  }
  nav .show-menu {
    display: block;
  }
}

Suc6.
 
Het is wel een verschil idd.
Ik weet niet of dit handig is voor tablet en mobiel gebruikers dat ze op deze manier de menu moeten gebruiken.
Punt is dat mijn huidige website te oud is en dus in een nieuw jasje gestoken moet worden.

Dus zal dit een handige menu zijn anno 2014/2015 ?

p.s. Aanpassen van kleur en letter type e.d. komt wel goed.
 
Het menu wat je nu hebt is idd niet zo handig voor responsive sites.
 
De voorbeeld bron die je me gaf, kwam wel overeen ongeveer met de dat menu van bv qmusic
als ik op qmusic bv hun website kleiner maak, dan komt er ook een soort knop met toon menu.

Dus lijkt me dit de beste oplossing dan.
voor zekerheid check ik t ff op de site check.
 
Ik heb de html en css uit elkaar getrokken zodat deze overzichtelijk is
Code:
index.php

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<title>Mobile css menu</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav>
<label for="mobmenu">Menu</label>
<input type="checkbox" id="mobmenu">
<ul>
  <li><a href="index.php">Knop 1</a></li>
  <li><a href="javascript:void(0);">Knop 2 ↓</a>
    <ul>
      <li><a href="index.php">Sub 2.1</a></li>
      <li><a href="index.php">Sub 2.2</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">Knop 3 ↓</a>
    <ul>
      <li><a href="index.php">Sub 3.1</a></li>
      <li><a href="index.php">Sub 3.2</a></li>
      <li><a href="index.php">Sub 3.3</a></li>
    </ul>
  </li>
  <li><a href="index.php">Knop 4</a></li>
  <li><a href="javascript:void(0);">Knop 5 ↓</a>
    <ul>
      <li><a href="index.php">Sub 5.1</a></li>
      <li><a href="index.php">Sub 5.2</a></li>
    </ul>
  </li>
  <li><a href="index.php">Knop 6</a></li>
</ul>
</nav>
</body>
</html>

style.css

/* nav - change only if you know what you're doing */
nav, nav * {
	margin: 0; padding: 0; border: 0; box-sizing: border-box; }
nav {
	display: block; position: relative; }
nav ul {
	list-style-type: none; position: absolute; }
nav li {
	display: inline-block; float: left; }
nav li a {
	display: block; text-decoration: none; }
nav li ul {
	display: none; }
nav li ul li {
	display: block; float: none; }
nav li ul li a {
	width: auto; }
nav ul li a:hover + ul,
nav ul li:hover + ul,
nav ul li ul:hover {
	display: block; }
nav label {
	text-decoration: none; display: none; }
nav input[type=checkbox] {
	display: none; -webkit-appearance: none; }
nav input[type=checkbox]:checked ~ ul {
	display: block; }

/* nav layout */

nav { /* wrapper */
	width: 730px;
	margin: 30px auto 0 auto;
}
nav li { /* space between buttons */
	margin-right: 1px;
}
nav li a { /* top & submenu */
	min-width: 120px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-family: "helvetica", arial, sans-serif;
	color: #fff;
	background: #2f3036;
}
nav li ul li a { /* submenu */
	min-width: 120px;
	padding: 0 20px;
}

/* nav hover (in this order) */

nav li:hover a { /* parent:hover */
	background: #19c589;
}
nav li:hover ul a { /* submenu of parent:hover */
	height: 40px;
	line-height: 40px;
	color: #2f3036;
	background: #f3f3f3;
}
nav li:hover ul a:hover { /* submenu:hover of parent:hover */
	color: #fff;
	background: #19c589;
}
nav *:hover { /* transition */
	-webkit-transition: background-color 200ms;
	-moz-transition: background-color 200ms;
	-o-transition: background-color 200ms;
	transition: background-color 200ms;
}

/* nav mobile button */

nav label { /* button */
	padding: 10px 0;
	text-align: center;
	font-family: "helvetica", arial, sans-serif;
	color: #fff;
	background: #19c589;
}

/* nav responsive @media */

@media screen and (max-width : 760px) {
	/* nav - change only if you know what you're doing */
	nav {
		width: 100%; }
	nav ul {
		position: static; display: none; }
	nav li {
		margin-bottom: 1px; }
	nav ul li, li a {
		width: 100%; }
	nav label {
		display: block; }
}
 
Ik heb de html en css uit elkaar getrokken zodat deze overzichtelijk is

Had ik ook gedaan bron :p

Ik ga nu verder proberen de menu in te vullen en de positie verbeteren waar nodig van het menu.
zal hem hierna eens gaan posten, kijken wat je er van vind.
 
Laatst bewerkt:
nou bron bij deze het menu aangepast. en voorzien van /* commentaar */

Menu zelf krijg ik niet precies in het midden. (dus als dit iemand weet?)

HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<title>Hitdance radio</title>
<link href="hitdance.css" rel="stylesheet">
</head>
<body>
<nav>
<label for="show-menu" class="show-menu">Toon Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
  <li><a href="index.html">Home</a></li>
  <li><a href="javascript:void(0);">Nieuws en Info</a>
    <ul class="hidden">
	  <li><a href="index.html">Informatie</a></li>
	  <li><a href="index.html">Biografie</a></li>
      <li><a href="index.html">Nieuws</a></li>
      <li><a href="index.html">Weer</a></li>
	  <li><a href="index.html">Verkeer</a></li>
	  <li><a href="index.html">Recente plaat</a></li>
	  <li><a href="index.html">Playlist</a></li>
	  <li><a href="index.html">Storingen</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">Dj & Programma</a>
    <ul class="hidden">
      <li><a href="index.html">Programma</a></li>
      <li><a href="index.html">Ons dj team</a></li>
	  <li><a href="index.html">Live mix dj</a></li>
	  <li><a href="index.html">Dj smurf</a></li>
	  <li><a href="index.html">Apresski</a></li>
	  <li><a href="index.html">Nederlands</a></li>
	  <li><a href="index.html">Dance</a></li>
	  <li><a href="index.html">Top 40</a></li>
	  <li><a href="index.html">House</a></li>
	  <li><a href="index.html">Hardstyle</a></li>
    </ul>
  </li>
  <li><a href="index.html">Win & Foto's</a>
      <ul class="hidden">
      <li><a href="index.html">Raad de stem</a></li>
      <li><a href="index.html">Foto wedstrijd</a></li>
	  <li><a href="index.html">Selfie's</a></li>
	  <li><a href="index.html">Dj studio</a></li>
	  <li><a href="index.html">Dj gallery</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">Link & Partners</a>
    <ul class="hidden">
      <li><a href="index.html">Live stream</a></li>
      <li><a href="index.html">Mobiel stream</a></li>
	  <li><a href="index.html">Streampagina</a></li>
      <li><a href="index.html">Startpagina</a></li>
	  <li><a href="index.html">Partners</a></li>
      <li><a href="index.html">Link's</a></li>
    </ul>
  </li>
  <li><a href="index.html">Contact & Faq</a>
      <ul class="hidden">
	  <li><a href="index.html">Nieuws brief</a></li>
      <li><a href="index.html">Mail uw dj</a></li>
      <li><a href="index.html">Mail redactie</a></li>
	  <li><a href="index.html">Dropbox</a></li>
      <li><a href="index.html">Boekingen</a></li>
	  <li><a href="index.html">Verzoekplaat</a></li>
      <li><a href="index.html">Chatbox</a></li>
	  <li><a href="index.html">Dj gezocht</a></li>
      <li><a href="index.html">Gastenboek</a></li>
	  <li><a href="index.html">Facebook</a></li>
      <li><a href="index.html">Twitter</a></li>
	  <li><a href="faq.html">Faq</a></li>
    </ul>
  </li>
</ul>
</nav>
</body>
</html>

Code:
/* reset */

html, body, div, ul, li, a, p, img, span, iframe, h1, h2, h3, h4 {
	margin: 0; padding: 0; border: 0; outline: 0;
	font-size: 100%; vertical-align: baseline; background: transparent;
}

body {background: url(images/bg-dark.jpg) fixed; color: #FFFFFF; font: normal 1em arial, helvetica, sans-serif;} /* verander kleur van de p atribuut */

nav {
  width: 850px; /* menu meer px gegeven zodat deze meer naar links ging, hierdoor in margin-right in nav li meer px gegeven */
  margin: 30px auto 0 auto;
  display: block;
  position: relative;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}
nav li {
  display: inline-block;
  float: left;
  margin-right: 15px; /* menu meer uit elkaar getrokken door meer px toe te voegen, en de width in de nav aan te passen */
}
nav li a {
  display: block;
  min-width: 120px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-family: "helvetica neue", helvetica, arial, sans-serif;
  color: #FFFFFF; /* tekst kleur menu bovenste rij */
  background: #0099CC; /* menu kleur bovenste rij */
  text-decoration: none;
}
nav li:hover a {
  background: #19c589;
}
nav li:hover ul a {
  background: #ffffcc; /* achtergrond kleur van de sub menu */
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}
nav li:hover ul a:hover {
  background: #ff0066; /* achtergrond kleur van de mouseover in het sub menu */
  color: #003333; /* tekst kleur van de mouseover in het sub menu */
}
nav li ul {
  display: none;
}
nav li ul li {
  display: block;
  float: none;
}
nav li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 10px; /* breedte van sub menu op 10 px gezet, zodat de tekst meer in gecentreerd staat */ 
  text-align: left; /* Deze code toegevoegd om de tekst links uit te lijnen */
}
nav ul li a:hover + .hidden, .hidden:hover {
  display: block;
}
nav .show-menu {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
  display: none;
}
nav input[type=checkbox]{
  display: none;
  -webkit-appearance: none;
}
nav input[type=checkbox]:checked ~ #menu{
  display: block;
}

@media screen and (max-width : 760px){
  nav {
    width: 100%;
  }
  nav ul {
    position: static;
    display: none;
  }
  nav li {
    margin-bottom: 1px;
  }
  nav ul li, li a {
    width: 100%;
  }
  nav .show-menu {
    display: block;
  }
}
 
Het ziet er goed uit :thumb: ik heb het niet geprobeerd omdat je aangeeft dat alles goed werkt.
Tegenwoordig is het gebruikelijk dat alles in css met kleine letters wordt geschreven (zoals #0099cc).
Je vraagt iets over het centreren van het menu. Zit er een <div> of iets anders om het menu heen met een margin, padding ofzo?

Het lijkt erop dat je bij regel 28 in de html (hierboven) iets hebt staat wat de boel erg kleurloos maakt :)
 
Laatst bewerkt:
Je vraagt iets over het centreren van het menu. Zit er een <div> of iets anders om het menu heen met een margin, padding ofzo?

ofzo ?

ben echt aan het puzzelen, maar krijg t niet echt gevonden.
iets geprobeerd met zelfs, tekst align atribuut op center bv. maar wil niet echt mee werken :confused:
ik heb het best druk, omdat ik ook me radio steeds uitznd onder anderen, maar ben regelmatig mee bezig en aan het uitzoeken.
maar tot nu toe, zonder suc6 :(
 
Meten = Weten... in het kort
Stel, je gaat ervan uit dat bij 768px het mobile menu wordt getoond. Bij @media komt dan 768px te staan. De knoppenbalk moet dus kleiner zijn dan 768px. Met 6x knop 118px en 5x tussenruimte 11px (708+55=763px) lukt dit. Dus bij nav staat width: 763px

Je kunt beter deze html + css gebruiken vanwege een logische indeling.
Code:
HTML:

<nav class="mobnav">
<label for="mobnavbtn">Toon Menu</label>
<input type="checkbox" id="mobnavbtn">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="javascript:void(0);">Nieuws en Info</a>
    <ul>
      <li><a href="index.html">Informatie</a></li>
      <li><a href="index.html">Biografie</a></li>
      <li><a href="index.html">Nieuws</a></li>
      <li><a href="index.html">Weer</a></li>
      <li><a href="index.html">Verkeer</a></li>
      <li><a href="index.html">Recente plaat</a></li>
      <li><a href="index.html">Playlist</a></li>
      <li><a href="index.html">Storingen</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">Dj &amp; Programma</a>
    <ul>
      <li><a href="index.html">Programma</a></li>
      <li><a href="index.html">Ons dj team</a></li>
      <li><a href="index.html">Live mix dj</a></li>
      <li><a href="index.html">Dj smurf</a></li>
      <li><a href="index.html">Apresski</a></li>
      <li><a href="index.html">Nederlands</a></li>
      <li><a href="index.html">Dance</a></li>
      <li><a href="index.html">Top 40</a></li>
      <li><a href="index.html">House</a></li>
      <li><a href="index.html">Hardstyle</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">Win &amp; Foto's</a>
    <ul>
      <li><a href="index.html">Raad de stem</a></li>
      <li><a href="index.html">Foto wedstrijd</a></li>
      <li><a href="index.html">Selfie's</a></li>
      <li><a href="index.html">Dj studio</a></li>
      <li><a href="index.html">Dj gallery</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">Link &amp; Partners</a>
    <ul>
      <li><a href="index.html">Live stream</a></li>
      <li><a href="index.html">Mobiel stream</a></li>
      <li><a href="index.html">Streampagina</a></li>
      <li><a href="index.html">Startpagina</a></li>
      <li><a href="index.html">Partners</a></li>
      <li><a href="index.html">Link's</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">Contact &amp; Faq</a>
    <ul>
      <li><a href="index.html">Nieuws brief</a></li>
      <li><a href="index.html">Mail uw dj</a></li>
      <li><a href="index.html">Mail redactie</a></li>
      <li><a href="index.html">Dropbox</a></li>
      <li><a href="index.html">Boekingen</a></li>
      <li><a href="index.html">Verzoekplaat</a></li>
      <li><a href="index.html">Chatbox</a></li>
      <li><a href="index.html">Dj gezocht</a></li>
      <li><a href="index.html">Gastenboek</a></li>
      <li><a href="index.html">Facebook</a></li>
      <li><a href="index.html">Twitter</a></li>
      <li><a href="faq.html">Faq</a></li>
    </ul>
  </li>
</ul>
</nav>

CSS:

/* begin / alleen wijzigen als je weet wat je doet */
.mobnav ul, .mobnav li, .mobnav a, .mobnav label, .mobnav input {
	margin: 0; padding: 0; border: 0; box-sizing: border-box; }
.mobnav {
	display: block; position: relative; }
.mobnav ul {
	list-style-type: none; position: absolute; }
.mobnav li {
	display: inline-block; float: left; }
.mobnav li a {
	display: block; text-decoration: none; }
.mobnav li ul {
	display: none; }
.mobnav li ul li {
	display: block; float: none; }
.mobnav li ul li a {
	width: auto; }
.mobnav ul li a:hover + ul,
.mobnav ul li:hover + ul,
.mobnav ul li ul:hover {
	display: block; }
.mobnav label {
	text-decoration: none; display: none; }
.mobnav input[type=checkbox] {
	display: none; -webkit-appearance: none; }
.mobnav input[type=checkbox]:checked ~ ul {
	display: block; }
/* einde / alleen wijzigen als je weet wat je doet */

.mobnav { /* wrapper */
	width: 763px; /* 6x knop + 5x tussenruimte */
	margin: 30px auto 0 auto;
}
.mobnav li { /* ruimte links van knop */
	margin-left: 11px;
}
.mobnav li:first-child { /* geen ruimte links van 1e knop */
	margin: 0;
}
.mobnav li a { /* top & submenu */
	width: 118px;
	height: 50px;
	line-height: 50px;
	padding-top: 15px;
	text-align: center;
	font: normal 15px "helvetica", arial, sans-serif;
	color: #fff;
	background: #0099cc;
}
.mobnav li ul li { /* submenu */
	margin: 0; /* geen ruimte links in submenu */
}
.mobnav li ul li a { /* submenu */
	min-width: 118px;
	padding: 0 10px;
	text-align: left;
}

/* mouseover topmenu */
.mobnav li:hover a {
	background: #19c589;
}
/* knop submenu */
.mobnav li:hover ul a {
	height: 40px;
	line-height: 40px;
	color: #2f3036;
	background: #ffffcc;
}
/* mouseover knop submenu */
.mobnav li:hover ul a:hover {
	color: #003333;
	background: #ff0066;
}

/* mobile button */
.mobnav label {
	padding: 10px 0;
	text-align: center;
	font: normal 14px "helvetica", arial, sans-serif;
	color: #fff;
	background: #19c589;
}

/* responsive @media */
@media screen and (max-width: 768px) {
	/* begin / alleen wijzigen als je weet wat je doet */
	.mobnav {
		width: 100%; }
	.mobnav ul {
		position: static; display: none; }
	.mobnav li { /* wat ruimte onder knop */
		margin: 0 0 1px 0; }
	.mobnav li, .mobnav a, .mobnav li ul li, .mobnav li ul li a {
		min-width: 100%; }
	.mobnav label {
		display: block; }
	/* einde / alleen wijzigen als je weet wat je doet */
}

Suc6. Have fun.
 
Meten = Weten... in het kort
Stel, je gaat ervan uit dat bij 768px het mobile menu wordt getoond. Bij @media komt dan 768px te staan. De knoppenbalk moet dus kleiner zijn dan 768px. Met 6x knop 118px en 5x tussenruimte 11px (708+55=763px) lukt dit. Dus bij nav staat width: 763px

dus eigenlijk is het verhaal van de bron code gebaseerd op scherm resolutie van de gebruiker?
d.w.z. iemand met een scherm die de resolutie vanaf en kleiner dan 768px heeft staan, deze weergave goed zal tonen.
Maar hoe zit het verhaal dan met mensen met hogere resoluties. krijgen die dan kale plekken in hun scherm te zien aan de linker en rechter zijde (zodat de hele zaak gecentreerd is in t midden) of staat dan alles in wir war boel op hun scherm? ik vermoed t eerste.

misschien is me uitleg in deze vraag niet zo helder, maar dit is zoals ik hem omschrijf :D

wat betreft de voorgaande bericht: #11
bedoel je deze code aan de css?

Code:
 .mobnav { /* wrapper */
	width: 763px; /* 6x knop + 5x tussenruimte */
	margin: 30px auto 0 auto;
}
.mobnav li { /* ruimte links van knop */
	margin-left: 11px;
}
.mobnav li:first-child { /* geen ruimte links van 1e knop */
	margin: 0;
}
 
mensen met hogere resoluties. krijgen die dan kale plekken in hun scherm te zien aan de linker en rechter zijde (zodat de hele zaak gecentreerd is in t midden) of staat dan alles in wir war boel op hun scherm? ik vermoed t eerste
Alles wordt netjes gecentreerd in het midden door "auto" in de regel margin: 30px auto 0 auto;

wat betreft de voorgaande bericht: #11
Met :first-child wordt het allereerste kind (hier de eerste li) van een ouder (hier ul) bedoeld. Zie #13. Hierdoor krijg je 5x (niet 6x) een margin-left: 11px;

Suc6. Have fun.
 
Laatst bewerkt:
Met :first-child wordt het allereerste kind (hier de eerste li) van een ouder (hier ul) bedoeld. Zie #13. Hierdoor krijg je 5x (niet 6x) een margin-left: 11px;

Suc6. Have fun.


aha duidelijk nu! wel best ingewikkeld, maar nu snap ik hem wel beetje.
ik tel er idd. dan 5x ipv 6x.
maar zal wel goed moeten nadenken, ik lees dit nog ff paar keer terug op me gemak.

bedankt. :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan