Responsive menu [OPGELOST]

[sjoerdd87]

Hallo allemaal,

Ik zit met een probleem, ik krijg het niet voor elkaar om een responsive menu te maken voor mijn website, ik heb al op verschillende site gezocht maar ik kan geen geschikt menu vinden.

Hoe doen jullie dat? of heeft iemand een goed menu script voor mij? met uitleg? Het liefst alleen CSS geschikt voor dropdown en hij moet onder elkaar schuiven ipv in het bekende hamburger icoon.

Veel vragen, maar ik hoop dat iemand mij kan helpen.

[pasmaskas]

Link naar informatie: http://pmkmedia.nl/grid

Link naar een voorbeeld: http://grid.pmkmedia.nl

Zip bestand met alle bestanden: http://grid.pmkmedia.nl/GRID-1200-2.2.3.zip

Menu Sjabloon: http://grid.pmkmedia.nl/grid/cmsms/cmsm ... mplate.txt

Het menu klapt wel in maar je zou het deel met <div id="nav-mobile"></div> uit de html weg kunnen laten en ook deze css uit menu.css kunnen slopen en dan moet het netjes onder elkaar schuiven:

Code: Select all

	/* mobile menu css */
	
	#nav-mobile {
		padding: 15px;
	}
	
	#nav-mobile:before {
		content: "Navigate to...";
	}
	
	#menu {
		display: none;
		border: 1px solid #999;
	}
	
	#menu-mobile:hover #menu {
		display: block;
	}

[sjoerdd87]

Link naar informatie: http://pmkmedia.nl/grid

Link naar een voorbeeld: http://grid.pmkmedia.nl

Zip bestand met alle bestanden: http://grid.pmkmedia.nl/GRID-1200-2.2.3.zip

Menu Sjabloon: http://grid.pmkmedia.nl/grid/cmsms/cmsm ... mplate.txt

Het menu klapt wel in maar je zou het deel met <div id="nav-mobile"></div> uit de html weg kunnen laten en ook deze css uit menu.css kunnen slopen en dan moet het netjes onder elkaar schuiven:

Code: Select all

	/* mobile menu css */
	
	#nav-mobile {
		padding: 15px;
	}
	
	#nav-mobile:before {
		content: "Navigate to...";
	}
	
	#menu {
		display: none;
		border: 1px solid #999;
	}
	
	#menu-mobile:hover #menu {
		display: block;
	}

Druk bezig geweest, maar nu probeer ik het menu een X aantal pixels van de rand te zetten, maar ik krijg het niet voor elkaar.
Voor de rest werkt hij redelijk, alleen als ik me scherm kleiner maak valt me menu helemaal weg?

http://tinyurl.com/nh5lz3n

[sjoerdd87]

Ook als ik op mijn Android toestel kijk zie ik geen verschil in het menu?

[sjoerdd87]

Ik heb het menu ook 21PX van de bovenkant gezet door de code
margin-top: 21px; te gebruiken bij #menu a

Code: Select all

[/#menu a {
	display: block;
	background: #none; /* Achtergrond kleur niet active */
	color: #745e50; /* font lettertype kleur */
	text-decoration: none;
	padding: 10px 10px;
        margin-top: 21px;
        margin-left: 7px;
        border-radius: 7px 7px 7px 7px;
        -moz-border-radius: 7px 7px 7px 7px;
        -webkit-border-radius: 7px 7px 7px 7px;
}

Nu staat het ingeklapte menu ook 21PX van elkaar, hoe kan ik dit beter oplossen?

Totale code die ik nu in me Stylesheet heb is:

Code: Select all

/* GRID 1200 v2.2.3 (by PMKMedia.nl/grid) */

/* menu css */

#menu {
	font-size: 13px;
        font-family:Arial;
        position: relative;
        top: 21px;
        left: 129px;
}

#menu, #menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#menu li {
	float: left;
	position: relative;
}

#menu li ul {
	position: absolute;
	margin-top: -10%;
	margin-left: 10%;
	display: none;
}

#menu ul li ul,
#menu ul ul li ul {
	margin-top: -20%;
	margin-left: 80%;
}

/* show submenu 1 */

#menu li:hover ul {
	display: block;
}

#menu li:hover ul ul {
	display: none;
}

/* show submenu 2 */

#menu ul li:hover ul {
	display: block;
	}

#menu ul li:hover ul ul {
	display: none;
}

/* show submenu 3 */

#menu ul ul li:hover ul {
	display: block;
}

/* menu link css */

#menu a {
	display: block;
	background: #none; /* Achtergrond kleur niet active */
	color: #745e50; /* font lettertype kleur */
	text-decoration: none;
	padding: 10px 10px;
        margin-top: 0px;
        margin-left: 7px;
        border-radius: 7px 7px 7px 7px;
        -moz-border-radius: 7px 7px 7px 7px;
        -webkit-border-radius: 7px 7px 7px 7px;
}

#menu a:hover {
	background: #fe690d; /* Achtergrond kleur hover */
	color: #ffffff; /* font lettertype kleur hover */
}

#menu ul {
	background: #999;
	border: 0px solid #999;
	width: 200px;
}

#menu ul a {
	background: #999;
	color: #000;
	font-size: 14px;
	width: 198px;
	padding: 15px;
}

.currentpage {
	background: #fe690d !important; /* Achtergrond kleur active current */ 
	color: #ffffff !important; /* Lettertype font kleur active current */
}

/* menu z-index */

#menu {
	z-index: 1000;
}

#menu ul {
	z-index: 2000;
}

#menu ul ul {
	z-index: 3000;
}

