Meniu vertical animat pentru blog

• Home


• Blog


• About


• Contact

Intr-un post anterior prezentam un model de meniu vertical foarte usor de instalar pe un blog sau site. Azi va prezint un alt meniu interesant in felul sau, este un meniu animat,care la trecerea mausului peste el fiecare parte din el se deplaseaza.Il poti folosi in partea stanga sau dreapta a blogului tau.

Pentru inceput mergem la Aspect ---> Editare HTML/Javascript si exact inainte de linia ]]></b:skin> adaugam urmatorul cod:

Stil CSS

/* LIST #8 */
#list8 { }
#list8 ul { list-style:none; }

#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:160px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;

text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;

transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

Salveaza modificarile si acum copieaza codul html de mai jos si il instalezi in zona in care vrei sa-ti apara meniul pe blog (dreapta sau stanga)

cod HTML

<div id="list8">
<ul>
<li><a href="url">Home</a></li>
<li><a href="url">Blog</a></li>
<li><a href="url">About</a></li>
<li><a href="url">Contact</a></li>
</ul>
</div>

Vei inlocui "url" cu url-ul care doresti sa apara si deasemenea descrierea.
Salveaza modificarea si asta este tot ai un meniu animat instalat.