Klavye Kırıntıları
Posts tagged menu
Css ile Açılır menü hazırlayalım
Jun 9th
En basit ve sorunsuz şekli ile açılır bir menü hazırlıyacağız. Sadece CSS ve HTML ile oluşturacağımız bu menünün en güzel tarafı tüm tarayıcılarda sorunsuz bir şekilde çalışacak olması. Hemde bunları yaparken hiç javascript kullanmayacağız 
. Bir ay kadar önce internette bir örneğine rastlamıştım. Şirket içi Proje için basit bir menüye ihtiyacım olunca bu yöntem geldi aklıma.
Öncelikle menümüzün HTML kısmını hazırlayalım.
Menümüzde önemli nokta, iç içe geçmiş
- etikleri. Önce yatay bir menü hazırlıyoruz.
<ul id="menu"> <li><a href="#">Anasayfa</a></li> <li> <a href="#">Madde 1</a></li> <li> <a href="#">Madde 2</a></li> </ul>
Anasayfa’nın altında herhangi bir link olmayacağı için Madde 1 ile açılır menümüzü hazırlamaya başlıyoruz.
<li> etiketi altına bir tane
<ul> etiketi açıyoruz. Bu etiket içerisine açılacak menüyü yerleştireceğiz. Şimdi Madde 1′in altında açılacak olan menümüzün kodlarını yazalım.
<li> <a href="#">Madde 1</a> <ul> <li><a href="#">Madde 1-1</a></li> <li><a href="#">Madde 1-2</a></li> </ul> </li>
Peki bu menü nasıl açılacak? Bu açılma ve tekrar kapanma işlemlerini CSS ile yapacağız. ID’si “menu” olan ul etikenine ait li etiketlerinin içerisinde yer alan ul etiketlerinin varsayılan(default) display değerini “none” olarak belirliyoruz. Tek cümlede anlatınca biraz karışık olduğunu biliyorum o yüzden bir çizim ile bunu anlatarak pekiştirelim.
Bu grafiğe ait olan CSS kodlarını yazalım. Yukarıdada belirttiğim gibi <li> içindeki etiketinin değerini atayacağız.
ul#menu li ul{
display:none;
border:solid 1px #ccd6e5;
padding:0px;
margin-left:-10px;
padding-bottom:5px;
}
Yukarıda stil olarak vermiş olduğumuz kodları geçersek ilk sırada yer alan “display:none;” koldarı bizim işimizi gören kısım. Şimdi en işlevsel kısıma geldik. Bu alt menümüz ne zaman açılacak. Genel olarak “<a” etiketlerinde kullanılan “hover” özelliğini kullanacağız. Yani “li:hover” da altındaki “ul” etiketinin display özelliğini “block” yapacaz.
Şimdi CSS kodlarını yazalım :
ul#menu li:hover ul{
display:block;
position:absolute;
width:150px;
background:#fff;
}
Açılan-Kapanan Menü
Apr 7th
Dün itibariyle ilk .Net projeme başladım. Biraz geniş bir proje, Sql sorgularından 1 tanesi 3 kb ve sanırım 20 taneye yakın yazarız. Projede frame ve açılan menülere ihtiyacımız vardı. del.icio.us‘ umda tüm divleri kapat diye bir dil olduğu geldi aklıma. Bu arada o kodda bildirgec.org‘ da yer alıyordu, buraya tıklayarak koda ulaşbilirsiniz.
Neyse kodumuza gelelim. Kodumuz yazılış amacı olarak tüm divleri kapatmaya yönelik ve aşağıdaki gibi orjinali ;
function divkapat(islem) {
var tum_divler = document.getElementsByTagName(’div’); //divleri tanımladık
var tum_divler_adet = tum_divler.length;//kaç adet div var ona bakıyoruz
var i; //değişkenimizi tanımladık
for(i=0; i&amp;amp;amp;lt; tum_divler_adet; i++) {
tum_divler[i].style.display = islem
} //bir for döngüsü ile divlerimizin style.display özelliğini divkapat fonksiyonunda gönderdiğim parametre ile değiştirdik.
}
< a href=# onClick=divkapat(’none’); >açkapa< /a>
< a href=# onClick=divkapat(”); >açkapa< /a>
Bu haliyle bir işime yaramıyor .Neden derseniz ; son zamanlarda Tablosuz tasarıma takmış biri olarak, tüm divlerimin kapanması demek sayfanın bembeyaz bir hal alması demektirki bunu hiç istemem. Menü başlıklarını div, açılacak kısımları span olarak tanımladım. Javascript kodumuzuda şu şekilde düzenledim ;
function divkapat(islem,oge,ogeislem) //yukarıdaki koddan farklı ama açıklamasını aşağıda yapacağım
{
var tum_divler = document.getElementsByTagName(’span’);
var tum_divler_adet = tum_divler.length; var i;
for(i=0; i&amp;amp;amp;lt; tum_divler_adet; i++) {
tum_divler[i].style.display = islem
}
document.getElementById(oge).style.display = ogeislem ;
}
İlk kodumuzda fonksiyonumuz tek parametre ile çağrılırken ben bu sayıyı 3 ‘e çıkardım. Sebebine gelmeden önce 1 adet menü örneğinin kodlarınıda yazalım
<div id="1″ class="ac" onclick="divkapat('none','1a','');">bu 1</div>
<span id="1a" class="acilan" style="display: none">Aa 1a alt menu</span>
<div id="2″ class="ac" onclick="divkapat('none','2b','');">bu 2</div>
<span id="2b" class="acilan" style="display: none">Aa 2b alt menu</span>
<div id="3″ class="ac" onclick="divkapat('none','3c','');">bu 3</div>
<span id="3c" class="acilan" style="display: none">Aa buda 3c alt menu </span>
3 parametreli fonksiyon tetikleyicimiz şu satırlarda = onClick=”divkapat(’none’,’1a’,”)”
Neden 3 parametreli,
- 1. parametre tüm spanları kapatıyor.
- 2. parametre işlem yapılaacak olan span Id’sini belirliyor
- 3. parametre, 2. parametrede belirtilen span’ın display değerini alıyor
Sanırım 3. parametrenin boş olduğuna dikkat etmişsinizdir. Başlangıç değer olarak “display:none” alıyorlar, görünür hale getirmek için ” kullanıyoruz. Peki boş göndereceksek neden 3. parametreyi yolluyoruz. İşimizi tam yapmak için açtığımız menülere birerde kapatma butonu bırakırız diye düşünerek yaptım 
Kapatma butonun linkide şöyle olacak onClick=”divkapat(’none’,’1a’,’none’)” .
Kullanılabilir haline ulaşmak için Buraya tıklayınız.
Örnek kodları İndirmek için Buraya tıklayınız.