Vamos a comenzar a escribir nuestro código de QWERTY vamos a abrir el J.V y vamos a ver y puedes ver
que aquí tenemos ya bastante código
y en este caso que ya tenemos nuestro Effy vamos a crear nuestro document ready.
Después de todo esto vamos a poner aquí signo de dólar función que voy ser más espacio para que esto
quede más centrado.
Y habremos disfunción parentesis cerramos el paréntesis
y aquí vamos a ponerle algo así como una alerta que diga funciona nada más.
Para probar que este código de veras funciona cargo vemos que aquí funciona OK vamos a comenzar con
este menú y vamos aquí a eliminar esta parte primero vamos a escribir una pequeña función que va a ser
como el tracking de que nos va a estar diciendo cuál es el enlace que hemos presionado aquí puedes ver
que tenemos un menú programa así que vamos a por aquí Signorelli QR menú programas una clase.
Volvemos a on click function.
Va a ser un blog más o menos lo mismo que lo que hicimos en el capítulo anterior.
Vamos a crear una clase que se llame bar enlace y hay formas de hacerlo distinto muchas personas le
gusta escribirlo algo así como bar enlace presionado y luego le dan un igual a Adis etcétera y luego
poner el enlace presionando igual.
Enlace presionado HR-V leer como que les gusta ir creando así más más y más y más variables.
Sin embargo esto es lo mismo en este caso vamos a eliminar esta parte y puedes ponerlo así.
Va a ser dice PTR HR-V vamos a poner aquí un consolador enlace además para asegurarnos que esto está
funcionando correctamente así que vemos el nuestra consola recargo y doy click aquí vemos que conferenciar
lo tomas correcto vamos a dar click en seminarios también y también en venta y después ver ese pequeño
brinco no te preocupes lo corregiremos un poquito más adelante y en este caso si recuerdas el código
igual puede ser un poco difícil de recordar.
Cree estas clases se llaman ocultar así que aquí le podríamos poner
y tendría que ser aunque fuera del antesdel antes un click no le
Dieppa ocultar.
Jaime R0 eso no forma o con CCC ocultarlas cualquiera de las dos está bien.
Podremos también ponerla aquí en el programa y ponerla aquí DIV ocultar y ponerle un display name voy
a cortar esta y ponerla más o menos en la parte donde tiene que ir más o menos tienes que ir aquí cualquiera
de las dos formas se está bien no tienes que preocuparte y vamos a hacer algo vamos a ponerle por ejemplo
un poco de scroll.
Tenemos este programa evento y lo tenemos este Dib y todos tienen info curso así que podríamos ponerle
selector de Cuadri apuntó programa evento
programa evento y luego un espacio para info curso esto nos va a regresar los tres pero ya nada más
quiero el primero así que firme y le pongo su cargo y de momento nada más me muestra los talleres no
me muestra las conferencias ni los seminarios y ya vemos que se desborda totalmente nuestro diseño y
podríamos también crear un comentario que diga programa de conferencias ya que estaremos creando mucho
código y cuerina en estos capítulos.
Para ver las ventajas de Kairi o quitar esto y después del bar enlace vamos a ponerle aquí.
Enlace punto faith in habíamos visto que feeding le daba un buen efecto se veía bien qué le puedes poner
la duración a poner un segundo y vamos a recargar.
Y si doy click en conferencias vemos que se ve la conferencia se alcanza a ver pero no se oculta de
aquí arriba así que también vamos a darle ocultar todas las que tienen ocultarles vamos a dar un jabita
recargo y vemos que se ve.
Doy clic en conferencias se ve de esta forma seminarios talleres etc etc. Vemos que ya funcionan mejor
en vez de darle fait out y también darle un segundo click aquí en conferencias y tarda un rato creo
que no es tan buena idea mejor ponemos un Jaitt y recargo click aquí.
Y podemos ver ese pequeño brinco.
Nada más sería que ponerle un Fool's recargo que si la conferencia se ve de esta forma y podemos ver
que va funcionando correctamente
lo que se ve bien ahí nuestro diseño va mejorando bastante
nos hace falta algo más.
Puedes ver que nuestro diseño original aquí tenemos un pequeño triángulo tenemos un pequeño triángulo
y esa parte la vamos a manejar con o agregándole un una clase activo a nuestros enlaces así que lo podríamos
poner selector Diz junto a class activo por lo tanto nos va a marcar que Enlace es el que está activo
y cual ha presionado al usuario para esto va a cambiar la vista y ponerle click aquí y dar click en
talleres y vemos que lo dice activo conferencias activo y seminarios activos sólo está agregando los
tres pero queremos que lo elimine en los que no se haya dado click pero es difícil saber cuales no se
les dio clic.
La forma más fácil es hacerlo con menos programa a darle remezclas a todos y después se le agrega al
que le hayamos dado click.
Así que si le doy click por ejemplo aquí en conferencias vemos que aparece activo conferencias y seminarios
la quitan la anterior y se la pone este puedo primero se la quita al anterior y aparece aquí sin embargo
cuando recargo por primera vez mi sitio web puedes ver que ninguno de ellos tiene la clase de activo
así que podría ponerlo aquí antes de un click.
Signo de gato e igual punto menú programa a lo por aquí un First darle a las activo y el recargo y inspeccion
no el primer elemento que aparece activo y rectifica en conferencias seminarios y talleres conferencias
y podemos tener que es parte o más y nos está marcando cuál está activo de nuestros enlaces.
Sin embargo nada más está la clase de activo no no hace nada.
Así que en el siguiente video escribiremos un poquito de CSS para agregar el pequeño triángulo que debe
de aparecer aquí.