Mostrar/ocultar la navbar con efecto Hover Over


Hoy vamos a ver otra forma de personalizar un poco la navbar; esta vez haremos que la navbar sea casi invisible o que una parte sea visible, de modo que al pasar el mouse sobre esta parte se muestre toda la navbar.

Pueden ver la DEMO en este blog de pruebas, sólo pasen el mouse sobre la raya azul en la parte superior donde debería de estar la navbar para que vean a qué me refiero.

Y para conseguirlo, es bastante sencillo:

1.§ Ingresamos a Diseño/ Edición de HTML y buscamos ]]></b:skin> y encima de este pegaremos el siguiente código:

#navbar-iframe {
height:5px;
}

/* IE7, IE8, IE6 */
#navbar-iframe { height/*\**/: 30px\9; }

#navbar-iframe:hover {
height:40px; !important;
}

Damos click a guardar y listo. Como ven es bastante sencillo.

Si desean otras formas de ver la navbar, pueden ver estos post:

» Navbar transparente (ver entrada).
» Botón para mostrar y ocultar la navbar (ver entrada).
» La barra de navegación (navbar) (ver entrada).

3 opinaron:

G

Me encanta muy bueno

Responder
squirrel

Lo probé en mi blog de pruebas y se ve genial :)

Besos

Responder
Jéssica YK

» G:
gracias :)

» squirrel:
Me alegra que te haya gustado y servido.

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio