Recientemente, uno de nuestros usuarios nos preguntó cómo reemplazar su menú de navegación con un menú de panel deslizante de jQuery. Los menús de paneles deslizantes se pueden utilizar para mejorar en gran medida la experiencia del usuario de los sitios web móviles. En este artículo, le mostraremos cómo agregar un menú de panel deslizante en su tema de WordPress.

Menú de panel deslizante en el tema predeterminado de WordPress

Nota: Este es un tutorial de nivel intermedio y requiere conocimientos suficientes de HTML y CSS.

Reemplazar el menú predeterminado con un menú de panel deslizante en WordPress

El objetivo aquí es mostrar a los usuarios un menú de panel deslizante en pantallas más pequeñas, manteniendo el menú predeterminado de nuestro tema para que los usuarios de computadoras portátiles y de escritorio puedan ver el menú completo. Antes de comenzar, es importante saber que hay muchos temas diferentes de WordPress, y tendrás que lidiar con algunos CSS más adelante.

Lo primero que debe hacer es abrir un editor de texto sin formato, como el Bloc de notas, en su computadora y crear un nuevo archivo. Copia y pega este codigo:

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

reemplazar example.com con su propio nombre de dominio, también reemplace your-theme con su directorio de temas real. Guarde este archivo como slidepanel.js en su escritorio. Este código usa jQuery para alternar el menú del panel deslizante. También anima los efectos de transición.

Abra un cliente FTP como Filezilla y conéctese a su sitio web. A continuación, vaya al directorio de su tema y ábralo si tiene una carpeta js. Si su directorio de temas no tiene una carpeta js, debe crear una y cargar el archivo slidepanel.js en la carpeta js.

El siguiente paso es diseñar o encontrar iconos de menú. Los iconos de menú más utilizados son tres líneas. Puede crear uno usando Photoshop o encontrar una de las muchas imágenes existentes de google. En este tutorial, usamos un ícono de menú de 27x23px. Después de crear o ubicar el ícono del menú, cámbiele el nombre a menu.png y cárguelo en la carpeta de imágenes en su directorio de temas.

El siguiente paso es poner en cola los archivos javascript para el panel deslizante en WordPress.Básicamente solo copie y pegue este código en su tema functions.php documento.

 
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );

Ahora que todo está configurado, debe modificar el menú predeterminado del tema.En general, la mayoría de los temas muestran un menú de navegación en el tema. header.php documento.Abierto header.php archivo y encuentre una línea similar a esta:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

El objetivo aquí es envolver el menú de navegación del tema en código HTML para mostrar un menú de panel deslizante en pantallas más pequeñas.lo envolveremos en un <div > y <div >. como esto:

<div ><img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div >
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Reemplace example.com con su propio nombre de dominio y your-theme con su directorio de temas. Guarde sus cambios.

El paso final es usar CSS para ocultar el ícono del menú para los usuarios de pantallas grandes y mostrárselo a los usuarios de pantallas pequeñas. También necesitamos ajustar la posición de los iconos del menú y la apariencia del panel deslizante. Copie y pegue este CSS en la hoja de estilo de su tema.

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

Tenga en cuenta que los menús de navegación de su tema pueden usar diferentes clases de CSS y pueden entrar en conflicto con este estilo de CSS. Sin embargo, puede solucionar estos problemas utilizando la herramienta Chrome Inspector para averiguar qué clases CSS en su hoja de estilo están en conflicto. Use CSS para que coincida con su estilo y necesidades.

Esperamos que este tutorial le haya ayudado a agregar un menú de panel deslizante en WordPress usando jQuery.Para comentarios y preguntas, deje un comentario a continuación y no olvide seguirnos en Google+

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.