Fácil versión desplegable para la Navbar de Blogger | Oloblogger Con tanta que gente dándole al coco siempre hay alguien a quién se le ocurre una buena idea sobre algo. A mí al menos eso es lo que me parec...

6 de enero de 2013

Fácil versión desplegable para la Navbar de Blogger

Con tanta que gente dándole al coco siempre hay alguien a quién se le ocurre una buena idea sobre algo. A mí al menos eso es lo que me parece la solución de Blogger Code para mostrar y no mostrar al mismo tiempo la Navbar.

Para los que no les suene el término, la Navbar es la barra de navegación que por defecto llevan todas las plantillas Blogger y que aparece en la parte superior con botones que esta nuestra estimada plataforma tiene a bien sugerirnos de forma obligada. Entre otros un buscador interno, un botón +1, otro para compartir en otras redes y un acceso directo al escritorio.

La mayoría de veces su posición y formato no es del agrado del respetable por no ir de acorde con el diseño de su plantilla y por eso suele ser ocultada mediante CSS o aplicando algún script para ocultarla o desplegarla (otro aquí) a demanda.

¿Pero qué tal si la dejamos siempre a la vista pero sólo a modo de icono que permitirá desplegarla a quién lo desee? En esta demo lo podéis ver. Buscad arriba a la izquierda la B de Blogger y pasar el puntero por encima de ellas.

Pues eso es lo que Blogger Code nos propone hacer con unas pocas líneas de código. Estas.

/* NAVBAR
----------------------------------------------- */

#navbar {
width: 36px;
border-top: 1px solid #888888;
border-right: 5px solid #888888;
position: fixed;
top: 5px;
left: -6px;
background: #fe6602;
border-radius : 0 5px 5px 0;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);

-moz-transition: all 0.3s linear 1.3s;
-ms-transition: all 0.3s linear 1.3s;
-o-transition: all 0.3s linear 1.3s;
-webkit-transition: all 0.3s linear 1.3s;
transition: all 0.3s linear 1.3s;

z-index: 10;
}

#navbar:hover {
width: 95%;

-moz-transition: all 0.6s linear 0s;
-ms-transition: all 0.6s linear 0s;
-o-transition: all 0.6s linear 0s;
-webkit-transition: all 0.6s linear 0s;
transition: all 0.6s linear 0s;
}

Lo que hace esto no es ni más ni menos que reducir el tamaño de la id que controla la Navbar y dejarlo encogidito ahí a la izquierda (width: 36px;), permitiendo ver sólo el logo de Blogger y un pequeño borde gris a modo de pestaña de la que tirar.

En el hover de esa misma id es dónde se recupera la anchura original (casi, un 95%), recreando el efecto con una transición lineal que incluye una pequeña demora (delay 1.3s) en el replegado. Ese es el truco principal aunque también se ha añadido un position:fixed; para que sea siempre visible aún haciendo scroll por la página.

Lo dicho, una idea tan práctica como simple. Las mejores.

Ah, y para que no sigáis diciendo por las redes sociales que no explico las cosas, añadir que ese código debe ir en la parte CSS de la plantilla, es decir, entre las etiquetas SKIN. Me duele la boca de decirlo :S

Actualización:
Código optimizado gracias a un comentario de Kseso

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

25 comentarios :

  1. Chulísimo, Oloman. Lo que dices, las más fáciles, las mejores

    ResponderEliminar
    Respuestas
    1. Este tipo de trucos son los que me más me gustan: los de "idea feliz" que les llamo a veces.

      Eliminar
    2. Aparte que te da la clave para hacer lo mismo con otras cosas. Porque no estoy tan enganchado a blogger ahora, que sino lo ponía en todas partes xD

      Eliminar
    3. ¿Pensabas en una sidebar desplegable, por ejemplo? :)

      Eliminar
  2. La verdad es que nunca he sabido bien para qué sirve. Le das a siguiente varias veces y aparecen siempre los mismos blogs... no sé, nunca me ha convencido.

    ResponderEliminar
    Respuestas
    1. Siguen algún orden que les asigna Blogger y el siguiente siempre será "el siguiente", al igual que el anterior. Yo creo que lo pusieron para ir navegando de manera semi-azarosa de blog en blog para descubrir nuevos sitios. Tú siempre ves lo mismo a partir de tu blog, pero piensa en que eres un visitante que no sólo para en tu sitio...

      Eliminar
  3. Me ha parecido una pasada y lo he aplicado a mi blog, sin embargo Cuando en el menú "Diseño" seleccionas la NAvbar tipo translúcida o translúcida oscura... sale fon un fondo naranja brillante como el logotipo de Blogger o naranja oscuro.

    De modo que este truco solo parece funcionar con las barras opacas >.<

    ResponderEliminar
    Respuestas
    1. Lo acabo de probar y a mí me funciona bien. Ahora tienes la demo que enlacé con una barra translúcida clara. Evidentemente no sale ya translúcida cuando la despliegas, pero ese es precisamente el objetivo, que se vea en ese caso.

      De todas formas se me ocurre que en hover puedes poner un opacity: .8; Quizás es ese el efecto que quieres.

      Eliminar
    2. A mi en tu demo me sale naranja, como me salía a mi al seleccionar la translúcida.

      Al final me he decantado por la gris, porque mi blog tiene una carta de colores verdes y dos tipos de blanco.

      Probaré añadirle un opacity a ver cómo queda :)

      Muchas gracias, yo no sé vivir sin tu blog XD ♥

      Eliminar
    3. Vale, ahora entendí un poco mejor. Ese color está puesto ex-profeso en la ID #navbar. Es el va en background: #fe6602; Sólo cámbialo por otro si no te gusta o ponlo transparente background: transparent;

      Eliminar
    4. Hola! :)

      Yo he seleccionado el tipo de barra "claro transparente" y después he cambiado el color de "background" a un azul; después he cambiado el color de los bordes ("border-top", "border-right"), así como su tamaño y me ha quedado más o menos como necesitaba. Por si os resulta útil :)

      Eliminar
  4. Amigo Oloman,

    Contesto a tu pregunta, la que hiciste el día 4 en mi Blog. He tardado tanto en contestarte, porque he estado unos días ausente del Blog y sólo hoy me he enterado de tu petición. Hay varias pòsibilidades para lo que me preguntas:

    MVSICVM MEMORANDVM
    Musicum Memorandum
    MVSICAE MEMORANDVM
    Musicae Memorandum

    Lo he escrito en mayúscula todo y con minúscula. Las dos primeras formas corresponden a Memorándum Musical y las dos segundas a Memorándum de Música.
    Espero haberte complacido, amigo mío.

    Que tengas un Feliz 2013.

    Antonio

    ResponderEliminar
  5. Una solución interesante para quien haya encontrado sentido a esa barra y quiera ofrecerla sin tenerla xD

    Y aquí me sale la vena (terminarás lamentándome xDD) y hago dos pequeñas sugerencia para pulir ese código Css

    1.- Aligerar código, incluyendo en la declaración de la transición de la regla #navbar el valor del retraso (delay). Quedaría así:
    #navbar {
    /*resto declaraciones*/
    transition: all 0.3s linear 1.3s;
    /*añadir prefijos privativos*/
    }
    Lo que permite ahorrarnos las 5 "transition-delay"

    2.- Creo más práctico que sólo haya un retraso a la hora de plegar la barra. Al desplegarla es mejor que lo haga de forma instantánea (o casi).
    Así que para ello, en la regla #navbar:hover basta con anular el delay anterior de 1.3s. Ahora sí declarando sólo la propiedad "transition-delay" con valor de 0s (o un valor muy bajo de tiempo como 50ms)

    Un saludo

    ResponderEliminar
    Respuestas
    1. Eso me pasa por no controlar CSS. Es lógico que pueda ir ahí una vez que lo has dicho.

      Lo actualizo. Gracias.

      Eliminar
  6. Hola Oloman. Como puedo hacer un elemento que se esconda debajo de la cabecera y que, cuando bajes con el scroll y no se vea la cabecera aparezca dicho elemento??

    ResponderEliminar
    Respuestas
    1. Eso de que aparezca algo cuando haces scroll sólo he visto en alguna ocasión con jQuery, pero ni tengo nada publicado ni lo recuerdo de memoria. Me lo apunto para algún siglo de estos.

      Eliminar
  7. buenisimo el truco, gracias

    ResponderEliminar
  8. Hola a todos! Hola Oloman!

    Me subscribí recientemente al blog, así que hoy es la primera vez que escribo :) Muchas gracias Oloman por todo lo que nos enseñas. Hoy me has librado del problemilla de la barra, porque no me gustaba verla ahí, omnipresente, pero tampoco quería quitarla. Así que con este truco ha quedado perfecto :) Bueno, ya tenéis a una más aquí, y creo que por mucho tiempo ;) Buen domingo a todos y gracias de nuevo, Olo. Amparo.

    ResponderEliminar
    Respuestas
    1. Me pareció una buena idea y así creo que lo manifesté en la entrada. Bienvenida ;)

      Eliminar
  9. Buenos días Oloman, a ver si me puedes echar una mano... seguí los pasos de tu tutorial pero resulta que mi barra navbar ahora no muestra el contenido y al cambiar el background de color cambia toda la barra de color pero no se ve nada. Qué puedo hacer?

    ResponderEliminar
  10. He comprobado que pasa sólo en mi portátil, desde otros ordenadores se ve perfecto así que no es ningún problema, muchas gracias por responder. Un saludo.

    ResponderEliminar
  11. Hola gracias!!Está muy bien la idea. Descubrí tu entrada por casualidad. Ya lo instalé y perfecto. Es muy práctico. Debo reconocer que me vino bien el apunte de que va entre las etiquetas skin. Todavía no acabo de asimilar tanta información y estoy bastante pérdida al situar correctamente los códigos.Si no fuera por tu orientación y lineas de referencia... :)

    ResponderEliminar
    Respuestas
    1. Las líneas de referencia están precisamente para eso ;)

      Eliminar