Para crear una navegación lateral que se pueda desplazar con un icono en cualquier sitio web, se necesitan dos cosas: HTML y CSS. Si desea adjuntar los íconos en la barra de navegación, necesita un enlace CDN con una fuente impresionante. Estas características hacen que el sitio web se vea mejor que un sitio web normal donde la barra de navegación tiene un diseño de la vieja escuela. En este artículo, crearemos la estructura del lado con la barra de navegación lateral que será la sección Creación de estructura y la otra sección para diseñar el sitio web, es decir, Diseño de estructura . A continuación se muestra la salida del código completo.
Creación de estructura: en esta sección, estamos creando la estructura básica del sitio web y también adjuntamos el enlace CDN de Font-Awesome para los iconos que se utilizarán como un icono de la barra de navegación flotante.
- Enlaces CDN para los iconos de Font Awesome:
<enlace rel=”hoja de estilo” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
- Código HTML para hacer la estructura:
html
<!DOCTYPE html> <html> <head> <title> Hoverable Side Navigation with Icon </title> </head> <body> <!-- Geeksforgeeks and Slogan --> <div class="banner"> <h1>GeeksforGeeks</h1> <p> A Online Computer Science Portal for Geeks </p> </div> <!-- Body content topic --> <div class="hoverable-topic"> <h3>Hoverable Side Navigation with Icon</h3> <p> There are many kind of sidebar, hoverable sidebars are on them and quite popular. You can easily create hoverable sidebar by using the HTML and CSS only. To add extra features may you need to add some jQuery. But that totally depends on your requirements. </p> </div> <!-- Side navigation Bar --> <div class="sidehoverbar"> <a href="#" class="article"> Write an Article <i class="fa fa-edit"></i> </a> <a href="#" class="Interview"> Interview Experience <i class="fa fa-file-o"></i> </a> <a href="#" class="Scripter"> Technical Scripter <i class="fa fa-commenting"></i> </a> <a href="#" class="Suggested"> Suggested Topic <i class="fa fa-plus"></i> </a> <a href="#" class="Practice"> Coding Practice <i class="fa fa-laptop"></i> </a> </div> </body> </html>
Diseño de la estructura: en la sección anterior, hemos creado la estructura del sitio web básico en el que vamos a utilizar la navegación lateral desplazable con el icono. En esta sección, diseñaremos la estructura y adjuntaremos los íconos para cada barra de navegación.
- Código CSS para que quede bien la estructura:
html
<style>
/* Head banner team */
.banner {
text-align: center;
width: ;
}
h1 {
color: green;
}
/* styling sidebar */
.sidehoverbar a {
background-color: grey;
position: absolute;
font-size: 22px;
text-decoration: none;
Color: white;
padding: 10px;
border-radius: 0px 25px 25px 0px;
left: -190px;
transition: 0.5s;
opacity: 0.5;
}
/* Hover effect on sidebar */
.sidehoverbar a:hover {
left: 0px;
opacity: 1;
background-color: #4CAF50;
}
/* float icons*/
.sidehoverbar i {
float: right;
}
/* defining position of each nav bar */
.article {
top: 50px;
width: 210px;
height: 30px;
}
.Interview {
top: 110px;
width: 210px;
height: 30px;
}
.Scripter {
top: 170px;
width: 210px;
height: 30px;
}
.Suggested {
top: 230px;
width: 210px;
height: 30px;
}
.Practice {
top: 290px;
width: 210px;
height: 30px;
}
/* content margin */
.hoverable-topic {
margin-left: 55px;
}
</style>
Combine el código de HTML y CSS: este es el código final que es la combinación de las dos secciones anteriores.
html
<!DOCTYPE html>
<html>
<head>
<title>Hoverable Side Navigation with Icon</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Head banner team */
.banner {
text-align: center;
width: ;
}
h1 {
color: green;
}
/* styling sidebar */
.sidehoverbar a {
background-color: grey;
position: absolute;
font-size: 22px;
text-decoration: none;
Color: white;
padding: 10px;
border-radius: 0px 25px 25px 0px;
left: -190px;
transition: 0.5s;
opacity: 0.5;
}
/* Hover effect on sidebar */
.sidehoverbar a:hover {
left: 0px;
opacity: 1;
background-color: #4CAF50;
}
/* float icons*/
.sidehoverbar i {
float: right;
}
/* defining position of each nav bar */
.article {
top: 50px;
width: 210px;
height: 30px;
}
.Interview {
top: 110px;
width: 210px;
height: 30px;
}
.Scripter {
top: 170px;
width: 210px;
height: 30px;
}
.Suggested {
top: 230px;
width: 210px;
height: 30px;
}
.Practice {
top: 290px;
width: 210px;
height: 30px;
}
/* content margin */
.hoverable-topic {
margin-left: 55px;
}
</style>
</head>
<body>
<!-- Geeksforgeeks and Slogan -->
<div class="banner">
<h1>GeeksforGeeks</h1>
<p>
A Online Computer Science
Portal for Geeks
</p>
</div>
<!-- Body content topic -->
<div class="hoverable-topic">
<h3>Hoverable Side Navigation with Icon</h3>
<p>
There are many kind of sidebar, hoverable
sidebars are on them and quite popular.
You can easily create hoverable sidebar by
using the HTML and CSS only. To add extra
features may you need to add some jQuery.
But that totally depends on your
requirements.
</p>
</div>
<!-- Side navigation Bar -->
<div class="sidehoverbar">
<a href="#" class="article">
Write an Article
<i class="fa fa-edit"></i>
</a>
<a href="#" class="Interview">
Interview Experience
<i class="fa fa-file-o"></i>
</a>
<a href="#" class="Scripter">
Technical Scripter
<i class="fa fa-commenting"></i>
</a>
<a href="#" class="Suggested">
Suggested Topic
<i class="fa fa-plus"></i>
</a>
<a href="#" class="Practice">
Coding Practice
<i class="fa fa-laptop"></i>
</a>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA