Lo correcto en ese caso seria hacer esto:
Código Javascript
:
Ver original$("#navbar").prepend('<div class="icon-menu"><img src="http://i59.tinypic.com/dz9hc1.png" /></div>');
Lo que hace "prepend()" es agregar lo que escribas dentro de los paréntesis antes del primer elemento hijo. En este caso lo que esta dentro de los paréntesis se agregaría dentro de #navbar (que es el elemento que indicamos) y antes del <ul>
El código javascript completo debería ser algo asi:
Código Javascript
:
Ver original$(document).ready(function(){
$("#navbar").prepend('<div class="icon-menu"><img src="http://i59.tinypic.com/dz9hc1.png" /></div>');
var contador = 1;
$(".icon-menu").click(function(){
if(contador == 1){
$('.menu').stop().animate({"left": "0"});
contador=0;
}
else{
contador=1;
$(".menu").stop().animate({"left":"-100%"});
}
});
});
Agregué también los stop() para que no falle la animación y se repita indefinidamente si haces muchos clicks en el botón.
Proba si así funciona.
Edito:
Acá te dejo un
Codepen funcionando.
Saludos
