- Sim Card che tutelino i minori
- Carte di Credito e asterischi
- Acquista un Dominio
- Corso di Posizionamento nei Motori di Ricerca
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:
<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