Inserire un menu CSS verticale e orizzontale

Inserire un menu CSS verticale e orizzontale

Nella guida verrā spiegato come inserire nel vostro spazio web un menų CSS verticale o orizzontale di facile utilizzo, č possibile trovare un esempio dei menų in questo forum.
In menų sono composti da un div con la dichiarazione di una class che sarā usata per personalizzare il container, colori, font e quello quindi tutto ciō che riguarda l'aspetto grafico del nostro menų.

Menu CSS verticale


Di seguto possiamo trovare HTML e CSS da usare per inserire un menu verticale da usare

• HTML

Nella colonna della tabella va inserito questo HTML:

• CSS

Nel codici inserito nella colonna č presente id che identifica il nostro menų, č menutab. (id va inserito con un #davanti al nome).
Quindi inseriamo nel nostro foglio di stile (Amministrazione > Grafica > Colori e stile) questo CSS:

- #menutab: In questo id va messa la dichiarazione generali del nostro menu (Es. larghezza , grandezza e font carattere dei link), per evitare errori possiamo partire con questa dichiarazione :

Naturalmente la dichiarazione puō essere modificata. (CSS - Font)

- #menutab li: In questo id va messo la dichiarazione che identifica il nostro HTML

(Distanza dal margine del menu, per evitare errori possiamo partire con questa dichiarazione:

CODICE

#menutab li { display: inline; margin: 0; padding: 0}

Per personalizzarlo possiamo leggere le due guide CSS margin - CSS - padding. (Per eviate di creare la distanza tra i link causata dal HTML

usiamo la dichiarazione display: inline)

- #menutab ul: In questo id va messo la dichiarazione che identifica il nostro HTML, per evitare errori possiamo partire con questa dichiarazione:

CODICE

#menutab ul {margin: 0; padding: 0; }

- #menutab a:link, #menutab a:visited: In questo id possiamo personalizzare il nostro menų (colore il testo, lo sfondo dei link, il contorno, alineare il testo). Possiamo partire con questa dichiarazione:

CODICE

#menutab a:link, #menutab a:visited { display: block; text-align: left; text-decoration: none; background: #DEDCDC; color: #05181E; border: 1px solid #666}

Nella dichiarazione va inserito sempre display: block;.

- #menutab a:hover : In questo id possiamo personalizzare il nostro menų al passaggio del mouse, possiamo partire da questo:

CODICE

#menutab a:hover {background: #FFF; color: #41545F; border-color: #41545F; padding-left: 0; text-transform: uppercase}

CSS completo:

SPOILER (click to view)

CODICE

#menutab {width: 150px; font-size: 20px; font-family: arial, helvetica, sans-serif}
#menutab ul {margin: 0; padding: 0}
#menutab li {display: inline; margin: 0; padding: 0}
#menutab a:link, #menutab a:visited {display: block; text-align: left; text-decoration: none; background: #DEDCDC; color: #05181E; border: 1px solid #666}
#menutab a:hover {background: #FFF; color: #41545F; border-color: #41545F; padding-left: 0; text-transform: uppercase}

Per poter personalizzare il nostro menų possiamo leggere in questo sito w3schools le guide presenti nella voce CSS Styling.

Menu CSS orizzontale

Di seguto possiamo trovare HTML e CSS da usare per inserire un menu verticale da usare

HTML

In gestione HTML va inserito:

HTML

<div id="container">
<a href="/">Test</a> <a href="/">Test</a> <a href="/">Test</a> <a href="/">Test</a> <a href="/">Test</a> </div>
<br><br>

CSS

Nel codici inserito nella colonna č presente id che identifica il nostro menų, č container. (id va inserito con un #davanti al nome).
Quindi inseriamo nel nostro foglio di stile (Amministrazione > Grafica > Colori e stile) questo CSS:

CODICE

#container {DICHIARAZIONE}
#container a:link,#container a:visited,#container a:active {DICHIARAZIONE}
#container a:hover {DICHIARAZIONE}

#container: In questo id va messa la dichiarazione generali del nostro menu (Es. larghezza , grandezza e font carattere dei link), per fare una barra simile alla grafica del nostro forum possiamo prendere il contenuto del selettore .title. Un esempio é:
CODICE
#container {width: 84%; height: 30px; background: #DEDCDC; border: 1px solid #000000; font-weight: bold; text-align: center;}

#container a:link,#container a:visited,#container a:active: In questo id possiamo personalizzare il nostro menų (colore il testo, lo sfondo dei link, il contorno, alineare il testo). Possiamo partire con questa dichiarazione:
CODICE
#container a:link,#container a:visited,#container a:active {color: #A4090E; padding-left: 5px; padding-right: 5px; padding-top: 5px; height: 10px; padding-bottom: 5px; vertical-align: middle; font-weight: bold; font-size: 15px;}

#container a:hover : In questo id possiamo personalizzare il nostro menų al passaggio del mouse, possiamo partire da questo:

CODICE
#container a:hover {height: 20px; color: #A4090E; background-color: #DBB581; vertical-align: middle; font-weight: bold; font-size: 17px;}

Per poter personalizzare il nostro menų possiamo leggere in questo sito w3schools le guide presenti nella voce CSS Styling.