Hola nos han mandado un trabajo de hacer una pagina web y tengo el siguiente problema:
El menu consta de un logo y cuatro botones(dos a cada lado), entonces quiero que el logo se quede fijo mientras baja la web(esto lo he echo) mientras que los botones desaparezcan y que al darle al logo vuelvan aparecer.
He probado con jquery .css(display none) .hide y demás pero no me los hace invisibles,haber si podéis ayudarme, gracias.
No puedo poner la web porque no la tengo subida.
suponiendo que tienes un div donde va el logo y los botones, le pondrías el click a logo y togle a los botones
<script>
$( "#logoCabecera" ).click(function() {
$( ".botonCabecera" ).toggle( "slow" );
});
</script>
Te recomiendo que eches un ojo al código de Foundation. Hay un componente llamado top-bar al que al añadirle la clase .sticky hace mas o menos lo que comentas, salvo lo de mostrar los botones al hacer click en el logo.
Para esto ultimo, puedes fijarte en el mismo código que usa el componente top-bar (o nav-bar, no estoy seguro) para los dispositivos móviles o resoluciones pequeñas, ya que se convierte en el típico menú "movil" en el que haces click y despliega las opciones.
Aquí el enlace a la documentación del componente top-bar: http://foundation.zurb.com/docs/components/topbar.html