En este artículo, intentaremos crear una barra de navegación horizontal. Para entender este artículo, necesitamos saber algunos conceptos básicos de HTML y CSS.
Acercarse:
- Crearemos la estructura de la barra de navegación que luego se desplegará en forma horizontal.
- Las etiquetas que usaremos para esto son la etiqueta <nav> y la etiqueta <ul> . Aquí la etiqueta de navegación actuará como un contenedor para la lista de elementos que se utilizarán para la navegación. Ul también se usará para enumerar la cantidad de elementos por los que navegará el usuario.
- Ahora tenemos la estructura de la barra de navegación. Así que aplicaremos propiedades CSS como flex para que la barra de navegación parezca horizontal.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title> Horizontal Navigation Bar </title> </head> <body> <!-- here in nav tag used two classes that is navbar and background--> <!-- each class declared in nav tag will be used to design the form using CSS--> <nav class="navbar background"> <!-- we have used list tag that is ul to list the items--> <ul class="nav-list"> <li><a href="#Car">Car</a></li> <li><a href="#file">file</a></li> </ul> <!-- we have used rightnav in order to design the seachbar properly by using CSS--> <div class="rightNav"> <!-- the value that search bar will take is text --> <input type="text" name="search" id="search" /> <button class="btn btn-sm">Search</button> </div> </nav> </body> </html>
La salida del código:
Ahora tenemos la estructura de la tabla. Así que diseñaremos la barra de navegación y usaremos propiedades como flex para que la barra de navegación parezca horizontal.
CSS
* {
/* Here we set the margin and padding 0 */
margin: 0;
padding: 0;
}
.navbar {
display: flex;
/* This is used to make the navbar sticky, So that the
navbar stays at the top part even if we scroll */
position: sticky;
align-items: center;
justify-content: center;
top: 0px;
/*it specifies the mouse cursor to be displayed
when it is pointed over the element */
cursor: pointer;
}
.nav-list {
width: 50%;
display: flex;
}
.nav-list li {
list-style: none;
padding: 26px 30px;
}
.nav-list li a {
text-decoration: none;
color: white;
}
.nav-list li a:hover {
color: black;
}
.rightNav {
width: 50%;
text-align: right;
}
#search {
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
}
.background {
background: rgba(0, 0, 0, 0.4) url(
"https://media.geeksforgeeks.org/wp-content/uploads/20201215124609/Capture-300x14.PNG");
background-blend-mode: darken;
background-size: cover;
}
Código final: esta es la combinación de todos los códigos anteriores:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal Navigation Bar
</title>
<style>
* {
/* Here i made the margin and padding 0 */
margin: 0;
padding: 0;
}
.navbar {
display: flex;
/* This is used to make the navbar sticky, So that the
navbar stays at the top part even if we scroll */
position: sticky;
align-items: center;
justify-content: center;
top: 0px;
/*it specifies the mouse cursor to be displayed
when it is pointed over the element */
cursor: pointer;
}
.nav-list {
width: 50%;
display: flex;
}
.nav-list li {
list-style: none;
padding: 26px 30px;
}
.nav-list li a {
text-decoration: none;
color: white;
}
.nav-list li a:hover {
color: black;
}
.rightNav {
width: 50%;
text-align: right;
}
#search {
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
}
.background {
background: rgba(0, 0, 0, 0.4) url(
"https://media.geeksforgeeks.org/wp-content/uploads/20201215124609/Capture-300x14.PNG");
background-blend-mode: darken;
background-size: cover;
}
</style>
</head>
<body>
<!-- here in nav tag i have used two classes
that is navbar and background-->
<!-- each class declared in nav tag will be
used to design the form using CSS-->
<nav class="navbar background">
<!-- we have used list tag that is ul
to list the items-->
<ul class="nav-list">
<li><a href="#Car">Car</a></li>
<li><a href="#file">file</a></li>
</ul>
<!-- we have used rightnav in order to design
the seachbar properly by using CSS-->
<div class="rightNav">
<!-- the value that search bar will take is text -->
<input type="text" name="search" id="search" />
<button class="btn btn-sm">Search</button>
</div>
</nav>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por codingbeast12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA