-
Cómo crear una barra de navegación en movimiento en formato HTML
-
Una barra de navegación no se define en cualquiera de una forma; en muchos sitios web, como Google y Facebook, cuentan con una barra de navegación en la parte superior de la página. Sin embargo, también puede presentar una barra de navegación en la parte inferior o lateral de la página - lo que funcione mejor para su sitio web. Tendrá que usar capas CSS y div para crear una barra de navegación que se mueve junto con su página, ya que se desplaza. Al tener el movimiento barra de navegación junto con la página, los usuarios siempre podrán visitar rápidamente una página diferente.Instrucciones
1 Iniciar una hoja de estilo en el <head> del documento HTML; una hoja de estilo comienza con <style type = "text / css">.
2 Designar un ID para el div que será su barra de navegación. Si usted quiere llamar a su capa div "navegación", deberá comenzar el elemento como:
navegación
{3 La posición de su capa en la que desea la barra de navegación para permanecer. Si quieres un 25 píxeles barra de navegación de altura para abarcar todo el ancho de la página y se sienta a ras con los bordes superiores del navegador, el elemento incluiría:navegación {
altura: 25px;
width: 100%;
position: fixed;
top: 0px;
left: 0px;El atributo "fijo" cuenta la capa a moverse a lo largo de su página como los rollos de visitantes. Este elemento es compatible con los principales navegadores: Internet Explorer, Mozilla Firefox, Safari y Google Chrome. Usted tendrá que quitar los márgenes en el cuerpo de la página para sentarse la barra de navegación a ras con los bordes de la página, con:
cuerpo {
margen: 0px;}Nada añade al elemento del cuerpo aquí afectará el cuerpo de su página web; se puede utilizar para cambiar el color de fondo y la imagen o la fuente de su página.
4 Ajuste el índice z para su elemento si su barra de navegación se superpone el contenido de su página ya que los visitantes se desplazan. El índice z define las capas que están en la parte superior; el elemento más alto está en la parte superior, y la más baja se encuentra en la parte inferior. El número no importa, con tal de que uno es más alto que el otro. Si sólo tendrá dos capas - la barra de navegación y el cuerpo del mensaje - usted podría fijar de forma segura la barra de navegación a las dos. Cerrar el elemento de barra de navegación con el soporte que termina, por ejemplo,
navegación {
altura: 25px;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 2;}5 Cierre la hoja de estilos con </ style>, por encima de la etiqueta de cierre para el encabezado del documento (</ head>). Cualquier otro contenido en su página caerá por debajo de la barra de navegación mientras se desplaza por la página.
6 Crear la capa en su página y rellenar el contenido de la navegación, por ejemplo,
<Div id = "navegación"> Contenido Navegación </ div>
El "id" debe ser el mismo nombre que el nombre del elemento en la hoja de estilos. Guarde la página y poner a prueba la barra de navegación en su navegador.
Consejos y advertencias
- Puede dar formato a todo su sitio web usando CSS y capas; si no está familiarizado con CSS y cómo funciona, W3Schools ofrece tutoriales en profundidad sobre HTML y CSS.
- La sintaxis es importante con CSS; comprobar que sus dos puntos y puntos y comas están en su lugar, que no se está perdiendo, los soportes y el uso de los nombres de los atributos correctos.
- Tenga cuidado al fijar una barra de navegación; no lo hacen tan grande que sobrepasa el contenido, y tenga en cuenta que no todos los visitantes tendrán la misma resolución de pantalla y controlar el estilo como usted.
