Imprimir...
Compartir
A+
A-
Menú flotante

Te vamos a enseñar cómo hacer que la barra de menú de tu blog se queda visible (menú pegajoso) en la parte superior, eso sí, estará visible sólo cuando se desplace (scroll) hacia la parte superior de la página, cuando el desplazamiento (scroll) se haga hacía la parte inferior de la misma esta se ocultara para no distraer al visitante sobre lo que esta leyendo, esta función se puede ver en esta misma página, en la que podrás comprobar el funcionamiento del menú. Para implantarlo en tu blog sigue las instrucciones que te detallamos a continuación:

Empezaremos con los estilos CSS, justo debajo de <b:skin><![CDATA[ añade este código:

.menu_flotante{position:fixed;left:0;top:0;right:0;transition:all 1s ease-in-out;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:999}.scroll{top:-50px}.no-scroll{top:0;z-index:999}

Ahora busca en tu plantilla <header id='header-wrapper'> (o algo similar) y añade a esa etiqueta esto:

class='menu_flotante'

te tiene que quedar algo así: <header class='menu_flotante' id='header-wrapper'>

Ahora encima de la etiqueta </body> añade este script:

<script type='text/javascript'>
//<![CDATA[
$(function(){var e=$(document).scrollTop();var t=$(".menu_flotante").outerHeight();$(window).scroll(function(){var n=$(window).scrollTop();if($(window).scrollTop()>=50){$(".menu_flotante").css({'position':'fixed'})}else{$(".menu_flotante").css({'position':'fixed'})}if(n>t){$(".menu_flotante").addClass("scroll")}else{$(".menu_flotante").removeClass("scroll")}if(n>e){$(".menu_flotante").removeClass("no-scroll")}else{$(".menu_flotante").addClass("no-scroll")}e=$(window).scrollTop()})})
//]]>
</script>

Haz una vista previa y si todo esta correcto, guarda el tema.


Aviso: Antes de hacer cualquier modificación en tu tema (plantilla) haz una copia de la misma.
Sugerencia: para encontrar rápidamente cualquier texto o etiqueta, pulsa Ctrl+F o ⌘-F (Mac) y utiliza la barra de búsqueda.


Fuente: Pedro PC

0 comentarios TiS 0 Facebook


Puedes leer las normas sobre los comentarios en: [Política de privacidad]

Tu comentario...


 
2013 - 2017 Te interesa saber

colores

Pedro Luis Cenzano Diez & Yolanda Torres Cerezo

(Administradores)

Jesús Mª Busto Riaño

(Asesor)


Política de privacidad





Responsive

TiS, con tecnología Responsive Web Design y Blogger