Yatay Menu

[next155]

Resim:

Kod: Tümünü Seç Tümünü Kopyala

<!-- KAYNAK:www.Cirtlak-Site.Tr.Gg--><style type="text/css">#menu {font:14px arial, verdana, sans-serif;-moz-box-shadow:0px 2px 5px  2px #999; -webkit-box-shadow:  0px 2px 5px  2px #999;} /* Burada menümüze bir miktar gölge veriyoruz */

  

#menu ul{background:#fff url(http://img2.webme.com/(** ! Küfür Etmek Yasaktır - Oto Filtre ! **)/c/cirtlak-site/menubg.gif) repeat-x;margin:0;padding:0;list-style:none;border:1px solid #c0c0c0;padding:10px 0px 10px 0px;}  

    

#menu li{margin:0;display:inline;float:left;padding:0px;}  

    

#menu ul li a {padding:10px;color:#444;text-decoration:none;} /* Menü bağlantılarımızı burada tanımlıyoruz */

    

#menu ul li a:hover { /* Bağlantılarımızın hover durumundaki tanımlamalarını yapıyoruz */

padding:10px;  

background:#6bbef0 url(http://img2.webme.com/(** ! Küfür Etmek Yasaktır - Oto Filtre ! **)/c/cirtlak-site/menu2.gif) repeat-x;  

color:#fff;  

text-decoration:none;  

    

-moz-box-shadow:0px 2px 5px  2px #2e83ff;       /* Bu iki satırda gölge tanımlamaları yapılıyor. */

-webkit-box-shadow:  0px 2px 5px  2px #2e83ff;  

    

-moz-border-radius: 0px 0px 4px 4px;            /* Bu iki satırda ise yuvarlak köşeler için tanımlamalar yapılıyor */

-webkit-border-radius: 0px 0px 4px 4px;  

}
</style> <script>  

     // menü bağlantılarımız için küçük bir animasyon oluşturuyoruz  
    

     $(document).ready(function() {  

             $('#menu a').hover(function() { // fare üzerine gelince yapılacaklar  

                 $(this).animate({ paddingBottom: '15px', paddingTop: '10px'  },300);  

    

             }, function() { // fare gidince yapılacaklar  

                 $(this).animate({ paddingBottom: '10px', paddingTop: '10px' }, 300);  

             });  

         });  

    

     </script>
<div id="menu">  

<ul>  

<li><a href="#">Anasayfa</a></li>  

<li><a href="#">Photoshop</a></li>  


<li><a href="#">JAVA KODLARI</a></li>  

<li><a href="#">HTML KODLARI</a></li>  

<li><a href="#">Cirtlak-site.tr.gg</a></li>  

<br style="clear:both" />  

</ul>  

</div>
<!-- KAYNAK:www.Cirtlak-Site.Tr.Gg-->

Demo: http://theforum.10tl.net/

ALINTIDIR..

[next155]

Güncel..