En este artículo, aprenderemos sobre el complemento hc-offcanvas-nav de jQuery que ayuda a los desarrolladores web a crear una navegación fuera del lienzo alternada con elementos flexibles de menú y submenú de varios niveles. Este complemento brinda algunos métodos para controlar el lienzo y está disponible de forma gratuita.
Descargue el complemento jQuery hc-offcanvas-nav y guarde los archivos precompilados necesarios en su carpeta de trabajo y utilícelos agregando la sección principal de su código HTML como se muestra en los ejemplos a continuación.
Crea una instancia del complemento:
var Nav = $('#navID').hcOffcanvasNav();
Ejemplo 1: En el siguiente ejemplo, se crea una página web simple en un contenedor HTML. Las etiquetas HTML «ul» y «li» se utilizan para enumerar diferentes páginas web con enlaces de referencia. El desarrollador puede cambiar el código y hacerlo más anidado según los requisitos de la aplicación. En la parte JavaScript del código, la inicialización del complemento hc-offcanvas-nav se realiza con algunas configuraciones básicas. Se pueden agregar más configuraciones y explorar más a fondo.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>jQuery hc-offcanvas-nav Plugin</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/css?family=Raleway:200, 300, 400, 600, 700">
<link rel="stylesheet" href="demo.css">
<script src=
"https://code.jquery.com/jquery-3.4.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js">
</script>
<script src="hc-offcanvas-nav.js">
</script>
</head>
<body>
<h2>GFG HC canvas Nav API</h2>
<div id="container">
<nav id="navID">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Search Engine Optimization</a></li>
<li><a href="#">Web development</a>
<ul>
<li><a href="#">Web design</a></li>
<li><a href="#">Web content coding</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<script>
(function($) {
var Nav;
// initialize hc-offcanvas-nav()
Nav = $('#navID').hcOffcanvasNav({
levelTitles: true,
closeOnClick: false,
disableAt: false,
});
// close event
Nav.close();
})(jQuery);
</script>
</div>
</body>
</html>
Salida que muestra menús: 
Salida que muestra submenús: 
Salida que muestra navegación:
Ejemplo 2: El siguiente ejemplo demuestra el uso de varios atributos de datos que se adjuntan a los elementos HTML. Según el uso de los atributos de datos, la página «Acerca de nosotros» parece estar activa y así sucesivamente. Consulte a continuación la imagen de salida dada para una mejor comprensión.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/css?family=Raleway:200, 300, 400, 600, 700">
<link rel="stylesheet" href="demo.css">
<script src=
"https://code.jquery.com/jquery-3.4.1.slim.min.js">
</script>
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js">
</script>
<script src="hc-offcanvas-nav.js">
</script>
</head>
<body>
<nav id="navID">
<ul>
<li data-nav-highlight>
<a href="#">Home</a></li>
<li data-nav-active><a href="#">About Us</a>
<ul data-nav-active>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a data-nav-close="false" href="#">
Add New Page
</a></li>
<li data-nav-custom-content>
<p>Developers or designer's
own custom content.</p>
</li>
</ul>
</nav>
<script>
(function($) {
var Nav;
// initialize hc-offcanvas-nav()
Nav = $('#navID').hcOffcanvasNav({
levelTitles: true
});
})(jQuery);
</script>
</body>
</html>
Salida que muestra el menú principal: 
Salida que muestra el submenú activo: 
Salida que muestra la navegación:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA