"Hamburger" icoon in Menu [OPGELOST]

[sjoerdd87]

Een tijd geleden ben ik begonnen mijn menu aan te passen.

Zie ook: http://forum.cmsmadesimple.org/viewtopi ... 13&t=72723

Maar nu heb ik even de hulp nodig om een "hamburger" icoon neer te zetten zodra hij gaat schalen.

Wat ik nu heb staan is:

Code: Select all

        content: "MENU";
	font-size: 16px;
        font-weight: bold;
        font-family: Arial;

Nu wil ik eigenlijk achter het woord MENU een hamburger plaatsen, is dit te doen? zo ja hoe?

Dit is mijn complete CSS van het menu zodra deze gaat schalen:

Code: Select all

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

	/* mobile menu css */
	
	#nav-mobile {

		background: #0090fe;
		font-size: 13px;
		color: #FFF;
		padding: 18px;
		border-radius: 0px;
                margin-top: 5px;

	}
	
	#nav-mobile:before {
        content: "MENU";
	font-size: 16px;
        font-weight: bold;
        font-family: Arial;
        

	}
	
	#menu {
		float: none;
		font-size: 13px;
		display: none;
		border: none;
        border-radius: 0px 0px 0px 0px;
        -moz-border-radius: 0px 0px 0px 0px;
        -webkit-border-radius: 0px 0px 0px 0px;
left: 0px;
top: 0px;
	
    }
    
    
    

#menu a {
        border-radius: 0px 0px 0px 0px;
        -moz-border-radius: 0px 0px 0px 0px;
        -webkit-border-radius: 0px 0px 0px 0px;
        margin-left: 0px;
}





	
	#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%;
	}

}

Alvast bedankt!

Gr. Sjoerd.

[pasmaskas]

Toevoegen aan #nav-mobile

Code: Select all

background: url('http://www.website.nl/locatieimages/arrow.png') no-repeat right;
background-size: 44px 34px;
-moz-background-size: 44px 34px;
-webkit-background-size: 44px 34px;

Hamburger arrow.png afbeelding staat in de post

gr Pascal

[sjoerdd87]

Toevoegen aan #nav-mobile

Code: Select all

background: url('http://www.website.nl/locatieimages/arrow.png') no-repeat right;
background-size: 44px 34px;
-moz-background-size: 44px 34px;
-webkit-background-size: 44px 34px;

Hamburger arrow.png afbeelding staat in de post

gr Pascal

Helaas word mijn achtergrond dan ook doorzichtig wat niet de bedoeling is, maar nu heb ik geprobeerd hem voor de tekst te krijgen door hem in #nav-mobile:before te zetten.
Hierdoor staat hij nu door de tekst "MENU" margin-left werkt hier niet want dan gaat de afbeelding natuurlijk mee, nog een idee?

Gr. Sjoerd.

[sjoerdd87]

Toevoegen aan #nav-mobile

Code: Select all

background: url('http://www.website.nl/locatieimages/arrow.png') no-repeat right;
background-size: 44px 34px;
-moz-background-size: 44px 34px;
-webkit-background-size: 44px 34px;

Hamburger arrow.png afbeelding staat in de post

gr Pascal

Helaas word mijn achtergrond dan ook doorzichtig wat niet de bedoeling is, maar nu heb ik geprobeerd hem voor de tekst te krijgen door hem in #nav-mobile:before te zetten.
Hierdoor staat hij nu door de tekst "MENU" margin-left werkt hier niet want dan gaat de afbeelding natuurlijk mee, nog een idee?

Gr. Sjoerd.

Geprobeerd met:

Code: Select all

	#nav-mobile:after {
        content: "MENU";
	font-size: 16px;
        font-weight: bold;
        font-family: Arial;      
	}

Dit werkt wel, denk dat dit wel de juiste oplossing is?

Helaas ook niet de juiste oplossing want zodra ik dan:

Code: Select all

	#nav-mobile:before {
        content: " ";
	font-size: 16px;
        font-weight: bold;
        font-family: Arial;
        background: url('images/arrow.png') no-repeat right;
        background-size: 44px 34px;
        -moz-background-size: 44px 34px;
        -webkit-background-size: 44px 34px;
}

Heb ingevuld laadt hij de afbeelding niet meer.....

Gr. Sjoerd.

[sjoerdd87]

Na veel zoeken ben ik erachter dat de mogelijkheid er is om een spatie in te voegen in de content:

Namelijk:

Code: Select all

\00a0

Hierna de afbeelding left in plaats van right gezet.

Dus zo ziet de code er nu uit hoop dat iedereen hier ook wat aan heeft.

Code: Select all

	#nav-mobile:before {

        content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0  MENU";
	font-size: 16px;
        font-weight: bold;
        font-family: Arial;
        background: url('uploads/images/arrow.png') no-repeat left;
        background-size: 40px auto;
        -moz-background-size: 40px auto;
        -webkit-background-size: 40px auto;
    }

Misschien kan dit anders maar dit is voor mij voorlopig een oplossing.

Als het anders kan hoor ik het natuurlijk graag.

Gr. Sjoerd.