Barra de Navegación
Con la barra de navegación de Quickly simplifica la experiencia del usuario al proporcionar una guía intuitiva y accesible a través de tu sitio web. Con diseño claro y funcionalidades versátiles, facilita la navegación y mejora la interacción del usuario, garantizando una experiencia fluida y satisfactoria.
Barra centrada
Explora nuestra barra de navegación centrada: intuitiva, elegante y fácil de usar. Accede rápidamente a todas nuestras secciones principales mientras disfrutas de una experiencia de usuario sin complicaciones.
Ejemplo
HTML
<!-- Primer menú -->
<nav class="navbar rounded bg-black">
<div class="navbar-container grid align-content-hc" id="navbar1">
<div class="navbar-header">
<button class="navbar-toggle" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Mi Logo</a>
</div>
<div class="navbar-collapse" id="navbar-collapse1">
<ul class="navbar-nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
</nav>
Barra justificada a los extremos
Ejemplo
HTML
<!-- Segundo menú -->
<nav class="navbar rounded bg-black px-1">
<div class="navbar-container grid space-hb" id="navbar2">
<div class="navbar-header">
<button class="navbar-toggle" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Mi Logo</a>
</div>
<div class="navbar-collapse" id="navbar-collapse2">
<ul class="navbar-nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
</nav>
Barra justificada a los extremos invertida
Para invertir una barra de navegación, puedes emplear la clase ".reverse-h-es". Esto te permite justificar el logo y el menú a los extremos opuestos sin tener que modificar el código.
Ejemplos
HTML
<!-- Tercer menú -->
<nav class="navbar rounded bg-black px-1">
<div class="navbar-container grid space-hb reverse-es" id="navbar3">
<div class="navbar-header grid space-hb">
<a href="#" class="navbar-brand">Mi Logo</a>
<button class="navbar-toggle" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse" id="navbar-collapse3">
<ul class="navbar-nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
</nav>
Navbar con submenu
Barra de navegación con equidistantes espacios entre sus bloques y menú centrado.
Ejemplos
HTML
<!-- Cuarto menú -->
<nav class="navbar rounded bg-black">
<div class="navbar-container grid space-hb" id="navbar4">
<div class="navbar-header grid space-hb">
<button class="navbar-toggle mml-1" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand mmr-2">Mi Logo</a>
</div>
<div class="navbar-collapse" id="navbar-collapse4">
<ul class="navbar-nav">
<li><a href="#">Inicio</a></li>
<li>
<a href="#" aria-haspopup="true" aria-expanded="false">Acerca de <svg class="ml-1 ico-8 ico-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg></a>
<ul>
<li><a href="#">Acerca de 1</a></li>
<li><a href="#">Acerca de 2</a></li>
</ul>
</li>
<li>
<a href="#" aria-haspopup="true" aria-expanded="false">Servicios <svg class="ml-1 ico-8 ico-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg></a>
<ul>
<li><a href="#">Servicio 1</a></li>
<li><a href="#">Servicio 2</a></li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div class="hide-s mt-1 mr-1">
<a href="#" title="..." class="mx-1">
<svg class="ico-24 ico-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 10h-2v2h2v6h3v-6h1.82l.18-2h-2v-.833c0-.478.096-.667.558-.667h1.442v-2.5h-2.404c-1.798 0-2.596.792-2.596 2.308v1.692z"/></svg>
</a>
<a href="#" title="..." class="mr-1">
<svg class="ico-24 ico-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 7.082c1.602 0 1.792.006 2.425.035 1.627.074 2.385.845 2.46 2.459.028.633.034.822.034 2.424s-.006 1.792-.034 2.424c-.075 1.613-.832 2.386-2.46 2.46-.633.028-.822.035-2.425.035-1.602 0-1.792-.006-2.424-.035-1.63-.075-2.385-.849-2.46-2.46-.028-.632-.035-.822-.035-2.424s.007-1.792.035-2.424c.074-1.615.832-2.386 2.46-2.46.632-.029.822-.034 2.424-.034zm0-1.082c-1.63 0-1.833.007-2.474.037-2.18.1-3.39 1.309-3.49 3.489-.029.641-.036.845-.036 2.474 0 1.63.007 1.834.036 2.474.1 2.179 1.31 3.39 3.49 3.49.641.029.844.036 2.474.036 1.63 0 1.834-.007 2.475-.036 2.176-.1 3.391-1.309 3.489-3.49.029-.64.036-.844.036-2.474 0-1.629-.007-1.833-.036-2.474-.098-2.177-1.309-3.39-3.489-3.489-.641-.03-.845-.037-2.475-.037zm0 2.919c-1.701 0-3.081 1.379-3.081 3.081s1.38 3.081 3.081 3.081 3.081-1.379 3.081-3.081c0-1.701-1.38-3.081-3.081-3.081zm0 5.081c-1.105 0-2-.895-2-2 0-1.104.895-2 2-2 1.104 0 2.001.895 2.001 2s-.897 2-2.001 2zm3.202-5.922c-.397 0-.72.322-.72.72 0 .397.322.72.72.72.398 0 .721-.322.721-.72 0-.398-.322-.72-.721-.72z"/></svg>
</a>
<a href="#" title="...">
<svg class="ico-24 ico-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 10h-2v2h2v6h3v-6h1.82l.18-2h-2v-.833c0-.478.096-.667.558-.667h1.442v-2.5h-2.404c-1.798 0-2.596.792-2.596 2.308v1.692z"/></svg>
</a>
</div>
</div>
</nav>
Menú Navbar Dinámico Quickly para WordPress Nuevo
Hemos implementado soporte para nuestro menú, diseñado para funcionar perfectamente con WordPress. Ahora, puedes crear menús dinámicos y personalizados que se adaptan a tu sitio, mejorando la experiencia de navegación de tus usuarios.
¿Cómo puedo hacerlo para que funcione?
Para que funcione, solo necesitas seguir estos cuatro pasos:
Paso 1
Para que el menú se muestre correctamente, es necesario hacer un pequeño ajuste en la estructura del código en el archivo `header` de tu plantilla. Simplemente copia y pega el siguiente código en tu tema.
Header.php
<!-- Menú Wordpress -->
<nav class="navbar rounded bg-black px-1">
<div class="navbar-container grid align-content-hc" id="navbar1">
<div class="navbar-header">
<button class="navbar-toggle mml-1" aria-label="Toggle navigation">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
</div>
<div class="navbar-collapse" id="navbar-collapse1">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-header',
'walker' => new Quickly_Nav_Walker(),
'container' => false,
'menu_class' => 'navbar-nav',
'items_wrap' => '<ul class="%2$s">%3$s </ul>',
) );
?>
</div>
</div>
</nav>
Paso 2
Incluye el siguiente código en el archivo functions.php de tu tema de WordPress.
Function.php
<!-- Agregar a function.php -->
<?php
require get_template_directory() . '/Quickly_wp_nav_menu_walker.php';
// Registrar el menú de navegación
register_nav_menus( array(
'menu-header' => __( 'Menú Header', '' )
) );
?>
Paso 3
Descarga el archivo Quickly_wp_nav_menu_walker.php e inclúyelo en la raíz de tu tema.
DESCARGARPaso 4
Configura tu menú en el administrador de WordPress, ¡y listo! Ahora puedes disfrutar del menú de Quickly en WordPress. ¡Disfruta de tu menú! 😄