Para crear un menú de navegación de alternancia móvil , necesita HTML, CSS y JavaScript. Si desea adjuntar los íconos con el menú, entonces necesita un enlace CDN con una fuente impresionante. Este artículo se divide en dos secciones: Creación de estructura y Diseño de estructura.
Vistazo de navegación completa:
Creación de estructura: en esta sección, crearemos una estructura básica del sitio y también adjuntaremos el enlace CDN de Font-Awesome para los iconos que se utilizarán como icono de menú.
- 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>Mobile Navigation Bar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="menu-list"> <!-- Logo and navigation menu --> <div class="geeks"> <a href="#" class="">GeeksforGeeks</a> <div id="menus"> <a href="#">Language</a> <a href="#">Practice</a> <a href="#">Interview</a> <a href="#">Puzzle</a> </div> <!-- Bar icon for navigation --> <a href="javascript:void(0);" class="icon" onclick="geeksforgeeks()"> <i onclick="myFunction(this)" class="fa fa-plus-circle"> </i> </a> </div> </div> </body> </html>
Estructura de diseño: en la sección anterior, hemos creado la estructura del sitio web básico donde vamos a utilizar el icono de menú. En esta sección, diseñaremos la estructura de la barra de navegación.
- Código CSS de estructura:
HTML
<style>
/* Navigation bar styling */
.menu-list {
max-width: 300px;
margin: auto;
height: 500px;
color: white;
background-color: green;
border-radius: 10px;
}
/* Logo, navigation menu styling */
.geeks {
overflow: hidden;
background-color: #111;
position: relative;
}
/* styling navigation menu */
.geeks #menus {
display: none;
}
/* Link specific styling */
.geeks a {
text-decoration: none;
color: white;
padding: 14px 16px;
font-size: 16px;
display: block;
}
/* Navigation toggle menu styling */
.geeks a.icon {
display: block;
position: absolute;
right: 0;
top: 0;
}
/* hover effect on navigation logo and menu */
.geeks a:hover {
background-color: #ddd;
color: black;
}
</style>
- Código JavaScript para el menú de animación:
Javascript
<script>
// Function to toggle the bar
function geeksforgeeks() {
var x = document.getElementById("menus");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
<script>
// Function to toggle the plus menu into minus
function myFunction(x) {
x.classList.toggle("fa-minus-circle");
}
</script>
Combine el código HTML, CSS y JavaScript: este es el código final después de combinar las secciones anteriores. Será el menú animado de navegación móvil.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mobile Navigation Bar</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Navigation bar styling */
.menu-list {
max-width: 300px;
margin: auto;
height: 500px;
color: white;
background-color: green;
border-radius: 10px;
}
/* logo, navigation menu styling */
.geeks {
overflow: hidden;
background-color: #111;
position: relative;
}
/* styling navigation menu */
.geeks #menus {
display: none;
}
/* link specific styling */
.geeks a {
text-decoration: none;
color: white;
padding: 14px 16px;
font-size: 16px;
display: block;
}
/* navigation toggle menu styling */
.geeks a.icon {
display: block;
position: absolute;
right: 0;
top: 0;
}
/* hover effect on navigation logo and menu */
.geeks a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="menu-list">
<!-- Logo and navigation menu -->
<div class="geeks">
<a href="#" class="">GeeksforGeeks</a>
<div id="menus">
<a href="#">Language</a>
<a href="#">Practice</a>
<a href="#">Interview</a>
<a href="#">Puzzle</a>
</div>
<!-- Bar icon for navigation -->
<a href="javascript:void(0);" class="icon"
onclick="geeksforgeeks()">
<i onclick="myFunction(this)"
class="fa fa-plus-circle">
</i>
</a>
</div>
</div>
<script>
// Function to toggle the bar
function geeksforgeeks() {
var x = document.getElementById("menus");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
<script>
// Function to toggle the plus menu into minus
function myFunction(x) {
x.classList.toggle("fa-minus-circle");
}
</script>
</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