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:
Vaya muy bueno; me encantó que con sólo un botón podemos mostrar l a navbar
Qué buena idea; yo voy a poner una imagen que sirva para el botón.
Besos
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 :)
» 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
muy bueno realmente me gusto mucho
fijate en el código que esta repetida la letra a
a a style
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
.l.
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
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
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.