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.