Yatay css menülerde statik yapı artık yetersiz kalınca dinamik yapı olan yani width:; değeri olmayan gerektiği kadar uzayabilen yapıya geçildi bu ilk zamanlar biraz canımı sıksada yazdığım kodların esnekliğini gördükçe çok hoş bir hal almaya başladı. Ama gene bir sorun vardı Lİ taglarını ortalamak boyutu belirli olmayan bir tag margin:0px auto; ile ortalanmıyor tek çözüm margin değeri vermek ama o zamanda Li tagının içeriniğinin ne kadar uzun olacağı belli olmadığı statik margin değeride veremiyoruz bu yüzden gene css ile yollarımız jquery de kesişiyor. Okumaya devam et jQuery ile UL içerisindeki LI taglarını ortalamak eq() , Math()
Yazar: Aycan BÜLBÜL
Css z-index elementi nedir ? nasıl kullanılır ?
Css kodlarımızda bu zaman kadar hep yanyana alt alta sıraladık ama günümüz tasarımlarında bu sıralamalar bizlere yetmemeye başladı ve artık dinamik bir resim gölgesi yapıyorsak bile bu gölge div’ini z-index ile resimin üstüne yerleştiriyoruz ve resim ne kadar değişirse değişisin bizim belirlediğimiz gölgeli z-index div’i altında çıkıyor.
Açıkcası z-index z ekseninde yani üst üste, alt alta divleri yerleştirmemizi sağlıyor ancak z-index’i kullanabilmemiz için öncelikle position özelliği vermemiz lazım yoksa z-index değeri çalışmayacaktır. Hemen örneklere geçelim. Okumaya devam et Css z-index elementi nedir ? nasıl kullanılır ?
Css Position nedir? nasıl kullanılır?
Css position elementi eski yapılan tasarımlarda pek olmasa artık günümüzün web sitelerinde olmazsa olmaz özelliklerinden biridir yani eski web sitelerimizde sıralı divler (yanyana divler) kullanırken artık bağımsız divler kullanıyoruz. İlk başlarda position kullanmaya çekinirdim tarayıcılar arasında sorunlar yaratır diye ama kullanmaya başladıktan sonra gördüm ki position kullanmak daha basit ve kullanımı kolay.
Benim makale anlayışım örnekler yapmak ve sizlere örnekler göstermektir o yüzden hemen örneklere geçiyorum. Okumaya devam et Css Position nedir? nasıl kullanılır?
Css & jQuery tasarımlarım
jQuery ve css yazmaya başladığım zamanlar çok deneme çalışması yaptık ve kimini kullandık kimini kullanmadık ama bunların hepsi bana birer tecrübe olarak geri döndü bu tasarımları Css & jQuery kodlamaları acemilik zamanlarında yapmış olduğum çalışmalar olduğu için kod kalabalıkları veya yanlış yazımlar olabilir. Benim bu tasarımları paylaşma amacım sadece kodlara bakarak biraz kavramaya çalışmanızdır.
Atatürk üniversitesi portal giriş çalışması :
Sistem css ve jquery üzerinedir ana durmadan jquery ile bazı listeleri gizleyip kaldırdık.
Resim 1
Bu çalışmayı indirmek için buraya tıklayın.
Demo için buraya tıklayınız .
Atatürk üniversitesi portal içerik sayfası çalışması :
Bu modul girişi sayılabilecek sistemde jquery adına herhangi bir fonksiyon yoktur.
Sistemde full ul> li kastırılmıştır birde görsellik katmak açısından css opacity komutu kullanılmıştır.
Bu çalışmayı indirmek için buraya tıklayın.
Demo 1 için buraya tıklayınız.
Demo 2 için buraya tıklayınız.
Atatürk üniversitesi anasayfa çalışması :
Bu çalışmada SFK nickli tasarımcımızın yapmış oluduğu tasarımı html’e döktüm. Tasarımda ek olarak jQuery fadeTo fonskiyonunu kullandım
Bu çalışmayı indirmek için buraya tıklayın.
Demo 1 için buraya tıklayınız.
İlerleyen zamanlarda diğer çalışamlarımda koyacağım konu güncellenecektir.
jQuery Açılır Menü
Artık çoklu menulerde jquery açılır menu şart oldu bende dilimin döndüğünce şimdi jquery açılır menu yapmayı öğreteceğim. Öncelikle bu adresten jquery dosyamızı indiriyoruz ve css yatay veya dikey menulerimizi oluşturmaya başlıyoruz konu hakında bilgisi olmayanlar için css yatay menü ve dikey menuleri anlatmıştım o konudan esinlenerek öncelikle css dosyamızı sonra jQuery dosyamızı yazmaya başlıyalım.
Css Dosyamızı yazıyoruz
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
body{background-color: #333333;} /*Dikey Menü Cssi*/ .kalip{width:250px; float:left;} .kalip ul {width:250px; overflow: hidden; margin:0px auto;} .kalip ul li{list-style:none;} .kalip ul li a{width:190px; height:18px; background-color:#0033CC; font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:3px; padding:7px 0px 0px 10px; -moz-border-radius:4px;} /*Acilan menunün A özelliği*/<strong> </strong> .kalip ul li ul {dispaly:none;} .kalip ul li ul li a{width:190px; height:18px; background-color:#cd1821;font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px; padding:7px 0px 0px 10px; -moz-border-radius:4px;} .kalip ul li a:hover{width:190px; height:18px; background-color:#e2e2e2; font:bold 11px Tahoma; color:#0033CC; display:block; margin:5px; padding:7px 0px 0px 10px;} /*Yatay Menu Cssi*/ .yatay{ width:840px; height: 500px;float: left;} .yatay ul{ width:840px; height: 500px;position: absolute; z-index: 1;} .yatay ul li { list-style:none; float:left; } /*Açılan Menunun ul li a özelliği*/ .yatay ul li ul{margin: 0; padding: 0; width: 220px; overflow: hidden; display: none; position: absolute; z-index: 2;} .yatay ul li ul li{margin: 0; padding: 0; float: none;} .yatay ul li ul li a{ width:190px; height:18px; background-color:#cd1821;font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px; padding:7px 0px 0px 10px; -moz-border-radius:4px;} .yatay ul li ul li a:hover{background-color:#e2e2e2; color:#0033CC;} .yatay ul li a{width:190px; height:18px; background-color:#cd1821;font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px; padding:7px 0px 0px 10px; -moz-border-radius:4px;} .yatay ul li a:hover{ background-color:#e2e2e2; color:#0033CC;} |
Burada menu kalıplarımızı oluşturduk ve alt menulerin özelliklerine display:none dedik yani görünmez yaptık. Css dosyamızın bu kadar karışık durduğuna bakmayın içine girdikten sonra en fazla 6 ayrı class’a özellik tanımlamışızdır.
jQuery Dosyamızı yazalım
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function(){ /* Açılır Dikey Menü için jQuery Kodları*/ $('a.Tikla').click(function(){ $('.AltMenu').slideUp('fast'); $(this).parent().find('.AltMenu').slideDown('fast'); }); /* Açılır Yatay Menü için jQuery Kodları */ $('a.Tiklayatay').hover(function(){ $(this).parent().find('.YatayAcilan').fadeIn('fast'); $(this).parent().hover(function() {}, function(){$(this).parent().find(".YatayAcilan").fadeOut('fast');}); }); }); |
Bütün işlemi gerçekleştiren en önemli kısım burası adım adım anlatıyorum.
|
1 |
$('a.Tikla').click(function(){ ..... } |
A Taglarından Class’ı Tikla olana tıklanıldığında şunları yap ( … )
|
1 |
$('.AltMenu').slideUp('fast'); |
Class’ı AltMenu olanların hepsini slideUp yap yani kaldır.
|
1 |
$(this).parent().find('.AltMenu').slideDown('fast'); |
Burada ise Tıklanılan <a> tagında .AltMenu classlı div’i bul ve slideDown yap yani aç.
Dikey Açılır menümüz için yazdığımız js kodları bu kadar arkadaşlar. Yatay menü içinde bu kodlar geçerlidir. slideUp yerine fadeOut slideDown yerine fadeIn komutunu kullandık.
Şimdi ise Html kodlarımızı yazalım.
Html kodlarını yazmadan önce genel mantığımız bir ana menumuz olacak
|
1 2 3 4 5 |
<ul> <li> <a></a> </li> </ul> |
ve bu menudeki <li></li> taglarının arasına açılacak alt menuyü yerleştireceğiz aşağıdaki örnekteki gibi.
|
1 2 3 4 5 6 7 8 |
<ul class="AnaMenu"> <li> <a></a> <ul class="AcilanMenu"> <li><a></a></li> </ul> </li> </ul> |
Tam html kodlarımız :
|
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<div class="kalip"> <ul> <li> <a href="#" title="Aycam" class="Tikla">Aycan.Net</a> <ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;"> <li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jquery-fadeto.html" title="jQuery fadeTo">jQuery fadeTo </a></li> <li><a href="http://www.aycan.net/blog/webmaster/web-yazilim-tasarim-programlari.html" title="Web yazılım & tasarım programları">Web yazılım tasarım programları</a></li> <li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jqueryde-acilir-kapanir-div.html" title="jQuery’de Açılır-Kapanır Div">jQuery’de Açılır-Kapanır Div</a></li> <li><a href="http://www.aycan.net/blog/css/haydi-ul-li-taglarini-ogrenelim.html" title="Haydi ul – li taglarını öğrenelim">Haydi ul – li taglarını öğrenelim</a></li> <li><a href="http://www.aycan.net/blog/css/cssde-opacity-komutu.html" title="Css’de Opacity komutu">Css’de Opacity komutu</a></li> <li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/ie-6-da-sorun-cikartan-png-resimlerin-cozumu.html" title="IE6 Png Sorunu">IE6 Png Sorunu</a></li> <li><a href="http://www.aycan.net/blog/php/php-fonksiyon-yazalim.html" title="Php Fonksiyon yazalım">Php Fonksiyon yazalım</a></li> </ul> </li> <li> <a href="#" class="Tikla">Xotesi.Net</a> <ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;"> <li><a href="http://xotesi.net/submit.php" title="Site Ekle">Site Ekle</a></li> </ul> </li> <li> <a href="#" class="Tikla">Zone.Org</a> <ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;"> <li><a href="http://zone.org/webmaster-genel/" title="Webmaster Genel">Webmaster Genel</a></li> <li><a href="http://zone.org/programlama-dilleri/" title="Programlama Dilleri">Programlama Dilleri</a></li> <li><a href="http://zone.org/php/" title="Php">Php</a></li> <li><a href="http://zone.org/java-jsp-js-diger/" title="Java / Js / Jsp">Java / Js / Jsp</a></li> <li><a href="http://zone.org/html-css-dhtml/" title="Html Css Dhtml">Html Css Dhtml</a></li> <li><a href="http://zone.org/web-grafik-tasarim/" title="Web Grafik Tasarım">Web Grafik Tasarım</a></li> <li><a href="http://zone.org/forum.php#webmaster-kahvesi" title="Webmaster Kahvesi">Webmaster Kahvesi</a></li> <li><a href="http://zone.org/uyeler/aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li> </ul> </li> <li> <a href="#" class="Tikla">R10.Net</a> <ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;"> <li><a href="http://www.r10.net/google-adsense/" title="Google Adsense">Google Adsense</a></li> <li><a href="http://www.r10.net/dmoz-ve-diger-dizinler/" title="DMOZ ve Diger Dizinler">DMOZ ve Diger Dizinler</a></li> <li><a href="http://www.r10.net/ajax/" title="Ajax">Ajax</a></li> <li><a href="http://www.r10.net/members/23775-aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li> </ul> </li> </ul> </div> <div class="yatay"> <ul> <li> <a href="#" class="Tiklayatay">Aycan.Net</a> <ul class="YatayAcilan"> <li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jquery-fadeto.html" title="jQuery fadeTo">jQuery fadeTo </a></li> <li><a href="http://www.aycan.net/blog/webmaster/web-yazilim-tasarim-programlari.html" title="Web yazılım & tasarım programları">Web yazılım tasarım programları</a></li> <li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jqueryde-acilir-kapanir-div.html" title="jQuery’de Açılır-Kapanır Div">jQuery’de Açılır-Kapanır Div</a></li> <li><a href="http://www.aycan.net/blog/css/haydi-ul-li-taglarini-ogrenelim.html" title="Haydi ul – li taglarını öğrenelim">Haydi ul – li taglarını öğrenelim</a></li> <li><a href="http://www.aycan.net/blog/css/cssde-opacity-komutu.html" title="Css’de Opacity komutu">Css’de Opacity komutu</a></li> <li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/ie-6-da-sorun-cikartan-png-resimlerin-cozumu.html" title="IE6 Png Sorunu">IE6 Png Sorunu</a></li> <li><a href="http://www.aycan.net/blog/php/php-fonksiyon-yazalim.html" title="Php Fonksiyon yazalım">Php Fonksiyon yazalım</a></li> </ul> </li> <li> <a href="#" class="Tiklayatay">Xotesi.Net</a> <ul class="YatayAcilan"> <li><a href="http://xotesi.net/submit.php" title="Site Ekle">Site Ekle</a></li> </ul> </li> <li> <a href="#" class="Tiklayatay">Zone.Org</a> <ul class="YatayAcilan"> <li><a href="http://zone.org/webmaster-genel/" title="Webmaster Genel">Webmaster Genel</a></li> <li><a href="http://zone.org/programlama-dilleri/" title="Programlama Dilleri">Programlama Dilleri</a></li> <li><a href="http://zone.org/php/" title="Php">Php</a></li> <li><a href="http://zone.org/java-jsp-js-diger/" title="Java / Js / Jsp">Java / Js / Jsp</a></li> <li><a href="http://zone.org/html-css-dhtml/" title="Html Css Dhtml">Html Css Dhtml</a></li> <li><a href="http://zone.org/web-grafik-tasarim/" title="Web Grafik Tasarım">Web Grafik Tasarım</a></li> <li><a href="http://zone.org/forum.php#webmaster-kahvesi" title="Webmaster Kahvesi">Webmaster Kahvesi</a></li> <li><a href="http://zone.org/uyeler/aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li> </ul> </li> <li> <a href="#" class="Tiklayatay">R10.Net</a> <ul class="YatayAcilan"> <li><a href="http://www.r10.net/google-adsense/" title="Google Adsense">Google Adsense</a></li> <li><a href="http://www.r10.net/dmoz-ve-diger-dizinler/" title="DMOZ ve Diger Dizinler">DMOZ ve Diger Dizinler</a></li> <li><a href="http://www.r10.net/ajax/" title="Ajax">Ajax</a></li> <li><a href="http://www.r10.net/members/23775-aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li> </ul> </li> </ul> </div> |
Resim :
Takıldığınız noktaları belirtirseniz elimden geldiğince cevaplamaya çalışacağım.
Html kodlarımızda bu kadar arkadaşlar demo için bu adrese bakabilirsiniz :
jQuery Açılır Menü
jQuery Açılır Menü