Merhaba arkadaşlar hemen hemen 2 aydır makale yazamıyordum yoğunluktan, bugün müşterimin beni ekmesi ve bir arkadaşım benden böyle bir menü isteyince hemen bu boşluğu makaleye çevirmeye çalıştım. Herzaman olduğu gibi bu uygulamaya tam isim vermedim.
Uygulama hakkında : İl – İlçe seçimi gibi ana ve alt kategori seçimli olan menuler için yazdım.
Hemen kodlara geçecek olursak Okumaya devam et jQuery Jump Menü
Merhaba arkadaşlar geçenlerde r10’da bir üye manşet menü sistemi istemişti bende hemen yapayım dedim. Genelde uygulamara isim bulmaktan zorlanırım ama bu feed’imde bana yardımcı olan arakdaşlara teşekkürler.
Kod yapısına geçelim . Okumaya devam et jQuery Manşet menü sistemi
Merhaba öncelikle bu yaptığım js kutuphanesi hakkında bir isim bulamadım o yüzden hareketli resimler diye bir isim uydurdum. Eğer bu özelliğin adı varsa afiş gösterici vs yorumda belirtirse sevinirim : )
Geçenlerde arkadaşım umutun bir projesinde arayüz geliştiricisi olarak yer aldım. Proje sinema ile ilgili bir siteydi ve bir kaç js özelliği vardı sinemaz.com buyrun burdan bakabilirsiniz. Bende hazır eklentileri kullanacağıma kendi kütüphanemi geliştireyim dedim ve ikinci uygulamamı yazdım. Uygulama biraz basit oldu ama işlevselliği var o yüzden sağdan sola kayan resimler beni sıkıyor ben değiştireyim diyorsanız bu hareketli resimler uygulaması tam size göre.
Uygulamaya giriş :
Uygulamada kullanılan diller : Css & jQuery
İlk işimiz olarak html ve css dosyamızı hazırlıyoruz kodlar; Okumaya devam et Yeni eklenen resimli içerikler için hareketli resimler
jQuery çalışmalarına devam ediyoruz şimdi ise jQuery tab kontrol yani tab menü yapacağız . jQuery dosyasını yazarken baya bir açıklama yaptım takıldığınız yer olursa oradanda bakabiliriz.
jQuery ile basit bir tab menü yapmak çok kolaydır ve statiktir bunu jQueryden az çok anlayan insanlar kullanabilir ve düzenleyebilir ama benim amacım çok esnek yapıda menu eklemek – çıkartmak. Bunun için jQuery kütüphanesinden removeAttr , addClass ve attr fonksiyonlarını kullandım. Öncelikle menümüzü hazırlayalım ve gerekli css , html kodlarını yazalım.
Ben iğrenç görünümlü bir menü oluşturdum her ne kadar renkler birbirinden uyumsuz olsada artık siz css kısımından menüyü düzeltebilirsizniz.
Menu ön izleme :
Menü html kodları
|
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 |
<div class="disKutu"> <div class="ustMenu"> <ul class="anaMenu"> <li><a class="aktifA" title="tab1">Atatürk Köşesi</a></li> <li><a title="tab2">Css</a></li> <li><a title="tab3">jQuery</a></li> <li><a title="tab4">Tost siteler</a></li> </ul> </div><!-- ustMenu DIV kapanis --> <div class="acilacakTabMenuler"> <!-- #tab1 --> <ul class="acilacakMenu aktifUl" id="tab1"> <li><a href="http://www.ataturk.net/">Atatürk</a></li> <li><a href="http://www.atauni.edu.tr">Atatürk üniversitesi</a></li> <li><a href="http://www.atam.gov.tr/">Atatürk araştırma merkezi</a></li> <li><a href="http://tr.wikipedia.org/wiki/Mustafa_Kemal_Atat%C3%BCrk">Wiki'de Atatürk</a></li> <li><a href="http://egitek.meb.gov.tr/uretim/atacd/005/Menu/Menu.htm">Kurtuluş savaşı öncesi</a></li> </ul> <!-- #tab2 --> <ul class="acilacakMenu" id="tab2"> <li><a href="http://www.aycan.net/blog/css/css-z-index-elementi-nedir-nasil-kullanilir.html">z-index</a></li> <li><a href="http://www.aycan.net/blog/css/css-position-nedir-nasil-kullanilir.html">position</a></li> <li><a href="http://www.aycan.net/blog/css/cssde-opacity-komutu.html">opacity</a></li> <li><a href="http://www.aycan.net/blog/css/haydi-ul-li-taglarini-ogrenelim.html">ul-li tagları</a></li> <li><a href="http://www.aycan.net/blog/css/css-de-sablon.html">css şablon</a></li> <li><a href="http://www.aycan.net/blog/css/css-jquery-tasarimlarim.html">css ve jQuery tasarımlarım</a></li> </ul> <!-- #tab3 --> <ul class="acilacakMenu" id="tab3"> <li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jquery-popup-uygulamasi.html">popup uygulaması</a></li> <li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jquery-fadeto.html">fadeTo</a></li> <li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jquery-acilir-menu.html">açılır menu</a></li> <li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jquery-ile-ul-icerisindeki-li-taglarini-ortalamak-eq-math.html">jquert eq()</a></li> <li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jqueryde-acilir-kapanir-div.html">jquert efekler</a></li> </ul> <!-- #tab4 --> <ul class="acilacakMenu" id="tab4"> <li><a href="http://www.aycan.net/">aycan.net</a></li> <li><a href="http://www.xotesi.net/">xotesi.net</a></li> <li><a href="http://www.datatr.com/">datatr.com</a></li> <li><a href="http://www.zone.org/">zone.org</a></li> <li><a href="http://www.r10.net/">r10.net</a></li> <li><a href="http://www.iyi.net/">iyi.net</a></li> <li><a href="http://www.fuub.net/">fuub.net</a></li> </ul> </div><!-- acilacakTabMenuler DIV kapanis --> </div><!-- disKutu DIV kapanis --> |
Menü Css kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.disKutu{width:350px; overflow: hidden; background:#B44D4D;} .ustMenu{width:100%; overflow: hidden; background:#956FAC;} ul.anaMenu{width:100%; overflow: hidden; list-style: none;} ul.anaMenu li{ float:left; } ul.anaMenu li a{ background: #4D94B4; padding: 3px;margin-left:10px; color: #e2e2e2; font-size: 12px; font-family:Calibri; border:1px solid #e2e2e2;float:left; } ul.anaMenu li a.aktifA{ background: #cd1821; color: #fff; text-decoration: none;} .acilacakTabMenuler{width:100%; overflow: hidden; margin:15px 0 15px 0;} ul.acilacakMenu{margin:0; padding: 0;width:97%; overflow: hidden; display: none; } ul.acilacakMenu.aktifUl{display: block; } ul.acilacakMenu li{list-style:none;} ul.acilacakMenu li a{background: #C4B74B; margin-left:10px; display: block; color:#fff; font-size: 14px; padding:5px; font-family:calibri; text-decoration: none;margin-top: 5px; } ul.acilacakMenu li a:hover{ background: #4D94B4;text-decoration: underline; padding-left:10px; } |
Şimdi sıra geldi jquery işlemlerine ilk başta sayfamıza jquery.js veya googleapis’deki js dosyasını entegre edelim sonra bir alt satıra oluşturduğum ab-tabmenu.js dosyasını entegre edelim.
|
1 2 |
type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/ab-tabmenu.js"></script> |
İşlemlerimiz bitti şuan jquery tab menümüz çalışır bir vaziyette ama bizim işimiz örnekleri anlatmak o yüzden ab-tabmenu.js dosyasını açıyorum ve anlatmaya başlıyorum.
|
1 |
$(document).ready(function(){ işlemler }) |
Sayfa yüklendiğinde şu işlemleri yap.
|
1 |
$('.anaMenu li a').hover(function() { ..} |
anamenu classlı ul içerisindeki li içindeki a linkinin üzerine gelindiğinde fonksiyonu çalıştır
|
1 |
$('.anaMenu li a').removeAttr('class'); |
removeAttr ile şunu diyoruz : anaMenu’nun altindaki li tagının altındaki a taglarinin hepsini classlarini sil.
|
1 |
$(this).addClass('aktifA'); |
addClass ile şunu diyoruz : üzerine geldiğimiz menünün class’ına aktifLi değerini yaz.
|
1 |
var acilacakTab = $(this).attr('title'); |
attr ile şunu diyoruz : acilacakTab degerinde bir degisken oluştur ve ustune gelinen menunun id=”***” degeri al.
|
1 |
$('.acilacakTabMenuler ul').hide(); |
acilacakTabMenuler div’inin icerisindeki ul’lari bul ve hepsini gizle.
|
1 |
$('.acilacakTabMenuler #' + acilacakTab + '' ).show(); |
Yukaridaki ” var acilacakTab = $(this).attr(‘id’); ” satirda ustune gelinen menunun id degerini al sonra acilacakTab olan (tab1 , tab2 , tab3 , vs.. ) degerini ul id degeri olarak ata ve o ul’u aç.
Bütün işlemlerimiz bu kadar arkadaşlar.
Epeki ben nasıl menü ekleyeceğim çıkartacağım sorusuna cevab ise :
Bir menü eklemek istiyorsanınız 2 işlem yapmanız gerekiyor
işlem 1 :
|
1 2 3 4 5 6 |
<ul class="anaMenu"> <li><a class="aktifA" title="tab1">Atatürk Köşesi</a></li> <li><a title="tab2">Css</a></li> <li><a title="tab3">jQuery</a></li> <li><a title="tab4">Tost siteler</a></li> </ul> |
buraya
|
1 |
<li><a href="javascript:;" title="tab5">Yeni menü</a></li> |
ekleyin sadece title kısmında tab5 yazın
işlem 2 :
Üst kısıma yeni menünün adını yazdık ama içeriğini yazmamız lazım
|
1 |
<div class="acilacakTabMenuler">....</div> |
bu div’imizin içerisine yeni bir ul ekliyoruz
|
1 2 3 4 5 6 7 8 9 10 |
<!-- #tab5 --> <ul class="acilacakMenu" id="tab5"> <li><a href="#">deneme</a></li> <li><a href="#">deneme</a></li> <li><a href="#">deneme</a></li> <li><a href="#">deneme</a></li> <li><a href="#">deneme</a></li> <li><a href="#">deneme</a></li> <li><a href="#">deneme</a></li> </ul> |
burada ise yukarıdaki Yeni Menü isimli li’mize verdiğiniz id değerini bu ul’un id kısmına verin. İd değerleri aynı olmak zorundadır.
Menu eklemek bu kadar basit. Menü silmek ise bunun tam tersidir ve uygulamamız tamamen hazır bir hale geldi.
Artık sitelerimizide tarayıcı güncelleme uyarısı , duyuru gibi önemli uyarıları göstermek tasarım pek hoş olmasada bir uyarı sistemi hazırladım.
Uyarı özellikleri ;
1 – [Açılırken] Direk sayfa yüklendiğinde kapsayiciSiyah ekranı tamamen kapsayacak ve ardından 0.9 mili saniye sonra disKutu divimiz fadeIn olacak.
2 – [İçerik] disKutu divimizin en üstünde “Aycan.Net Uyarı” diye site adını belirteceğimiz bir uyarı mesajı ve sağ tarafda ise popupu kapatmak için bir resim vardır. Alt kısımda ise konu başlığını belirtmek için h1 başlık kısmı ve yazı için p tagı kullandım. En alt kısımda ise kullanıcılar için çoklu kullanım için yaptığım 2 adet buton var bunlar direk input elementi değil direk a taglarıdır isteğe göre eklenilebilir çıkartılabilir.
3 – [Kapatma] Popup uyarlamamızın en çok seçimli kısmı kapatma kısmıdır 3 farklı şekilde kapatma olayını entegre ettim.
3.a – Sağ üstteki kapat iconuna tıklayınca,
3.b – popup çerçevesinin dışındaki siyah ekrana tıklayınca,
3.c – esc tuşuna basınca.
4- [Boyutlandırma] Popup kutusunun yüksekliği içerik arttıkça sorunsuz bir şekilde yükselebilir o yüzden popup uygulamasını sitenin tam ortasında açılması için otomatik boyutlandırıcı yazdım ve disKutu’nın boyuna göre margin-top değeri değişmektedir.
Uyarlamayı çalıştırmak için ;
Aşağıdaki html kodlarını <body></body> tagları arasında herhangi bir yere yapıştırmak
|
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 |
<div class="kapsayiciSiyah"></div> <div class="disKutu"> <div class="icKutu"> <div class="icKutuUst"> <h1>Aycan.net Popup Uygulaması</h1> <img class="kutulariKapat" alt="kapat" src="kapat.gif"/> </div> <div class="icKutuOrta"> <h1>1 - [Açılırken]</h1> <p class="paragraf"> Direk sayfa yüklendiğinde kapsayiciSiyah ekranı tamamen kapsayacak ve ardından 0.9 mili saniye sonra disKutu divimiz fadeIn olacak. </p> <h1>2 - [İçerik]</h1> <p class="paragraf"> disKutu divimizin en üstünde "Aycan.Net Uyarı" diye site adını belirteceğimiz bir uyarı mesajı ve sağ tarafda ise popupu kapatmak için bir resim vardır. Alt kısımda ise konu başlığını belirtmek için h1 başlık kısmı ve yazı için p tagı kullandım. En alt kısımda ise kullanıcılar için çoklu kullanım için yaptığım 2 adet buton var bunlar direk input elementi değil direk a taglarıdır isteğe göre eklenilebilir çıkartılabilir. </p> <h1>3 - [Kapatma]</h1> <p class="paragraf"> Popup uyarlamamızın en çok seçimli kısmı kapatma kısmıdır 3 farklı şekilde kapatma olayını entegre ettim. 3.a - Sağ üstteki kapat iconuna tıklayınca, 3.b - popup çerçevesinin dışındaki siyah ekrana tıklayınca, 3.c - esc tuşuna basınca. </p> <h1>4- [Boyutlandırma]</h1> <p class="paragraf"> Popup kutusunun yüksekliği içerik arttıkça sorunsuz bir şekilde yükselebilir o yüzden popup uygulamasını sitenin tam ortasında açılması için otomatik boyutlandırıcı yazdım ve disKutu'nın boyuna göre margin-top değeri değişmektedir. </p> <div class="icKutubutonlar"> <div class="icKutuOrtaButon2"> <a href="http://www.aycan.net" >Ana Sayfa</a> </div> <div class="icKutuOrtaButon"> <a href="#" >Devamı</a> </div> </div> </div> </div> </div> |
Css kodlarını kendi sayfasınıza entegre ediniz .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.kapsayiciSiyah{width:100%; height: 100%; background: #333; position: absolute; z-index: 98; display: block;} .disKutu{width: 500px; overflow: hidden; border:10px solid #b3b3b3; position: absolute; z-index: 99; left:50%; margin-left: -270px; display: none;} .icKutu{display: block; background: #fff; border:1px solid #3B5998; } .icKutuUst{width: 498px; height: 31px; background-color:#6D84B4;} .icKutuUst h1{width: 385px; height: 20px; padding: 8px 0px 3px 15px;color:#fff; float:left; font-size: 18px; font-weight: bold; font-family:'Trebuchet MS',Arial,SansSerif;} .icKutuUst img{border:0;float:right;margin: 8px 10px 0px 0px;} .icKutuOrta{width: 498px; overflow: hidden; background-color:#fff;} .icKutuOrta h1{width: 450px; overflow: hidden; margin:10px 25px 5px 25px; line-height: 18px; color:#cd1821;font-size:14px;font-family:'Calibri',Arial,SansSerif;} p.paragraf{width: 450px; overflow: hidden; margin:5px 25px 10px 25px; line-height: 15px;font-size:14px;font-family:'Calibri',Arial,SansSerif; text-align: justify;} .icKutubutonlar{width: 498px; border-top:1px solid #ccc; background: #f2f2f2;} .icKutuOrtaButon{margin: 8px 10px 8px 0px; overflow: hidden;border:1px solid #29447E; float: right;} .icKutuOrtaButon a{background: #5C74A9; border-top:1px solid #A5B1CA; text-decoration: none; padding: 5px 8px 4px 8px;display: block; color:#fff; font-size: 16px; font-weight: bold;font-family:'Calibri',Arial,SansSerif;} .icKutuOrtaButon2{margin: 8px 10px 8px 0px; overflow: hidden;border:1px solid #999999; float: right;} .icKutuOrtaButon2 a{background: #E4E4E4; border-top:1px solid #FFFFFF; text-decoration: none; padding: 5px 8px 4px 8px;display: block; color:#333; font-size: 16px; font-weight: bold;font-family:'Calibri',Arial,SansSerif;} |
Eğer ayrı bir css dosyanız yoksa bu kodları tagları arasına
|
1 2 3 4 |
<style type="text/css"> . . </style> |
style tagı açın ve içerisine kodları yapıştırın.
Jquery kodlarını head tagları arasına yapıştırınız.
|
1 2 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="aycanb-popup.js"></script> |
ve uygulamamız tamamen hazır bir hale geldi boş bir vaktimde çeşitli popup uygulamaları bu başlık altında belirteceğim.
