CSS - menu orizzontale per i web designer principianti
HTML e CSS sono linguaggi di programmazione Web necessari per il layout del sito web. Un programmatore principiante che decide di padroneggiare le basi di questa professione dovrebbe iniziare studiandoli, perché è possibile creare un semplice sito web basato su di essi. 
Su HTML e CSS, il menu orizzontale per il sito è facile da costruire, dovresti iniziare scrivendo un framework.
Costruire una cornice
Per prima cosa devi fare il markup html. Il menu è più semplice per creare un elenco puntato utilizzando il tag
- . Il tag è abbinato quindi richiede la chiusura alla fine dell'elenco.
esempio:
Questa è la base, che viene quindi formata nel CSS in un menu orizzontale, fisso o a discesa.
Menu orizzontale
Una volta che il codice è stato marcato, è ora di iniziare a lavorare con lo stile. Va notato che i tag associati utilizzati per il framework predefinito sono blocchi, il che significa che per creare sia un menu orizzontale normale che un menu a discesa in CSS, è necessario modificare il tipo di elemento in lettere minuscole. Questo può essere fatto usando la proprietà display. È aggiunto all'elemento:
.menu li {
display: inline;
}
Quindi si trasforma in orizzontale. Se ci sono molti sotto-articoli, allora possono spostarsi su una nuova riga senza ulteriori proprietà specificate. In questo caso, utilizzare la proprietà per visualizzare gli spazi e trasferire il testo. Nowrap salva interamente il testo, senza sillabazione, e pre-wrap salva gli spazi da HTML e aggiunge quelli automatici.
.menu li {
display: inline;
white-space: nowrap;
}
Per non segnare una riga con il testo solido, puoi organizzare le informazioni in gruppi e creare un sottomenu aggiuntivo che visualizzi accuratamente tutto ciò che ti serve. I sottomenu possono essere a discesa o aperti.
Menu a discesa
Dopo aver imparato le basi della costruzione di un menu orizzontale sul CSS, un sottomenu che ne esce può essere organizzato in una lista verticale. L'elenco nel markup deve essere reso multi-livello, aggiungere tag aggiuntivi per gli elenchi puntati all'interno dell'elemento desiderato. Il tag deve contenere i seguenti elementi dell'elenco:
Nel css .menu, li viene sostituito con ".menu> li", in modo che gli elementi interni diventino verticali. Il posizionamento relativo viene aggiunto al selettore genitore, in cui l'elemento viene spostato dai bordi del blocco padre e al figlio assoluto (completamente rimosso dallo stream e coordinato dall'elemento più vicino e, in caso contrario, dai bordi del browser). Gli elementi con posizionamento relativo possono contenere al loro interno elementi figlio con posizionamento assoluto. Ciò significa che quando il blocco si sposta con posizione: relativa, le parti fisse rimarranno al suo posto.
Di norma, la parte a discesa rimane sempre aperta, a meno che non si aggiunga una visualizzazione all'elemento solo quando si passa il cursore. Per fare questo, l'elenco aggiuntivo è nascosto per impostazione predefinita:
.menu> li {
display: inline;
posizione: relativa;
}
.menu .second {
posizione: assoluta; (sottomenu vincolante all'unità genitore)
display: nessuno; (nascondi display)
}
.menu> li: hover .second {(la pseudo-classe hover è usata per far apparire gli elenchi di hover)
display: block;
}
Il risultato sarà un menu piccolo e accurato.
Menu fisso
Per catturare creato in forma aperta, la proprietà di visualizzazione con il blocco di valori viene utilizzata per analogia con il menu a discesa, ma senza nascondere il display. Se lo desideri, puoi correggere non solo la lista aperta, ma anche la barra dei menu quando scorri la pagina. Quando l'utente scorre il testo verso il basso, il menu può sempre rimanere in primo piano, rendendo più facile la navigazione nel sito. Questo elemento ha diverse funzionalità. È molto simile all'assoluto, ma si lega solo al browser, cadendo dal flusso. È conveniente coordinare un elemento del genere usando le solite proprietà superiore / inferiore, sinistra / destra. Un esempio di un menu orizzontale con elementi a discesa fissati nel browser:
.menu> li {
display: inline;
posizione: fissa;
}
.menu .second {
posizione: assoluta;
display: nessuno;
}
.menu> li: hover .second {
display: block;
}
Una proprietà position viene aggiunta con il valore fixed, dopo il quale il menu rimane in posizione durante lo scorrimento. Anche un principiante può gestire questo menu. Elenco di markup HTML: semplice e conveniente. Per visualizzare correttamente gli stili CSS in un browser, si consiglia di ricordare i punti di stile in una vista di blocco, aggiungendo bordi e elementi di coordinamento, rientri interni ed esterni in modo che i punti descritti non siano sovrapposti l'uno sull'altro. Spesso dimentica di aggiungere la larghezza e l'altezza dell'elemento. Per visualizzare l'elemento desiderato al di fuori della parte visibile per la progettazione successiva, è possibile utilizzare la proprietà float, "inchiodandola" sul lato destro o sinistro (float: right;).