11.12.2011, Saat: 18:17
CSS Dikey Menü Harika..
Mauseover'li..
Global.css'ye eklenecek kodlar ;
Header'e Eklenecek Kodlar ;
Resmi İmages klasörünün içine atın ! (Menunun farklı renkte olmasını istiyorsanız bu resmin rengini değişmelisiniz ama resmin görünümü bu şekilde olmalı )
Görüntü ;
"#" Yerine Linkinizi Yazmayı Unutmayınız !
Kolay gelsin..
Yapamayan arkadaşlar konu altından yardım isteyebilir gerçi çok basit ama..
Mauseover'li..
Global.css'ye eklenecek kodlar ;
Kod:
.arrowgreen{ width: 180px; /*width of menu*/ border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px;}
.arrowgreen ul{ list-style-type: none; margin: 0; padding: 0;} .arrowgreen li a{ font: bold 12px Verdana, Arial, Helvetica, sans-serif; display: block; background: transparent url(images/arrowblue.gif) 100% 0; height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/ padding: 4px 0 4px 10px; line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/ text-decoration: none;} .arrowgreen li a:link, .arrowgreen li a:visited { color: #5E7830;}
.arrowgreen li a:hover{ color: #26370A; background-position: 100% -32px;}
.arrowgreen li a.selected{ color: #26370A; background-position: 100% -64px;}
Header'e Eklenecek Kodlar ;
Kod:
<div class="arrowgreen"> <ul> <li><a href="#" title="Anasayfa">Anasayfa</a></li> <li><a href="#" class="selected" title="Katagori 1">Katagori 1</a></li> <li><a href="#" title="Katagori 2">Katagori 2</a></li> <li><a href="#" title="Katagori 3">Katagori 3</a></li> <li><a href="#" title="Katagori 4">Katagori 4</a></li> <li><a href="#" title="Katagori 5">Katagori 5</a></li> </ul></div>
Resmi İmages klasörünün içine atın ! (Menunun farklı renkte olmasını istiyorsanız bu resmin rengini değişmelisiniz ama resmin görünümü bu şekilde olmalı )
Görüntü ;
"#" Yerine Linkinizi Yazmayı Unutmayınız !
Kolay gelsin..
Yapamayan arkadaşlar konu altından yardım isteyebilir gerçi çok basit ama..