1
Menú desplegable
HTML-kImberly cardenas
¿Que es un Menú desplegable?
El menú desplegable es un tipo de menú que nos añadir varios enlaces dentro de un enlace. Se utiliza en casos como por ejemplo, para agrupar las categorias de un blog. Como pude notar lo mas probable es que navegando por la web, nos hemos encontrado más de una página que utiliza un menú desplegable.
¿Que es un Menú desplegable
Menú con Java Script
¿Que es ?
¿Java Script?
JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.
Al div lateral le asignamos un ancho fijo
Al div del contenido le asignamos un margen por la izquierda igual al ancho de la columna lateral
Ocultamos el link de "Abrir menú" y mostramos el de "Cerrar menú"
¡Como crear un menú desplegable?
¿Como crear un menú?
Paso 1.
Paso 1 para crear nuestro menú
- Cuando el menú está abierto, el sidebar tiene un ancho fijo y está posicionado como fixed, por si hay que hacer scroll en el contenido. Así que, al div del contenido le damos un margin-left igual al ancho del sidebar.
Paso 2.
¿Es posible hacer un menú
Javascript?
Podríamos ocultarlo también con display:none; así que lo podemos ocultar con visibility:hidden; y luego posicionarlo en absoluto para llevárlo bien lejos, así no molesta ocupando sitio al renderizar en el navegador.
Dentro del placeholder he colocado dos <span> que me servirán para mostrar u ocultar la palabra "abrir" o "cerrar" a conveniencia.
¿cómo controlaremos si el menú está abierto o cerrado? Pues usando un input del tipo checkbox, a través de la pseudoclase :checked, que comprueba si el campo está marcado o no. En la práctica es como si almacenásemos un valor booleano en una variable de JavaScript, pero en CSS.
Menú finalizado
Menú desplegable finalizado
- El selector "+" selecciona el elemento que esté inmediatamente a continuación en el marcado html.
- En cambio, el selector "~" selecciona el elemento que esté a continuación pero no es necesario que esté inmediatamente a continuación.
¿Que significan las etiquetas?
SUBJECTS
<style type="text/css">
El atributo type especifica el tipo de medio de Internet (anteriormente conocido como tipo MIME) de la etiqueta <style>.
El atributo type identifica el contenido entre las etiquetas <style> y </style>.
El valor "text / css" indica que el contenido es CSS.
" target="_blank"
Es un enlace que cuando haces clic en él, la página de destino del enlace se abre en una pestaña nueva.
float: left;
La propiedad float posiciona una caja moviéndola todo lo posible a la izquierda o derecha de su posición original. Los tres valores de esta propiedad se interpretan de la siguiente manera:
- left, la caja se desplaza todo lo posible a la izquierda de la posición en la que se encontraba.
- right, la caja se desplaza todo lo posible a la derecha de la posición en la que se encontraba.
- none, la caja no se desplaza respecto de su posición original. Además de ser el valor por defecto de esta propiedad, el valor none se puede utilizar para eliminar el float aplicado a un elemento mediante otros selectores.
.nav li a:hover {
Cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).
background-color:green
Se puede especificar el color de fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color. El valor por defecto del color de fondo ( background-color ) es transparent e tomando así el color del elemento que está justo debajo de él en el apilamiento.