Ana içeriğe atla

JQuery Kullanarak Hareketli ve Sik Bir Menu Tasarlamak

CSS ve jQuery ile Hareketli Menü Örnegi
Bu makalede jquery kullanarak basit ve sik bir hareketli menü örnegi tasarlamaya çalisacagiz. Öncelikle menümüzde bulunacak linkleri html olarak tasarlayalim:
<div style="width: 895px">
    <ul id="topnav">
        <li><a href="#">Anasayfa </a></li>
        <li><a href="#">Hizmetler </a></li>
        <li><a href="#">Portföy </a></li>
        <li><a href="#">Blog </a></li>
        <li><a href="#">Hakkinda</a></li>
        <li><a href="#">Iletisim </a></li>
    </ul>
</div>
Ikinci olarak tasarimimiza bir css ekleyerek menümüzün seklini degistiriyoruz.
Css kodu asagida. Bu kodu kendi istedigimiz gibi degistirebiliriz.
<style type="text/css">
    ul#topnav
    {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
        font-size: 1.1em;
    }
    ul#topnav li
    {
        margin: 0;
        padding: 0;
        overflow: hidden;
        float: left;
        height: 40px;
    }
    ul#topnav a, ul#topnav span
    {
        padding: 10px 20px;
        float: left;
        text-decoration: none;
        color: #fff;
        background: url( 'http://www.yazilimmutfagi.com/demo/demo1/images/a.jpg' ) repeat-x;
        text-transform: uppercase;
        clear: both;
        width: 100%;
        height: 20px;
        line-height: 20px;
    }
    ul#topnav span
    {
        display: none;
    }
    ul#topnav a
    {
        background-position: left bottom;
        background: url(  'http://www.yazilimmutfagi.com/demo/demo1/images/b.jpg' ) repeat-x;
        color: #000066;
    }
    ul#topnav span
    {
        background-position: left top;
    }
</style>

 Simdi sirada jquery’i eklemek var. Jquery dosyasini buradan indirebilirsiniz. Jquery dosyamiza eklemek için asagidaki scripti sayfamiza ekleyelim.
<script type="text/javascript"src="http://www.yazilimmutfagi.com/demo/demo1/jquery-1.3.2.min.js">
</script>
Simdide asil fonksiyonu yapacak ve jquery’i kullanan javascript kodumuzu yazalim.
<script type="text/javascript">
    $(document).ready(function() {

        $("#topnav li").prepend("<span></span>"); 

        $("#topnav li").each(function() {
            var linkText = $(this).find("a").html();
            $(this).find("span").show().html(linkText); 
        });

        $("#topnav li").hover(function() {    
            $(this).find("span").stop().animate({
                marginTop: "-40" 
            }, 250);
        }, function() { 
            $(this).find("span").stop().animate({
                marginTop: "0" 
            }, 250);
        });

    });
</script>
Hepsi bu kadar. Çok basit bir sekilde animasyonlu bir menü olusturduk.
Olusan ekranimiz:Yaptigimiz örnegin demosunu buradan görebilirsiniz.

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Linux En Az Sistem Gereksinimi İsteyen Dağıtımları Değerlendirilmesi

Linux İşletim Sisteminin Dağıtımlarının En az sistem gereksinimi isteyen sürümleri, değerlendirilmesi aşağıdadır, Değerlendirilen dağıtımlar şunlardır: Ubuntu Xubuntu Lubuntu Damn Small Linux Linux Mint Fedora Opensuse Debian Rat Hat Suse Linux Suse Linux Sistem Gereksinimleri: Pentium 1-4 ya da Xeon; AMD Duron, Athlon (XP, MP ya da 64), Sempron ya da Opteron 256MB RAM 500MB boş disk alanı 800x600 yada üstü resolution Rat Hat Memory Gerekli: 4 GB of memory Önerilen: 8 GB of memory CPU Gerekli: Intel Core processor, 2.4GHz, 512K cache or equivalent Önerilen: Intel multi-core processor, 2.4GHz dual processor, 512K cache or equivalent Storage 5 GB alan temel kurulum için. 40 GB alan Channel başına. 10 GB alan Cache dizini için(/var/cache/rhn) Disk yapılandırması olarak Raid 5 tavsiye edilir. Database İlk kurulum için 12 GB alan önerilir. Client ve channel hesaplamaları ise, 250 KB alan client system başına, 500 KB alan çhannel başına, ayrıca 230 KB channel da...
1 yorum
Devamı

Java Grafik Kütüphanesini Kullanarak Kare ve Daire Çizmek

Öncelikle uygulamamizin nasil olacagina bir göz atalim: "kare ve daire çizimi" basligiyla, 400-500 ebatinda, ekranimizin 300-100 koordinatlarinda açilan; altinda bize lazim olan tuslarin yesil arka plana yerlestirildigi bir pencere. this .setTitle( "kare ve daire çizimi" ); this .setSize(400,500); this .setLocation(300, 100); Bunlara ilaveten daha bir çok ayar yapabilirdik. Mesela azami pence büyüklügünü-küçüklügünü belirleyebilirdik: this.setMaximumSize(maximumSize); Veya rengini mavi yapabilirdik: this.setBackground(Color.BLUE);       ve daha birçok sey… Tuslarimizi su sekilde olusturuyoruz; Button  ciz =  new   Button ( "çiz" ); Button  sil =  new   Button ( "sil" ); Button  buyut =  new   Button ( "+" ); Button  kucult =  new   Button ( "-" ); Simdi bunlarin hareketlerini (tiklaninca ne yapacaklarini) denetleyecek olan merciye, yani ActionListener’e bildirm...
Yorum Gönder
Devamı

( C#) Ders 4 - Diziler, Çok Boyutlu Diziler, Düzenli ve Düzensiz Çok Boyutlu Diziler Nasil Kullanilir. foreach Döngüsünün Kullanimi.

C# da Diziler Diziler için ayni tipteki verilerin tutuldugu bir koleksiyon diyebiliriz. Örnegin integer verinin bir yigin seklinde tutulmasi için dizileri kullaniriz. C# da diziler referans tipinde degiskenlerdendir. C# da tanimlanan tüm diziler System.Array sinifindan türemis bir nesnedir. C# da diziler asagidaki gibi tanimlanir. ? 1 <veri tipi>[] <degisken ismi> = new <veri tipi>[<dizinin boyutu>]; 10 adet integer veri tutan bir dizinin tanim ise ? 1 int [] integerDizi = new int [10]; Bir dizinin boyutlari sabittir ve kullanilmadan önce belirlenmelidir. Dizi boyutunu belirlemek için baska bir degiskende kullanabilirsiniz. ? 1 2 int boyut = 10; int [] integerDizi = new int [boyut]; Diziyi tanimlama ve baslangiç degerlerini atama islemini ayri satirlardada yapabilirsiniz. ? 1 2 int [] integerDizi; integerDizi = new int [10]; Ayrica dizileri tanimlarken, dizi içine atmak istedigin...
Yorum Gönder
Devamı