Informatica 3 Liceo Scientifico Scienze Applicate/CSS pag3 Progetto

CSS menù di scelta

Questa parte indica una lista in cui sono raggruppati: l’inserimento, la modifica e i progetti del docente, ai quali vengono date delle dimensioni

div.lista {
  width: 700px;
}

Con questo comando le liste non risultano puntate.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Qui invece viene definito il carattere delle voci che fanno parte della lista.

li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}

Si riferisce sempre alla lista e in questa parte del codice possiamo notare che ci sono dei comandi che ci permettono di aumentare la dimensione del carattere e anche della riga quando si passa sopra il cursore del mouse, rimanendo sempre nel posto in cui si trovano.

li a {
  text-decoration: none;
  color: #4D4D4D;
  display: block;
  width: 700px;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;}
li a:hover {
  font-size: 25px;
  background: #f6f6f6;
}

Questo è il risultato ottenuto:

menù1

Qui puoi vedere il funzionamento della funzione:

menù2