Botón para mostrar y ocultar la navbar


Hace un tiempo habíamos visto tres formas de qué hacer con la navbar: ocultar, eliminar o personalizar la navbar.



Pero hoy vamos a ver otra forma de presentar la barra de navegación (navbar). Lo vi en Derya's WebResource.axd y me pareció muy interesante. Si quieres ver cómo queda, puedes vaer la DEMO en mi blog de pruebas.

Ahora les explico cómo hacerlo.

► Entramos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos </head> y antes de este código, pegamos lo siguiente:

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()

{showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{nav.style.visibility="visible";
nav.style.display="block";}
else
{nav.style.visibility="hidden";
nav.style.display="none";}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;}
</style>

► Luego de éso guardamos los cambios y en un nuevo elemento HTML, pegamos lo siguiente:

<span style="cursor:pointer;" onclick="ShowHideNav();">
Mostrar / Ocultar Navbar
<a style="visibility:hidden;">
</a></span>

► Donde dice Mostrar / Ocultar Navbar es el texto que se verá en la sidebar, para presionar y que aparezca y desaparezca la navbar; podemos cambiarlo por otro texto, símbolo o imagen. Para este último caso, bastará con agregar <img src="aquí-la-url-de-la-imagen" /> en lugar del texto.

La DEMO la pueden ver en mi blog de pruebas.

Y éso es todo , bastante sencillo y útil.

► Visto en Derya's WebResource.axd.

9 opinaron:

G

Vaya muy bueno; me encantó que con sólo un botón podemos mostrar l a navbar

Responder
squirrel

Qué buena idea; yo voy a poner una imagen que sirva para el botón.

Besos

Responder
Adrián Aratan

Muy bueno, me gustó como quedó en tu blog de pruebas; a ver si algún día me animo a crear un blog en blogger, seguro lo aplico :)

Responder
Jéssica YK

» G: me alegra que te haya gustado :)

» squirrel: por supuesto, y si tienes alguna duda, me avisas.

» Adrián Aratan: ojalá pronto te animes a tener un blog propio.

S@lu2

Responder
Vku

muy bueno realmente me gusto mucho

fijate en el código que esta repetida la letra a

a a style

Responder
Jéssica YK

Vku: gracias por la visita; en cuanto al código, lo he usado tal como está con doble "a" y no ha perjudicado el funcionamiento del script, pero lo corregiré de todos modos :)

S@lu2

Responder
Vku

Hola jéssica: te mande un correo y no me lo contestastes, cuando puedas te lo agradeceria

Y lo de la a en html no te lo haceptaria en un gadget html puede ser pero quedaria abajo de la navbar.

espero tu respuesta. Vku

Responder
Jéssica YK

Vku: sí, disculpa por la demora en contestar tu correo, pero habia llegado como mensaje spam, por éso no lo había visto.
Ye te envié la respuesta a tu correo.

Seguimos en contacto.

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