Cómo Hacer Un Menú Desplegable Vertical

Tabla de contenido:

Cómo Hacer Un Menú Desplegable Vertical
Cómo Hacer Un Menú Desplegable Vertical

Video: Cómo Hacer Un Menú Desplegable Vertical

Video: Cómo Hacer Un Menú Desplegable Vertical
Video: Como hacer un Menú Vertical estilo Acordeón con HTML, CSS y Jquery (Parte 1) 2024, Mayo
Anonim

El menú desplegable vertical es muy útil: ahorra espacio en la página web y, al mismo tiempo, ayuda a navegar fácilmente por el sitio. Intente crear un menú desplegable basado en CSS - Hojas de estilo en cascada. Si aún no es un experto en la creación de código CSS, utilice el servicio purecssmenu.com. Debe seleccionar un tipo de menú, personalizar su apariencia y luego adaptarlo a su propio sitio. El propio servicio generará el código necesario, que luego inserta en los archivos de su sitio.

Cómo hacer un menú desplegable vertical
Cómo hacer un menú desplegable vertical

Instrucciones

Paso 1

Regístrese en el sitio web purecssmenu.com, de lo contrario no podrá descargar el menú creado. Haga clic en el botón Plantillas en el lado izquierdo de la página. A continuación, verá varias ventanas pequeñas con plantillas de menú desplegable, al hacer clic en ellas se cargará una vista previa a la derecha en la ventana Vista previa. Elija una plantilla que se adapte a su sitio

Paso 2

Personalice la fuente y el color del menú: use la pestaña Parámetros. En el campo Fuente, seleccione una fuente, tamaño de fuente, si es necesario, subrayado y negrita. En el campo Colores, establezca el fondo del menú, el color de la fuente y los colores de desplazamiento de la fuente y de fondo

Paso 3

Abra la pestaña Elementos para administrar los elementos del menú. Si hace clic en el botón Borrar papelera de reciclaje, los elementos de muestra se borran y puede crear los suyos propios. Para hacer esto, presione el botón Agregar elemento más; el elemento se agregará al final del menú. El botón Agregar elemento siguiente se utiliza para agregar un elemento después de la hora seleccionada actualmente. El botón Agregar subelemento crea un elemento de submenú para la selección. En consecuencia, para eliminar un elemento, utilice el botón Eliminar elemento

Paso 4

Preste atención al campo Parámetros del artículo en la parte inferior del sitio. En la línea Texto, especifique el nombre del elemento del menú, en la línea Enlace, la URL de la página a la que conducirá este elemento. En la línea Sugerencia, puede dejar una descripción del artículo, que se mostrará cuando pase el cursor sobre el enlace. La línea de destino se utiliza para determinar la forma de abrir la página a la que conduce el enlace. El parámetro _self en esta línea abre la página en la misma ventana del navegador que la actual

Paso 5

Después de terminar de configurar el menú, descárguelo; haga clic en el botón Descargar en la parte inferior derecha de la página (esta función está disponible después de registrarse en el sitio). Seleccione una carpeta en su disco duro donde se guardará el archivo. Desempaquete. Deberá copiar el código requerido del archivo purecssmenu.html en el archivo de plantilla CSS de su sitio. Abra el archivo purecssmenu.html con un editor de texto y copie el código entre las etiquetas y en la plantilla CSS de su sitio (este archivo tiene una extensión.css y se parece a file.css). Ahora pegue el código en el archivo de plantilla (temas) de su sitio: el código de purecssmenu.html entre los comentarios y en lugar del código del menú normal. Para hacer esto, debe estar al menos un poco familiarizado con la programación. Asegúrese de pegar el código en el archivo correcto y guárdelo.

Recomendado: