Ecco quindi il menu, che viene visualizzato nella parte superiore della finestra.
Avete già fatto parecchio lavoro per questo menu. Sicuramente vi ricorderete il bello sfumato, che è stato salvato come un'immagine di un pixel. Proprio questo viene ora utilizzato. Tuttavia, prima è necessario creare la struttura HTML corrispondente per l'area del menu. Potrebbe apparire così:
<div class="header"> <div class="header-top"> <h1>Il vostro commercialista</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Homepage</a></li> <li><a href="#">Su di noi</a></li> <li><a href="#">Come lavoriamo</a></li> <li><a href="#">Contatto</a></li> <li><a href="#">Imprint</a></li> </ul> </div> <div class="header-img"> </div> </div>
Per la progettazione dello sfondo viene incorporata l'immagine di un pixel e viene ripetuta verticalmente fino a quando l'intero elemento è riempito.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Successivamente il menu può essere formattato. In linea di principio, non ci sono particolarità da considerare. Ciò che conta davvero per questi menu sono sempre solo i seguenti aspetti:
• Nascondere i punti elenco tramite list-style-type: none;.
• Assicurarsi che le voci dell'elenco siano visualizzate affiancate.
Sto lavorando a questo punto - lo sapete già - con una sfumatura, realizzata tramite un'immagine. Nel frattempo, naturalmente, per i menu sono disponibili numerose altre opzioni. Pensate ad esempio ai framework JavaScript come jQuery. Presentare tutte queste opzioni qui naturalmente andrebbe oltre lo scopo. Tuttavia, esistono numerosi generatori online che consentono di creare menu con pochi clic. Uno di essi - senza valutare se sia il migliore del suo genere - lo trovate su http://www.cssmenubuilder.com/.
In ogni caso ho optato per la seguente variante:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
In realtà è importante solo lo stato di Hover. Quando si verifica questo evento, viene visualizzata un'altra immagine di sfondo.
Il menu destro
Il sito web non ha solo un menu in alto, ma ne ha uno anche nella parte destra della finestra.
Questo menu appartiene all'area div con classe content-right. Per la fase di sviluppo della pagina ho inserito solo contenuti di esempio lì.
<div class="content-right"> <h2>Menu principale</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul>
L'area viene inizialmente posizionata nel punto giusto e nelle dimensioni desiderate.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Proseguiamo con la definizione effettiva del menu. Questa volta le voci sono però una sotto l'altra. Dovrete solo fare attenzione a nascondere i punti elenco. Il resto della progettazione del menu rimane a vostra discrezione.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}Ora in fase di visualizzazione nel browser dovreste ottenere l'immagine seguente:
Il menu inferiore
Nella parte inferiore del sito web ci sarà un altro menu. Anche su PSD-Tutorials.de viene utilizzato un menu del genere per fornire link a informazioni generali.
Sul nostro sito web c'è inoltre un avviso di copyright. Entrambe le cose sono in realtà piuttosto tipiche dei siti web. Prima di tutto di nuovo la struttura HTML.
<div class="bottom"> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Chi siamo</a></li> <li><a href="#">Novità</a></li> <li><a href="#">Pannello di controllo</a></li> <li><a href="#">Contatti</a></li> <li><a href="#">Colophon</a></li> <li><a href="#">Mappa del sito</a></li> </ul> <p>© Copyright 2014 by PSD-Tutorials.de</p> </div>
Si tratta di un semplice elenco ul. Ogni voce dell'elenco contiene una voce di menu. Sotto l'elenco ul c'è un elemento p in cui si trova l'avviso di copyright. Quello che manca ora è naturalmente di nuovo la sintassi CSS.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Come progettate la parte inferiore rimane naturalmente a voi. Io uso di nuovo un gradiente di colore. Ma potreste ad esempio usare semplicemente un colore di sfondo o addirittura utilizzare la sintassi CSS3. Tuttavia, nel caso della mia variante grafica è decisivo che la ripetizione sia impedita da background-repeat: no-repeat;.
Date prima un'occhiata al risultato:
Ciò che salta all'occhio sono le linee bianche che vengono visualizzate accanto alle singole voci di menu. Queste sono definite tramite diverse istruzioni border-left, il che significa fondamentalmente che le istruzioni si riferiscono a ciascun bordo sinistro dell'elemento.
In totale, la sintassi per il menu inferiore appare così:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
C'è una particolarità rispetto al menu superiore qui. Infatti, in caso di hover non viene caricata un'altra grafica. Tuttavia, per far capire ai visitatori che stanno passando sopra un link con il puntatore del mouse, i singoli link vengono sottolineati quando si verifica l'evento hover.
Alla fine di questo tutorial sono stati completati i passaggi fondamentali per il sito web. Ciò che manca ora è abbellire la pagina. Per saperne di più nei prossimi tutorial.
