Meniu de Navigare

Previzualizare Live: Demo

Codul meniului :

Cod:

<br>
<font size="2px">Meniu de Navigare</font>

<br><br>
<div class="meniu_navigare"><div class="widget2"><img src=" http://2img.net/i/fa/admin/icones/small_ico/portail.png" border="0" alt="" /> <strong><span style="font-size: 12px; line-height: normal">Forum</span></strong></div>
<br><div class="widget1"><a href="LINK">» Nume</a></div><div class="widget1"><a href="LINK">» Nume</a></div><div class="widget1"><a href=LINK">» Nume</a></div><div class="widget1"><a href="LINK">» Nume</a></div>


<br><div class="widget2"> <img src=" http://2img.net/i/fa/admin/icones/small_ico/html.png" border="0" alt="" /> <strong><span style="font-size: 12px; line-height: normal">» Nume</span></strong></div>
<br><div class="widget1"><a href="LINK">» Suport HTML</a></div><div class="widget1"><a href="LINK">» Nume</a></div><div class="widget1"><a href="LINK">» Nume</a></div><div class="widget1"><a href="LINK">» Nume</a></div>

<br><div class="widget2"> <img src=" http://2img.net/i/fa/admin/icones/small_ico/images_couleurs.png" border="0" alt="" /> <strong><span style="font-size: 12px; line-height: normal">» Nume</span></strong></div>
<br><div class="widget1"><a href="LINK">» Nume</a></div><div class="widget1"><a href="LINK">» Nume</a></div><div class="widget1"><a href="LINK">» Nume</a> </div><div class="widget1"><a href="/f15-cereri-imagini">» Nume</a></div><div class="widget1"><a href="LINK">» Nume</a></div></div>

<style>
.widget1:hover{
background: url(http://i46.servimg.com/u/f46/16/16/06/68/untitl32.png);
border-bottom: solid 1px #FFFFFF;
border-top-left-radius: 1px;
border-left: solid 9px #c7e2e2;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 4px;
  margin-left:4px;
width: 140px;
}




.widget1{
width: 140px;
padding: 4px;
font-size: 11px;
text-shadow: 1px 1px 1px #fff;
border-left: solid 5px #c7e2e2;
border-bottom: solid 1px #FFFFFF;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px ;
-moz-transition-duration: .1s;
    -webkit-transition-duration: .1s;
    -o-transition-duration: .1s;
}

.widget2{
text-shadow: 1px 1px 1px #fff;
border: solid 1px #CCCCCC;
-moz-box-shadow: 0px 0px 5px #CCCCCC, 0px 0px 6px #CCCCCC, 0px 0px 7px #CCCCCC;
    -webkit-box-shadow: 0px 0px 5px #CCCCCC, 0px 0px 6px #00BBFF, 0px 0px 7px #CCCCCC;
    box-shadow: 0px 0px 5px #CCCCCC, 0px 0px 6px #CCCCCC, 0px 0px 7px #CCCCCC;

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
top-left-radius: 6px;
}

.meniu_navigare{

background: url(http://i43.servimg.com/u/f43/16/73/65/08/untit166.png);
width: 200px;
}
</style>

<br>

Pentru a schimba imaginea background-ului inlocuiti :

Cod:

<style>
.widget1:hover{
background: url(http://i46.servimg.com/u/f46/16/16/06/68/untitl32.png);
border-bottom: solid 1px #FFFFFF;
border-top-left-radius: 1px;
border-left: solid 9px #c7e2e2;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 4px;
  margin-left:4px;
width: 140px;
}

La background: url cu alta imagine

***Elegantskins***

Frumos tutorial.Bravo

Bravo .frumos

foarte frumos meniul puNNcT.