Share
¿Así que los has visto en los sitios web de otras personas y quieres saber cómo puedes tener uno también? El menú de navegación de desplazamiento que se ve en muchos sitios web es realmente fácil de replicar en WordPress. Ayude a sus lectores, déjelos hacer clic en el menú desde cualquier punto de la página. Así es cómo…
Lo primero es lo primero, necesita que exista un menú para mostrarlo en la página. Vamos a crear uno nuevo llamado 'topnavigation'. Aquí está el código más básico para configurar ese menú en su funciones.php expediente:
Accentsconagua
register_nav_menus (array ('topnavigation' => __ ('Top Navigation', 'TU NOMBRE DEL TEMA VA AQUÍ'))); Si ya tienes un register_nav_menus configuración de la función, añadir el 'topnavigation'línea de menú para esa función.
Entra en tu panel de control, abre la pestaña de tus menús. Cree un nuevo menú y asígnele el espacio que acaba de llamar "Navegación superior". Luego llene el menú con páginas. Acabo de ir a una casa, tienda, eventos y blog: usas lo que quieras.
Necesita llamar a su menú en la parte superior de su cuerpo en el header.php expediente. Es muy importante que envuelvas ese menú en un envoltorio. div de su propia elección. He elegido un div llamado topnavigation. Tendremos que hacer todo en esto. div Mover con la página más tarde. Esta es la forma más fácil de hacer eso..
Usa el siguiente código en header.php:
'topnavigation')); ?>
Eso debería darle algo que se vea así en su página:
Por supuesto, tu tema será diferente. El mío es solo una instalación básica de underscores.me con una cuadrícula simple de Get Skeleton.
Después de eso podemos empezar a peinar. Para que podamos ver lo que estamos haciendo, comencemos agregando un poco de CSS para darle un color de fondo y queremos que tenga un ancho del 100% para que no se vea raro cuando lo hacemos desplazarse en un momento.
Usa el siguiente código en style.css o como se llame tu hoja de estilo:
#topnavigation ancho: 100%; color de fondo: # 999;
Actualiza tu página y verás (si has seguido) esto:
Ahora queremos asegurarnos de que nuestros enlaces vayan al centro de esa barra gris. Así que crearemos un elemento de navegación alrededor del menú de navegación:
Entonces tenemos que darle un poco de estilo a esa nueva navegación. Podemos hacerlo así:
#topnavigation nav width: 940px; // el ancho de su div contenedor puede ser diferente margen: 0 auto; #topnavigation li display: inline; relleno: 10px; margen: 20px 0;
Esas dos cosas juntas harán que el menú de navegación en tu página se vea así:
Finalmente, estamos listos para hacerlo desplazarse. La mejor manera de hacerlo es fijarlo en la parte superior de la ventana y luego hacerlo "flotar" sobre todos los demás elementos de la página..
Actualiza tu #trabajo estilo para verse así:
#topnavigation ancho: 100%; color de fondo: # 999; posición: fijo // Péguelo en la parte superior de la ventana índice z: 1; // Hacer que flote por encima de todos los demás elementos de altura: 50px; // Nos da un punto de referencia para lo último
Pero si vuelves a cargar la ventana, notarás que debido a que la navegación está flotando, ha permitido que todo el resto del contenido vaya debajo de ella..
Para evitar eso, agregue un margen a la parte superior del contenedor div con todo lo demás en ella. En mi plantilla, que div se llama #página. Así que voy a agregar esto a mi archivo CSS:
#page padding-top: 60px; // La altura de mi división de navegación superior más un poco de relleno adicional para el placer visual
Eso te dejará con esto:
Después de eso, puede sentirse libre de personalizar la navegación al contenido de su corazón.!
