Prima Pagina > Creazione Siti Web > CSS - fogli di stile > Css applicati alle barre di navigazione

News
Pubblicità

Barra di Navigazione in html e css

Costruisci la tua barra di navigazione usando i css!

Scarica il file navbar.css e collegalo alle tue pagine con questa riga di codice:

<head>
<title>Titolo Pagina</title>
<link rel="stylesheet" type="text/css" media="all" href="/navbar.css" />
</head>


Puoi modificare il CSS a tuo piacimento, nessun copyright vieta la distrubuzione o la modifica.

Creazione della Nav Bar

Prendiamo la nostra barra di navigazione e assegnamo la classe navbar: definiremo lo stile più avanti all'interno del CSS:

News | Servizi | Siti Web | Usability | Download

tradotto in HTML:

<div class="navbar"> News | Servizi | Creare Siti Web | Usability | Download</div>

Definizione Proprieta' CSS .navbar

Apriamo il nostro foglio di stile e creiamo una nuova classe: .navbar

.navbar{
font-weight: normal;
font-size: 10px;
color: #b10000;
font-family: Verdana, Arial, sans-serif;
background-color: #9cc0ee;
padding: 1px;
width: 80%;
border: #000000;
border-top-width: 1px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 2px;
border-style: solid;
}

l'importante è separare ogni voce con il punto e virgola

Risultato applicato alla nostra Barra di Navigazione:
<div class="navbar">News | Servizi | Siti Web | Usability | Download</div>

La differenza con la versione no CSS è evidente!!

Applicare un nuovo stile ai collegamenti

La nostra navigation bar e' quasi finita.
Abbiamo applicato uno stile e ora andiamo a configurare i link

Versione originale (link blu standard):

I link sono impostati nel colore standard blu. Definiremo tramite css una nuova classe, a.navlink, che ci permetterà di personalizzare le proprietà dei link presenti nella navigation bar (senza modificare le impostazioni degli altri link presenti nel sito)

Applichiamo class="navlink" al nostro menù

<div class="navbar"><a href="/news/" class="navlink">News</a> | <a href="/servizi/" class="navlink">Servizi</a> ......</div>

 

Abbiamo applicato il nuovo stile a.navlink a tutti i collegamenti presenti nella Navigation Bar tramite il codice <a class="navlink" href="....">

Ecco cosa dovrai inserire nel tuo CSS

Considerazioni Finali - Vantaggi

Barra di Navigazione (No CSS)

News | Servizi | Siti Web | Usability | Download

Barra di Navigazione (CSS)

Vantaggi:

- la definizione dello stile occupa meno di 1 KB

- cambiando le impostazioni del CSS si personalizza la Navigation Bar di tutte le pagine del sito

- non bisogna conoscere programmi di grafica per creare una NavBar accattivante (basta sporcarsi un po' con i colori)

- facile da personalizzare: una volta aperto il CSS con NotePad, è molto facile personalizzare le varie impostazioni