#menu ul ul ul {
	z-index: 4000;
}

@media screen and (max-width: 960px) {	

	/* menu link css */

	#menu a {
		padding: 10px 10px;
	}

}

@media screen and (max-width: 480px) {	

	/* mobile menu css */
	
	#nav-mobile {
		padding: 10px;
	}
	
	#nav-mobile:before {
		content: "Navigate to...";
	}
	
	#menu {
		display: none;
		border: 0px solid #999;
	}
	
	#menu-mobile:hover #menu {
		display: block;
	}



	/* menu css */



	#menu li {
		float: none;
	}
	
	#menu li ul,
	#menu ul li ul,
	#menu ul ul li ul {
		position: relative;
		margin-top: 0px;
		margin-left: 0;
		display: block;
	}
	
	#menu li:hover ul ul,
	#menu ul li:hover ul ul {
		display: block;
	}
	
	#menu ul {
		width: 100%;
		border: 0;
	}

	/* menu link css */
	
	#menu li a {
		background: #fff;
	}
	
	#menu ul a {
		width: 100%;
		padding: 15px 10%;
	}
	
	#menu ul li ul a {
		width: 100%;
		padding: 15px 15%;
	}
	
	#menu ul li ul ul a {
		width: 100%;
		padding: 15px 20%;
	}

}

Dit is nu ook opgelost, heb postion: relative; gebruikt voor het exact positioneren van het menu

[sjoerdd87]

Media Query toegevoegd:

Code: Select all

only screen and (max-device-width: 1px) and (orientation: portrait)

Nog meer tips? of heb je nog ideeën hoe ik de slideshow kan laten verdwijnen op de mobiele versie? of kleiner kan maken?

En kan ik nu in de mobiele site ook een link maken naar de ""Desktop" site?

[pasmaskas]

Ik denk dat je je layout helemaal moet herzien om hem goed responsive te maken en in procenten werken en niet alles in pixels.

Hier een tutorial waar ik veel van geleert heb:

http://webdesignerwall.com/tutorials/re ... ia-queries

Het is zowizo lastig om ene bestande website goed responsive te maken zonder veel te herschrijven omdat de layout anders is opgebouwt.

[sjoerdd87]

Ik denk dat je je layout helemaal moet herzien om hem goed responsive te maken en in procenten werken en niet alles in pixels.

Hier een tutorial waar ik veel van geleert heb:

http://webdesignerwall.com/tutorials/re ... ia-queries

Het is zowizo lastig om ene bestande website goed responsive te maken zonder veel te herschrijven omdat de layout anders is opgebouwt.

Ja dit had ik ook al begrepen zal ff puzzellen worden maar je moet toch verschillende stylesheets schrijven en wijzigen voor een tablet en telefoon.

Maar is het ook mogelijk om een link te maken naar de desktop site?

[pasmaskas]

Je zou het kunnen doen met een javascript op de desktop website en dan de window.location url aanpassen naar de mobiele website. Wel even insluiten in {literal} hier de code {/literal}

Code: Select all

<__script__ type="text/javascript">
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||  (navigator.userAgent.match(/Android/i))) {
	window.location = "http://www.website.com/mobiel"
}
</__script>

[sjoerdd87]

Je zou het kunnen doen met een javascript op de desktop website en dan de window.location url aanpassen naar de mobiele website. Wel even insluiten in {literal} hier de code {/literal}

Code: Select all

<__script__ type="text/javascript">
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||  (navigator.userAgent.match(/Android/i))) {
	window.location = "http://www.website.com/mobiel"
}
</__script>

Ik heb natuurlijk geen aparte pagina voor de mobiele weergave, dus daar kan ik hem niet naar toe laten linken?

[pasmaskas]

Nee dan werkt een script of een "desktop" link niet. De bedoeling is met responsive dat er helemaal geen aparte versies meer zijn maar gewoon 1 die op meerdere schermen schaalt van mobiel tot desktop. Ik denk dat je hem beter kan ombouwen of een hele nieuwe layout kan maken van af 0.

[sjoerdd87]

Nee dan werkt een script of een "desktop" link niet. De bedoeling is met responsive dat er helemaal geen aparte versies meer zijn maar gewoon 1 die op meerdere schermen schaalt van mobiel tot desktop. Ik denk dat je hem beter kan ombouwen of een hele nieuwe layout kan maken van af 0.

Kan ik dit menu wel verticaal gebruiken? zo ja welke code zou ik dan aan moeten passen?

Voor de rest werkt het goed, geen problemen.

Bedankt voor je hulp.

[pasmaskas]

Ja dat kan:

Deze:

Code: Select all

#menu li {
   float: left;
   position: relative;
}

#menu li ul {
   position: absolute;
   margin-top: -10%;
   margin-left: 10%;
   display: none;
}

Vervangen door deze:

Code: Select all

#menu li {
	float: none;
	width: 150px; /* Menu knoppen breedte */
	position: relative;
}

#menu li ul {
	position: absolute;
	margin-top: -30%;
	margin-left: 90%;
	display: none;
}

[sjoerdd87]

Ja dat kan:

Deze:

Code: Select all

#menu li {
   float: left;
   position: relative;
}

#menu li ul {
   position: absolute;
   margin-top: -10%;
   margin-left: 10%;
   display: none;
}

Vervangen door deze:

Code: Select all

#menu li {
	float: none;
	width: 150px; /* Menu knoppen breedte */
	position: relative;
}

#menu li ul {
	position: absolute;
	margin-top: -30%;
	margin-left: 90%;
	display: none;
}

Bedankt voor je hulp!