ubiquitour.com

Cómo hacer un segundo nivel de Navegación Horizontal en WordPress

Cómo hacer un segundo nivel de Navegación Horizontal en WordPress

Numerosos sitios Web utilice los submenús en las barras de navegación que se ocultan hasta que un usuario desplaza su cursor sobre ellos. Hay dos formas de estos menús: vertical y horizontal. Mientras que un menú puede cubrir contenido cuando aparece, un segundo nivel horizontal evita este problema. Crear un segundo menú de tier usando CSS. Añadir esto a su sitio requiere permisos administrativos para acceder al Editor de temas en WordPress. Cierta experiencia con HTML y CSS le es necesario.

Instrucciones

1 Inicie sesión su panel de control de WordPress. En "Apariencia" de la barra de menú de la izquierda, haga clic en "Editor".

2 Haga clic en "style.css" de la lista de archivos a la derecha. Esto trae el archivo en el área de edición en el centro de la pantalla. Copiar todo el código, péguelo en un archivo de texto y guardarlo en su computadora. Si usted comete un error, usted tiene una copia de seguridad que puede utilizar.

3 Agregue el código siguiente en el archivo en una nueva línea en el editor de WordPress:

UL #YourMenu li span {}

padding-top: 0px;

padding-bottom: 0px;

Mostrar: ninguno;

posición: absoluto;

parte superior: 35px;

izquierda: 0;

anchura: 100%;

}

UL # YourMenu li:hover span {Mostrar: block;}

UL # YourMenu li palmo un {display: inline;}

4 Reemplazar "YourMenu" con el nombre de su primer menú de tier y alterar los dos atributos de "relleno" y el atributo "top" para colocar el menú donde usted lo desee. Cuando haya terminado, haga clic en el botón "Guardar archivo".

5 Haga clic en "header.php" de la lista de archivos a la derecha. Crear una copia de seguridad del archivo.

6 Desplácese hacia abajo y busque el primer nivel de la barra de menú. Para cada elemento de lista que desea crear un submenú para, agregar una etiqueta < span > dentro del elemento < li > clave, luego añadir todos los elementos de lista que desee entre el palmo. El producto final para cada submenú se verá así:

< li >

< a href = "#" > menú artículo 1 < /a >

< span >

< a href = "#" > segundo nivel enlace 1 < /a >

< a href = "#" > segundo nivel enlace 1 < /a >

< a href = "#" > segundo nivel enlace 1 < /a >

< /span >

< /li >

7 Reemplace "#" con las direcciones URL de tus enlaces y dar el menú nombres de artículos. Repita esto para todos los submenús que desee crear. Cuando haya terminado, haga clic en "Guardar cambios".