13 Mayıs 2013 Pazartesi

Dönen Menü Dersi

Herkese günaydınn...
Şimdi size dönen menü dersi vereceğim. Üç seçenek olacak. İstediğinizi seçip ayrıca rengini de istediğiniz gibi yapabilirsiniz... :) 
Uyguladığınız da böyle görünecek ve üzerine geldiğinizde butonlar dönecek:


 
Şimdi gelelim yapmaya...
İlk önce ]]></b:skin> kodunu bulun ve üzerine aşağıdakilerden seçtiğiniz birini ekleyin , kaydedin.

Gül:
.menugirarosa {width:auto; float:left}
.menugirarosa a {width:46px; font-family:handy; font-size:8px; color:#ffffff; text-decoration:none; background-color:#fdcddc; margin-top:5px;box-shadow: inset 0 0 30px #f08cb9, 0 0 2px #dd6a9d; text-align:center; padding:5px; -webkit-transition-duration: 1s; float:left; margin-left:3px;}
.menugirarosa a:hover {-webkit-transform: rotateX(-360deg);}

Mavi:

.menugiraazul {width:auto; float:left}
.menugiraazul a {width:46px; font-family:handy; font-size:8px; color:#ffffff; text-decoration:none; background-color:#cde8fd; margin-top:5px;box-shadow: inset 0 0 30px #9ecdf1, 0 0 2px #7cb6e3; text-align:center; padding:5px; -webkit-transition-duration: 1s; float:left; margin-left:3px;}
.menugiraazul a:hover {-webkit-transform: rotateX(-360deg);}
Sarı:

.menugira {width:auto; float:left}
.menugira a {width:46px; font-family:handy; font-size:8px; color:#ffffff; text-decoration:none; background-color:#fff9b1;box-shadow: inset 0 0 30px #d4cd82, 0 0 2px #cbc263; text-align:center; padding:5px; -webkit-transition-duration: 1s; float:left; margin-left:3px;}
.menugira a:hover {-webkit-transform: rotateX(-360deg);} 

Daha sonra HTML/Javascript kısmına gelerek yukarıdakilerden hangisini seçtiyseniz aşağıdaki kodlardan onu ekleyin. (Yani sarıyı seçmişseniz sarıyı ekleyin.)

Gül:

<div class="menugirarosa">
<a href="LINK">İsim</a>
<a href="LINK">İsim</a>
<a href="LINK">İsim</a>
<a href="LINK">İsim</a>
</div>
Mavi:
<div class="menugiraazul">
<a href="LINK">İsim</a>
<a href="LINK">İsim</a>
<a href="LINK">İsim</a>
<a href="LINK">İsim</a>
</div>
Sarı:
 <div class="menugira">
<a href="LINK">İsim</a>
<a href="LINK">İsim</a>
<a href="LINK">İsim</a>
<a href="LINK">İsim</a>
</div>




Umarım işinize yaramıştır. :)


2 yorum:

Rainbow