CSS ile kırmızı beyaz renkte 3 boyutlu görünüme sahip şık bir menü yapımını göreceğiz. örneğimiz isterseniz deneyebilir istersenizde dosyayı indirip deneyebilirsiniz.
İçerik
göster
CSS ile kırmızı beyaz renkte 3 boyutlu görünüme sahip şık bir menü yapımını göreceğiz. örneğimiz isterseniz deneyebilir istersenizde dosyayı indirip deneyebilirsiniz.
Bu örnek sonucunda ortaya çıkacak görüntü bu şekildedir.
>> Style örnek kodları
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <style type="text/css">#menusablon{ position:relative; display:block; height:39px; font-size:11px; font-weight:bold; background:transparent url(images/bgOFF.gif) repeat-x top left; font-family:Arial,Verdana,Helvitica,sans-serif; border-top:4px solid #B30000; } #menusablon ul{ margin:0; padding:0; list-style-type:none; width:auto; } #menusablon ul li{ display:block; float:left; margin:0; } #menusablon ul li a{ display:block; float:left; color:#666; text-decoration:none; padding:11px 20px 0 20px; height:23px; background:transparent url(images/bgDIVIDER.gif) no-repeat top right; } #menusablon ul li a:hover,#menusablon ul li a.current{ color:#B30000; background:#fff url(images/bgON.gif) no-repeat top right; } </style> |
>> HTML Kodları
1 2 3 4 5 6 7 8 9 | <div id="menusablon"> <ul> <li><a href="" title="">Ana Sayfa</a></li> <li><a href="" title="">Hakkımızda</a></li> <li><a class="current" href="" title="">Servisler</a></li> <li><a href="" title="">Çalışmalarım</a></li> <li><a href="" title="">İletişim</a></li> </ul> </div> |
>> Tüm kodlar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <htlm> <head> <style type="text/css"> #menusablon{ position:relative; display:block; height:39px; font-size:11px; font-weight:bold; background:transparent url(images/bgOFF.gif) repeat-x top left; font-family:Arial,Verdana,Helvitica,sans-serif; border-top:4px solid #B30000; } #menusablon ul{ margin:0; padding:0; list-style-type:none; width:auto; } #menusablon ul li{ display:block; float:left; margin:0; } #menusablon ul li a{ display:block; float:left; color:#666; text-decoration:none; padding:11px 20px 0 20px; height:23px; background:transparent url(images/bgDIVIDER.gif) no-repeat top right; } #menusablon ul li a:hover,#menusablon ul li a.current{ color:#B30000; background:#fff url(images/bgON.gif) no-repeat top right; } </style> </head> <body> <div id="menusablon"> <ul> <li><a href="" title="">Ana Sayfa</a></li> <li><a href="" title="">Hakkımızda</a></li> <li><a href="" title="" class="current">Servisler</a></li> <li><a href="" title="">Çalışmalarım</a></li> <li><a href="" title="">İletişim</a></li> </ul> </div> </body> </html> |
