-En la clase 10 vamos a ver cambio de estilo con transiciones, lo que hace animar los estilos de un objeto. Creamos una clase para los botones del menú, que tenga un color distinto al pasar el ratón.
-Construimos hora los estilos de botón sección:
.botonseccion{
color:bisque;
transition: 0.8s;
}
.botonseccion:hover{
color:brown;
text-decoration: line-through;
}
-Utilizamos el valor transition, medido en segundos, para que el cambio entre el estado normal y el hover se haga en animación.
-Vamos a utilizar la biblioteca JavaScript jQuery para organizar el sitio de manera más efectiva.
Cargando la cabecera externamente en un archivo, y cambiando el comportamiento del botón de menú móvil.
Obtenemos el archivo jquery.min.js y lo guardamos en la carpeta js.
En index.html para llamar a jQuery incluimos en el head:
(Esto hay que ponerlo en todas las paginas)
Vamos hacer el comportamiento de el botón de menú móvil más sencillo. Borramos la etiqueta script con la función de abrir menú. Y cambiamos el código del botón por esta simple linea, que cambia la visibilidad del menú.
-Vamos a utilizar jQuery para cargar un nuevo archivo de cabecera, que contenga la cabecera y no se tenga que copiar en todas las secciones: Creamos un archivo cabecera HTML con este código:
En index se quitaría este contenido, quedando la capa cabecera únicamente.
En nuestro sitio local es posible que no funcione debido a la seguridad cors, al no estar en un sitio web. Para solucionarlo podemos abrir chrome con la siguiente opción:
C:\carpetachrome\chrome.ese --allow-file-access-from-files
Esto permite que se accedan archivos locales.
