Delicious LinkedIn Facebook Twitter RSS Feed

Mostrar y ocultar la navbar

A mi personalmente no me gusta como queda en el diseño de los blog la barra navbar, pero eso es personal de cada uno.

Pero se que tiene su utilidad como para acceder, el buscador, nuevas entradas, etc...

Para ocultar la barra hay varias formas, la mas utilizada es:

En diseño/ edición de HTML.

Ponemos el siguiente código arriba de </head>:

<style type="text/css">
#navbar-iframe {height:0px; visibility:hidden; display:none; }
</style>

Guardar los cambios.

También se puede tener oculta y poderla abrir o mostrar.

Lo que voy a explicar ahora es un truco que vi en el blog de una nueva amiga, ella se llama Jéssica del blog de ayuda "Diversas & Variadas" el cual explica muy bien en esta entrada

Se trata de un truco para tener la barra oculta y poderla mostrar o abrir mediante un link o botón, el cual se puede poner en la parte superior, en la sidebar o donde guste.

En diseño/ edición de HTML.

Ponemos el siguiente código arriba de </head>:
(Si ya tienen el anterior código cambiarlo o modificarlo.)

<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>

Guardar los cambios.

Después agregamos el próximo código en el lugar que prefieran.

Si es en la sidebar vamos a Diseño, añadir un gadget y elegimos HTML/Javascript, ahí colocamos el siguiente código:

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

Donde dice Mostrar / Ocultar Navbar es el link que presionando hacemos que aparezca y desaparezca la navbar.

Podemos cambiarlo por otro texto o imagen.

Para una imagen, cambiar Mostrar / Ocultar Navbar por <img src="URL de la imagen"/>.

Ver ejemplo  en la barra de menú superior o apretar:  Mostrar / Ocultar Navbar Ir Arriba

0 comments:

Post a Comment