Menú desplegable. Diferents solucions

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Moltes pàgines web tenen un menú desplegable, com molt bé saps. En certes ocasions, aquests menús desplegables requereixen fins a dos nivells de desplegament. Per exemple, a http://www.ine.es/ ves a 06. Productos y servicios > Información estadística > Certificados y notas informativas.

Avui en dia ningú es posa a programar un menú desplegable des de zero. Quan en un projecte es vol incorporar un menú desplegable buscarem una solució que ens satisfaci (a nivell de disseny, prestacions, etc). Un cop elegida la solució es descarrega el codi font, i la feina del dissenyador i/o programador és adaptar el menú desplegable al nostre disseny de la web que estem fent. Això normalment implica:

Per tant, és més una feina d'adaptació que no pas de programació. Una feina, però, que pot ser complicada.

A nivell tecnològic s'ha comentat a classe que tenim diferents solucions. Trobarem a la web solucions amb Javascript, com és lògic. Aquestes solucions poden ser Javascript a pèl, o bé utilitzar un framework com ara jQuery. Ara bé, també trobarem solucions que només utilitzen CSS3 (gràcies a què quan fem hover sobre un element podem canviar l'estil de l'element).

Referències

Solució HTML5+CSS3 (no té res de Javascript):

Menús desplegables a Bootstrap (molta informació):

Menú desplegable amb JQuery (efecte persiana):

Desenvolupament

Feina per l'alumne

En aquesta entrega hauràs de fer un menú desplegable de dos nivells. Se't dona la llibertat d'escollir entre les moltes solucions que trobaràs a la web. El que sí que se't demana és que facis l'esforç de canviar aspectes de disseny del menú com ara els colors, tipus de font, tamany de les caixes. També se't demana que integris aquest menú desplegable dins d'una web amb un context coherent: has d'elegir un tema de la web, un títol, dotar de contingut els diferents enllaços del menú desplegable... en definitiva, no facis una web xorra.

Entrega

Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). Entrega també una captura de la pantalla on es pugui veure el funcionament correcte de l'exercici. S'empaquetaran tots aquests fitxers i es pujaran al Schoology dins del termini d'entrega de la pràctica.

Recorda la normativa per entregar les pràctiques al Schoology: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology


creat per Joan Quintana Compte, abril 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines