Google Web Yöneticisi araçlarını web sitesi olan , seo hakkında az çok bilgisi olan herkes bilir. Bu araçlar sitemizin arama sonuçl...
Google Webmaster Araçları
Online CSS Araçları
Tasarım yaparken bize hız kazandıracak ve işimizi biraz daha kolaylaştıracak olan online CSS araçları yaptığımız işi kısa sürede biti...
Windows'tan Sürücüleri Kaldırma Yolları
İşletim sistemi ile donanım arasında yer alan bu kodların bazen kullanıma geçit vermemesi, karşısında oturduğunuz bilgisayar ile ...
WiFi Finder (iOS)
Taşınabilirlik ve dolayısıyla internet bağlantı noktaları her geçen gün daha önemli hale geliyor.Bu doğrultuda hazırlanan bilgileri...
Kategorilerimizi Animasyonlu Açılır Menü İle Listelemek
Kategorilerimizi "kategori-menu" adlı class'a sahip liste içerisinde listeleyeceğiz. Seçilen kategoriyi kullanıcıya "secili-kategori" class'a sahip a etiketi içerisinde göstereceğiz.
.icerik{
margin: 80px auto;
width: 200px;
text-align: left;
}
.secili-kategori {
background: url(ok.jpg) no-repeat right;
background-color: #0166FF;
border:1px solid #222222;
display:block;
font-size:14px;
font-weight: bold;
padding:5px 5px 5px 8px;
position:relative;
text-shadow:1px 1px 1px #CCCCCC;
width:195px;
color: #000;
text-decoration: none;
}
.kategori-menu {
background-color: #222222;
display:none;
width:198px;
border: 1px solid #222222;
position: absolute;
padding: 5px;
overflow: hidden;
}
.kategori-menu li {
list-style-type: none;
}
.kategori-menu li a {
color:#FFFFFF !important;
text-decoration:none;
padding:5px 5px 7px 5px;
display:block;
text-shadow:1px 1px 1px #fff;
}
.kategori-menu li a:hover {
background-color: #0166FF;
}
Css kodumuz içerisinde dikkat etmemiz gereken iki nokta var. İlk olarak "kategori-menu" adlı class'a sahip listemizi "display:none;" ile gizliyoruz ve "position:absolute;" ile konumunu sabitliyoruz bu şekilde listemiz açılırken diğer etiketlerin konumunu bozmayacaktır.
$(function () {
//secili-kategori class'ına sahip linke tıklarsa listeyi görünür yap
$('a.secili-kategori').click(function () {
$('ul.kategori-menu').slideToggle('medium');
return false;
});
//Listemizde bulunan kategorilere tıklandığında
//"secili-kategori" adlı class'a sahip linkin textini seçilen kategorinin adı yap
$("ul.kategori-menu li a").click(function() {
var text = $(this).html();
$(".secili-kategori").html(text);
$("ul.kategori-menu").slideUp();
return false;
});
//Ekranda herhangi bir yere tıklandığında listemizi gizle
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass(".kategori-menu"))
$("ul.kategori-menu").slideUp();
});
});
Menü içerisinde kullandığınız başlıklara ait ekleyecek olduğunuz linkleri açmak için Jquery kodları içerisinde yer retun false; kodunu silmeniz gerekiyor.
Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin
Not: Gelen Maili Aktif Etmeyi Unutmayınız!
Kategorilerimizi listelemek için bazen açılır menülere ihtiyaç duyabiliriz. Örneğin kullanıcının seçtiği bir kategoriye göre aja...
iPhone'unuzu Hızlandırmanın En Önemli Yöntemleri
Sistem temizleme ve hızlandırma araçları daha çok Android işletim sistemi kullanan cihazlar için yaygın olsa da iPhone’ların da bakım...
iPhone'unuzu Daha Verimli Kullanmak İçin Bazı İpuçları
.jpg)
Akıllı telefonlar teknik olarak her ne kadar üstün teknolojiler kullanılarak üretilmiş olsalar da kullanım ömürleri oldukça sınırlı.B...
Blogger İçin Klasik Tablo Kodu
Blogger'da zaman zaman ürün bilgileri veya konu hakkında tablo bazlı bilgiler vermek isteyebilirsiniz. Teknik olarak listeleme...
Html ve Css İle Resimli Div Oluşturma
.clearfix:before,.clearfix:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.fl{float:left;} .fr{float:right;}
.image-div{margin: 0 0 10px 0;padding: 10px 10px;position: relative;color:#222;background-color:#fff;border:1px solid #000;}
.image-div .image{position:relative;}
.image-div .image img{position:relative;background:none repeat scroll 0 0 transparent;padding: 2px;border: 1px solid #ccc;margin: 0 0 0 0;}
.image-div .image-div-content{position: relative;}
.image-div .image-div-content .row{margin: 0 0 0 0;padding: 0 0 4px 0;position: relative;}
Bu Kodları uyguladığımız zaman şu şekilde olacaktır.
Gördüğünüz gibi resmin bitiminde içerik en sola dayanarak devam etmiş. Fakat biz içeriğin sola dayanarak değil de üsttekilerle aynı yerden devam etmesini istiyoruz. Bunun için image-div-content adlı classımıza 'margin-left:235px' style değerini vereceğiz. Bir sonraki ekran görüntüsüne bakınca ne demek istediğimi anlayacaksınız.
Html kodumuzu aşağıdaki gibi değiştiriyoruz.
Yani şu şekilde görünecek:
Burada soldan 235px margin vererek daha güzel bir görünüme sahip oldu. Ben resmimin büyüklüğüne göre 235px verdim bu sizin resminizin boyutuna göre değişebilir.
Resmi Sağa Dayalı Yapalım
Resmi sola dayalı yaptığımızda resmimize "fl" classımızı atamıştık. Sağa dayalı yapmak için "fr" classımızı atayacağız. Aynı zamanda image-div-content classına sahip dive sağdan 235px margin vereceğiz.
Yeni htm kodumuz :
Bu yöntemi ul tagı ile oluşturduğunuz listelerde ve istediğiniz herhangi bir yerde sorunsuz bir şekilde kullanabilirsiniz.
Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin
Not: Gelen Maili Aktif Etmeyi Unutmayınız!
Bloğunuzda yazıları listelerken yazıyla ilgili bir resim koymak ziyaretçilerin dikkatini daha fazla çekecektir. Bu yazımızda resiml...
Windows 8 Mavi Ekran Verince Yapılması Gerekenler
Windows 8'in mavi ekranı bir eski işletim sistemlerine oranla olabildiğince sadeleşmiş ve sizi anlaşılması güç bir kelime yığını...
Bilgisayarınızı Hızlandırmanın Yolları
Her bilgisayar kullanıcısının isteği, bilgisayarlarının ilk alındığı günkü gibi çalışması ve aynı taze performansı kullanım ömrü boy...
Kaydol:
Kayıtlar (Atom)