BAYRAĞIM


Ey mavi göklerin beyaz ve kızıl süsü

Kızkardeşimin gelinliği, şehidimin son örtüsü.

Işık ışık, dalga dalga bayrağım,

Senin destanını okudum, senin destanını yazacağım.



Sana benim gözümle bakmayanın

Mezarını kazacağım.

Seni selamlamadan uçan kuşun

Yuvasını bozacağım.



Dalgalandığın yerde ne korku ne keder...

Gölgende bana da, bana da yer ver!

Sabah olmasın, günler doğmasın ne çıkar!

Yurda, ay-yıldızının ışığı yeter.



Savaş bizi karlı dağlara götürdüğü gün

Kızıllığında ısındık;

Dağlardan çöllere düşürdüğü gün

Gölgene sığındık.



Ey şimdi süzgün, rüzgarlarda dalgalı;

Barışın güvercini, savaşın kartalı...

Yüksek yerlerde açan çiçeğim;

Senin altında doğdum,

Senin dibinde öleceğim.


Tarihim, şerefim, şiirim, herşeyim;

Yer yüzünde yer beğen:

Nereye dikilmek istersen

Söyle seni oraya dikeyim!

 


   CSS ve jQuery kullanılarak nasıl açılır menü yapılacağını anlatmaya çalışacağım. Göreceksiniz ki bu kısacık işlem için hiç internetten kod araştırması yapmanıza dahi gerek yok. Mantığı çok basit. Burada anlatacağım mantık kullanılarak istediğiniz şekilde hoş açılır menüler oluşturabilirsiniz.
<ul id="nav">
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımızda</a>
        <ul>
            <li><a href="#">Biz Kimiz</a></li>
            <li><a href="#">Neden Biz</a></li>
            <li><a href="#">Daha Fazlası</a>
                <ul>
                    <li><a href="#">Daha Fazlası 1</a></li>
                    <li><a href="#">Daha Fazlası 2</a></li>
                    <li><a href="#">Daha Fazlası 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">İşelem Sonrası Hizmet</a></li>
    <li><a href="#">Ürün Kategorisi</a>
        <ul>
            <li><a href="#">Beyaz Eşya</a></li>
            <li><a href="#">Bilgisayar</a>
                <ul>
                    <li><a href="#">Tablet</a></li>
                    <li><a href="#">Diz Üstü</a></li>
                    <li><a href="#">Masa Üstü</a></li>
                </ul>
            </li>
            <li><a href="#">Cep Telefonları</a></li>
        </ul>
    </li>
    <li><a href="#">İletişim</a></li>
</ul>
Yukarıda standart liste çeklinde yapımızı oluşturuyoruz. Oluşturduğumuz yapı içindeki
tagının içine bir ul yapısı daha oluşturuyoruz. Yukarıdaki yapı HTML için. İlk sayfa yüklendiğinde direk görünecek. Ancak ilk içindeki yapısı ilk etapta görünmeyecek. Ürünlerin içinde bulunduğu tagı üzerine geldiğimizde jquery ile basit bir efekt yapıp göstericez. Hemen Css kodunu verelim.
</pre>
body {
 font-family: helvetica, arial, sans-serif;
 font-size:12px;
 background: #e3e3e3;
 text-align: center;
}
 
/* MENU */
 
#nav {
 background: #e5e5e5;
 float: left;
 margin: 0; padding: 0;
 border: 1px solid white;
 border-bottom: none;
}
 
#nav li a, #nav li {
 float: left;
}
 
#nav li {
 list-style: none;
 position: relative;
}
 
#nav li a {
 padding: 1em 2em;
 text-decoration: none;
 color: white;
 background: #6F6C75;
 background: -moz-linear-gradient(top, black, #919191 1px, #292929 25px);
 background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #919191), to(#6F6C75));
 border-right: 1px solid #919191;
 border-left: 1px solid #6F6C75;
 border-bottom: 1px solid #232323;
 border-top: 1px solid #545454;
}
 
#nav li a:hover {
 background: #88A2EA;
 background: -moz-linear-gradient(top, #78A7DF, #88A2EA);
 background: -webkit-gradient(linear, left top, left bottom, from(#78A7DF), to(#88A2EA));
}
/* Submenu */
 
.hasChildren {
 position: absolute;
 width: 5px; height: 5px;
 background: black;
 right : 0;
 bottom: 0;
}
 
#nav li ul {
 display: none;
 position: absolute;
 left: 0;
 top: 100%;
 padding: 0; margin: 0;
}
 
#nav li:hover > ul {
 display: block;
}
 
#nav li ul li, #nav li ul li a {
 float: none;
}
 
#nav li ul li {
 _display: inline; /* for IE6 */
}
 
#nav li ul li a {
 width: 150px;
 display: block;
}
 
/* SUBSUB Menu */
 
#nav li ul li ul {
 display: none;
}
 
#nav li ul li:hover ul {
 left: 100%;
 top: 0;
}
#nav li ul
<pre>
Yukarıdaki CSS çok ince ayarlı bişey değil. Sadece temel yapı oluşturuldu. Siz kullanırken Background rengi position ayarlamalarını yapabilirsiniz. Takıldığınız bir husus olursa konu altından yazarsanız yardımcı olurum. Son olarak Ürünler başlığı üstüne gelince alt menünün animasyon ile açılmasını sağlayacak jQuery kodunu yazalım ve bitirelim.
var site = function() {
    this.navLi = $('#nav li').children('ul').hide().end();
    this.init();
};
 
site.prototype = {
 
    init : function() {
        this.setMenu();
    },
 
    // Enables the slidedown menu, and adds support for IE6
 
    setMenu : function() {
 
    $.each(this.navLi, function() {
        if ( $(this).children('ul')[0] ) {
            $(this)
                .append('<span />')
                .children('span')
                    .addClass('hasChildren')
        }
    });
 
        this.navLi.hover(function() {
            // mouseover
            $(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutBounce');
        }, function() {
            // mouseout
            $(this).find('> ul').stop(true, true).hide();
        });
 
    }
 
}
 
new site();
Şimdi sonuç olarak yukarıda ki anlattığım konuyu toparlarsak böyle bir sonuç karşımıza çıkıyor.




Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin
Not: Gelen Maili Aktif Etmeyi Unutmayınız!
 
Top