TDesign - TDesign, guide, risorse grafiche, tricks CSS, Sfondi per iPhone e Wallpaper. Tutte le creazioni sono in PSD. UI Set per applicazioni Web e non. Creazione e sviluppo Webdesign

In questo breve articolo vedremo un semplice menù orizzontale con i cone, sfruttando come sempre il nostro foglio di stile! Naturalmente è solo una dimostrazione, il menù può essere modificato a nostro piacimento, dimensioni, colore, fade scc…

Segue il codice che andremo ad inserire nella nostra pagina:

<ul id="css3menu1">
<li><a href="#" title="Home" style="width:115px;height:18px;line-height:18px;"><img src="icone/house1.png" alt="Home"/>Home</a></li>
<li><a href="#" title="ArtWork" style="width:158px;height:18px;line-height:18px;"><img src="icone/paintbrush.png" alt="ArtWork"/>ArtWork</a></li>
<li><a href="#" title="PS Resurce" style="width:194px;height:18px;line-height:18px;"><img src="CSS3 Menu_files/css3menu1/application_photoshop.png" alt="PS Resurce"/>PS Resurce</a></li>
<li><a href="#" title="Portfolio" style="width:160px;height:18px;line-height:18px;"><img src="icone/photos.png" alt="Portfolio"/>Portfolio</a></li>
<li><a href="#" title="Contact" style="width:146px;height:18px;line-height:18px;"><img src="icone/email.png" alt="Contact"/>Contact</a></li>
</ul>

Nel foglio di stile andremo ad inserire invece:

@charset "utf-8";
/* FATE ATTENZIONE AD INSERIRE BENE LE DIRECTORY DELLE ICONE E DELLO SFONDO
SENNO' NON APPARIRA' IL RISULTATO VOLUTO - PER INFO: info@tdesigner.it*/

<ul id="css3menu1">

ul#css3menu1,ul#css3menu1 ul{
margin:0;
list-style:none;
padding:0;
background-color:#dedede;
border-width:1px;
border-style:solid;
border-color:#5f5f5f;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
}

ul#css3menu1 ul{
display:none;
position:absolute;
left:0;
top:100%;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
padding:0 10px 10px;
background-color:#ffffff;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#d4d4d4;
}

ul#css3menu1 li:hover>*{
display:block;
}

ul#css3menu1 li:hover{
position:relative;
}

ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;
}

ul#css3menu1{
display:block;font-size:0;float:left;
}

ul#css3menu1 li{
display:block;
white-space:nowrap;
font-size:0;
float:left;
}

ul#css3menu1>li,ul#css3menu1 li{
margin:0;
}

ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;
}

ul#css3menu1 a,ul#css3menu1 a.pressed{
display:block;
vertical-align:middle;
text-align:center;
text-decoration:none;
font:bold 14px Trebuchet MS;
color:#000000;
text-shadow:#FFF 0 0 1px;
cursor:pointer;
}

ul#css3menu1 ul li{
float:none;margin:10px 0 0;
}

ul#css3menu1 ul a{
text-align:left;
padding:4px;
background-color:#ffffff;
background-image:none;
border-width:0;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font:14px Tahoma;
color:#000000;
text-decoration:none;
}

ul#css3menu1 li:hover>a{
background-color:#3eb1f8;
border-color:#C0C0C0;
border-style:solid;
font:bold 14px Trebuchet MS;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
background-image:url("icone/mainbk.png");
background-position:0 100px;
}

ul#css3menu1 img{
border:none;
vertical-align:middle;
margin-right:10px;
}

ul#css3menu1 img.over{
display:none;
}

ul#css3menu1 li:hover > a img.def{
display:none;
}

ul#css3menu1 li:hover > a img.over{
display:inline;
}

ul#css3menu1 li a.pressed img.over{
display:inline;
}

ul#css3menu1 li a.pressed img.def{
display:none;
}

ul#css3menu1 span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}

ul#css3menu1 a{
padding:10px;
background-color:#c1c1c1;
background-image:url("icone/mainbk.png");
background-repeat:repeat;
background-position:0 0;
border-width:0 0 0 1px;
border-style:solid;
border-color:#C0C0C0;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
}

ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#3eb1f8;
background-image:url("icone/mainbk.png");
background-position:0 100px
;border-style:solid;
border-color:#C0C0C0;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
}

ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
background-color:#ffffff;
background-image:none;
font:14px Tahoma;
color:#868686;
text-decoration:none;
}

ul#css3menu1 li.topfirst>a{
border-radius:0px 0 0 0px;
-moz-border-radius:0px 0 0 0px;
-webkit-border-radius:0px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
}

ul#css3menu1 li.toplast>a{
border-radius:0 0px 0px 0;
-moz-border-radius:0 0px 0px 0;
-webkit-border-radius:0;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
}

Il risultato dovrebbe essere come in questo ESEMPIO

E’ possibile, se lo si vuole, scaricare direttamente il menu: SCARICA

Ricordo che le immagini nell’esempio sono nella cartella “icone” se si vuole cambiare cartella ricordare di cambiare anche le impostazioni nel codice.

Nota:
Icone utilizzate tranne il logo photoshop: FAM FAM ICONS
Il logo Photoshop e di proprietà di Adobe Inc.

Tweet