I Codici A Barre Di Navigazione Edgesforextendedlayout

CSS barra di navigazione Avere una navigazione facile da usare, è importante per qualsiasi sito web. Con i CSS è possibile trasformare i menu HTML noiose in barre di bell'aspetto navigazione. Barra di navigazione Elenco di link Una barra di navigazione ha bisogno di codice HTML standard come base. Nei nostri esempi costruiremo la barra di navigazione da un elenco HTML standard. Una barra di navigazione è fondamentalmente una lista di link, in modo da utilizzare il ltulgt e gli elementi ltligt ha perfettamente senso: ltulgt ltligtlta hrefquotdefault. aspquotgtHomeltagtltligt ltligtlta hrefquotnews. aspquotgtNewsltagtltligt ltligtlta hrefquotcontact. aspquotgtContactltagtltligt ltligtlta hrefquotabout. aspquotgtAboutltagtltligt ltulgt Ora consente di rimuovere i proiettili e le margini e padding da la lista: ul list-style-type: nessuno margin: 0 padding: 0 list-style-type: nessuno - Rimuove i proiettili. Una barra di navigazione non ha bisogno della lista marcatori Set margin: 0 e padding: 0 per rimuovere le impostazioni di default del browser Il codice nell'esempio di cui sopra è il codice standard utilizzato in entrambe le barre di navigazione verticali e orizzontali. Verticale barra di navigazione Per costruire una barra di navigazione verticale, è possibile lo stile degli elementi ltagt all'interno della lista, oltre al codice di cui sopra: Li un display: larghezza del blocco: 60px display: block - Visualizzazione i link come elementi di blocco rende l'intera area Link cliccabile (non solo testo), e ci permette di specificare la larghezza (e l'imbottitura, il margine, altezza, ecc se si vuole) larghezza: 60px - elementi di blocco occupano l'intera larghezza disponibile per impostazione predefinita. Vogliamo specificare un 60 pixel di larghezza È inoltre possibile impostare la larghezza di ltulgt, e rimuovere la larghezza di ltagt, in quanto saranno occupano l'intera larghezza disponibile quando visualizzato come elementi di blocco. Questo produrrà lo stesso risultato come il nostro esempio precedente: ul list-style-type: nessuno margin: 0 padding: 0 larghezza: 60px li a display: block verticale barra di navigazione Esempi creare una barra di base di navigazione verticale, con un colore di sfondo grigio e il cambiamento il colore di sfondo dei link quando l'utente sposta il mouse su di loro: ul list-style-type: nessuno margin: 0 padding: 0 larghezza: 200px background-color: f1f1f1 li a schermo: colore del blocco: 000 padding: 8px 16px testo - decoration: nessuno Cambiare il colore del collegamento al passaggio del mouse li a: hover background-color: 555 colore: bianco ActiveCurrent navigazione link Inserire una classe di attivo al collegamento corrente per permettere all'utente di sapere quale heshe pagina su: attivo background-color: 4CAF50 colore: bianco centro links amp Aggiungi Borders Aggiungi text-align: center per ltligt o ltagt per centrare i link. Aggiungere la proprietà border di ltulgt aggiungere un bordo intorno alla barra di navigazione. Se si desidera che anche i bordi all'interno della barra di navigazione, aggiungere un border-bottom a tutti gli elementi ltligt, fatta eccezione per l'ultimo: border ul: 1px solid 555 li text-align: center border-bottom: 1px solid 555 Li: border last-child - bottom: nessuno full-altezza fissa verticale Navbar Crea una a tutta altezza, di navigazione laterale quotstickyquot: ul list-style-type: nessuno margin: 0 padding: 0 larghezza: 25 background-color: altezza f1f1f1: 100 posizione completa altezza: fissa farlo aderire, anche in caso di overflow di scorrimento: Attivazione automatica scorrimento se il sidenav ha un contenuto troppo Nota: Questo esempio potrebbe non funzionare correttamente sui dispositivi mobili. Barra di navigazione orizzontale Ci sono due modi per creare una barra di navigazione orizzontale. Usando in linea o fluttuante voci di elenco. Elenco in linea Articoli Un modo per costruire una barra di navigazione orizzontale è quello di specificare gli elementi ltligt come inline, oltre al codice quotstandardquot sopra: visualizzazione Li: visualizzazione in linea: in linea - Per impostazione predefinita, gli elementi ltligt sono elementi di blocco. Qui, togliamo il interruzioni di riga prima e dopo ogni elemento della lista, per visualizzarli su una linea di galleggiamento voci di elenco Un altro modo per creare una barra di navigazione orizzontale è di galleggiare gli elementi ltligt, e specificare un layout per i link di navigazione: un display: blocco padding: 8px background-color: dddddd float: left - uso del galleggiante di ottenere elementi di blocco per far scorrere uno accanto all'altro display: block - visualizzazione i link come elementi di blocco rende l'intera area link cliccabile (non solo testo), e ci permette di specificare imbottitura (e altezza, larghezza, margini, ecc se si vuole) padding: 8px - Dal momento che elementi di blocco occupano l'intera larghezza disponibile, non possono galleggiare accanto all'altro. Pertanto, specificare alcune imbottiture per farli sembrare buon background-color: dddddd - Aggiungere uno sfondo grigio-colore a ciascun elemento Tip: Aggiungere il background-color per ltulgt invece di ogni elemento ltagt se si desidera un colore di grande ampiezza di fondo: ul background-color: dddddd orizzontale barra di navigazione Esempi creare una barra di base di navigazione orizzontale con un colore di sfondo scuro e cambiare il colore dei link sfondo quando l'utente sposta il mouse su di loro: ul list-style-type: nessuno margin: 0 padding : 0 overflow: hidden background-color: 333 li a schermo: colore del blocco: bianco text-align: center padding: 14px 16px text-decoration: none Cambiare il colore del collegamento a 111 (nera) su hover li a: hover background-color : 111 ActiveCurrent navigazione link Inserire una classe di attivo al collegamento corrente per permettere all'utente di sapere quale heshe pagina su: attivo background-color: 4CAF50 link destro Allinea link destro-align di galleggiamento le voci di elenco a destra (float: right ): ltulgt ltligtlta hrefquothomequotgtHomeltagtltligt ltligtlta hrefquotnewsquotgtNewsltagtltligt ltligtlta hrefquotcontactquotgtContactltagtltligt LTLI stylequotfloat: rightquotgtlta classquotactivequot hrefquotaboutquotgtAboutltagtltligt ltulgt frontiera divisori Aggiungere la proprietà border-diritto di ltligt per creare i divisori di collegamento: Aggiungere un bordo grigio diritto di tutti gli elementi della lista, tranne l'ultimo elemento (last-child) Li border-right: 1px solid BBB li: last-child border-right: none fisso barra di navigazione rendono il soggiorno barra di navigazione nella parte superiore o nella parte inferiore della pagina, anche quando l'utente scorre la pagina: orizzontale barra di navigazione Esempio W3C Web risorse lth2 classoffscreengtW3C Web Resourceslth2gt ltdiv idhmenugt ltulgt 160160ltligtlta hrefw3.orgConsortiumactivitiesgtW3C Activitiesltagtltligt 160160ltligtlta hrefw3.orgTRgtW3C tecnico Reportsltagtltligt 160160ltligtlta hrefw3.orgConsortiumsiteindexgtW3C sito Indexltagtltligt 160160ltligtlta hrefw3.orgConsortiumnew-to-w3cgtNew Visitorsltagtltligt 160160ltligtlta hrefw3.orgConsortiumgtAbout W3Cltagtltligt 160160ltligtlta hrefw3.orgConsortiumjoingtJoin W3Cltagtltligt 160160ltligtlta hrefw3.orgConsortiumcontactgtContact W3Cltagtltligt ltulgt160160 ltdivgt offscreen 160160position: 160160top assoluta: -30em 160160left: -300em divhmenu 160160 margin: 0 160160 imbottitura. 3em 0 .3em 0 160160 sfondo: ddeebb 160160 Larghezza: 100 160160 text-align: center divhmenu ul 160160 list-style: none 160160 margin: 0 160160 padding: 0 divhmenu ul li 160160 margin: 0 160160 padding: 0 160160 display: inline divhmenu ul a: link 160160 margin: 0 160160 imbottitura. 3em .4em .3em .4em 160160 text-decoration: none 160160 font-weight: bold 160160 font-size: media colore 160.160: 004.415 divhmenu ul a: visited 160160 margin: 0 160160 imbottitura. 3em .4em .3em .4em 160160 text-decoration: none 160160 font-weight: bold 160160 font-size: media colore 160160: 227755 divhmenu ul a: active 160160 margin: 0 160160 imbottitura. 3em .4em .3em .4em 160160 text-decoration: none 160160 font-weight: bold 160160 font-size: media colore 160160: 227755 divhmenu ul a: hover 160160 margin: 0 160160 imbottitura. 3em .4em .3em .4em 160160 text-decoration: none 160160 font-weight: bold 160160 font-size: media colore 160160: f6f0cc 160160 background-color: 227755 Navigazione Panoramica