Barra de navegación usando CSS

CSS | Barra de navegación : Aquí, vamos a aprender cómo crear una barra de navegación con CSS? Este tutorial contiene ejemplos de navegación utilizando HTML y CSS.

CSS | Barra de navegación

desarrollo de sitios web es grande, pero el desarrollo de un sitio web fácil de usar es aún mayor. Entonces, ¿cómo diseñar un sitio web fácil de usar? ¿Qué herramientas utilizar? Bueno, hay muchas herramientas que mencionar que son muy útiles en la toma de un sitio web fácil de usar. Así que vamos a hablar de una de estas herramientas, que es barra de navegación .

barra de navegación , ¿cuál es el primer pensamiento que viene a la mente después de escuchar este término. En pocas palabras, sin embargo, una opción de menú class navegar a lo largo de esa página en particular o en el sitio. La barra de navegación también permite que las personas se mueven de una página a otra. Los barra de navegación de funciona como una guía for al usuario navegar a través de las páginas.

El barra de navegación se crea con la ayuda de elementos de menú en su conjunto. Al igual que una lista ordenada o desordenada lista, estos elementos de la lista se pueden organizar en varias posiciones como horizontal, vertical, alineado a la derecha, etc. Por lo tanto uno debe ser claro en mente sobre el tipo de barra de navegación él / ella quiere usar en la página web.

Además de ser conscientes de la barra de navegación , también hay que asegurarse de que los enlaces que aparecen en la barra de navegación son correcto de lo contrario el usuario puede acceder a la página incorrecta sin darse cuenta y que crea problemas.

Hablemos de algún tipo de barras de navegación en detalle,

  1. vertical barra de navegación
  2. barra de navegación horizontal
  3. barra de navegación fijo

1) Vertical Barra de navegación

El verticales la barra de navegación se utiliza para mostrar las opciones de menú vertical. Puede utilizar la propiedad de presentación y configurarlo para bloquear. Mediante el uso de propiedad de presentación y se establece para bloquear los medios que el bloque entero que consiste en el elemento de menú se convertirá puede hacer clic. También puede ajustar el ancho de estos bloques también.

CSS Sintaxis:

    Element
{
display: block;
width: 50px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
li a {
display: block;
width: 90px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#student">student</a></li>
<li><a href="#staff">staff</a></li>
<li><a href="#dean">dean</a></li>
</ul>
</body>
</html>

salida

Navigation Bar using CSS - 4

En el ejemplo anterior, mostrando los enlaces como elementos de bloque hace que todo el hacer clic en el área de enlace.

2) Horizontal Barra de navegación

En una barra de navegación horizontal como su nombre indica los elementos pueden estar dispuestos horizontalmente. Ahora, esto se puede hacer de dos maneras, en primer lugar, el uso de la propiedad en línea y la segunda es mediante el uso de la propiedad flotante.

1) inline

En “propiedad inline” los elementos son por elementos de bloque for, la class línea se retira de antes y después de cada elemento de la lista de modo que se pueden mostrar en una línea.

Sintaxis default inline:

    Element{
display: inline;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#student">student</a></li>
<li><a href="#staff">staff</a></li>
<li><a href="#dean">dean</a></li>
</ul>
</body>
</html>

salida

Navigation Bar using CSS - 5

En el ejemplo anterior, los elementos se muestran en una sola línea.

2) flotando:

“propiedad flotante” se utiliza para ajustar los elementos uno junto al otro.

Sintaxis break flotante:

    element{
float: left;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
li {
display: block;
float: left;
}
</style>
</head>
<body>
<ul>
<li><a href="#student">student</a></li>
<li><a href="#staff">staff</a></li>
<li><a href="#dean">dean</a></li>
</ul>
</body>
</html>

salida

Navigation Bar using CSS - 6

En el ejemplo anterior, los elementos se muestran uno al lado del otro sin ningún espacio.

3) fija posición de la barra de navegación

Estos tipos de estancia barra de navegación fijo a sus posiciones ya sea superior o inferior, incluso cuando el usuario se desplaza hacia abajo o hasta la página.

CSS Sintaxis:

    Element{
// for fixed top
position: fixed;
// To fix the bar at the top
top: 0;
// for fixed bottom
// To fix the bar at the bottom
bottom: 0;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#student">student</a>
<a href="#staff">staff</a>
<a href="#dean">dean</a>
</div>
<div style="padding-left:16px">
<p>Some content..</p>
</div>
</body>
</html>

salida

Navigation Bar using CSS - 7

En el ejemplo anterior, las estancias de navegación en la parte superior, incluso cuando nos desplazarse por la página.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *