Merhaba herkese.. http://suatturkmen.com/ şu sitedeki headerin gizlenmesi ve menünün tepede sabit kalması olayı çok hoşuma gitti...
Bunun aynısını http://www.erdalbakkal.tk/ siteme yapmak istiyorum nasıl yapabilirim?
Headeri nasıl böyle yaparım |
16 Mesajlar | 2.909 Okunma | ||
- Üyelik 15.07.2011
- Yaş/Cinsiyet 30 / E
- Meslek Öğrenci :)
- Konum Uşak
- Ad Soyad ** **
- Mesajlar 1345
- Beğeniler 761 / 199
- Ticaret 2, (%100)
- Üyelik 30.01.2012
- Yaş/Cinsiyet - /
- Meslek
- Konum
- Ad Soyad ** **
- Mesajlar 2434
- Beğeniler 686 / 1151
- Ticaret 1, (%100)
Siteye giremediğim için header`i göremiyorum dersem ne dersin ? :D
Edit:
5. denememde girdi. Sanırım sunucularını yeniden başlatmışlar. :D
Edit 2: jQuery scrollTop() fonksiyonu ile yapabilirsiniz.
if(scrollTop() > 150){ addClass(fixedMenu)} mantığı ile... sayfa 150px kaydırılınca otomatik fixedMenü classı eklenir ve header pozisyonu fixed olur. Çok da güzel olur. :)
Edit:
5. denememde girdi. Sanırım sunucularını yeniden başlatmışlar. :D
Edit 2: jQuery scrollTop() fonksiyonu ile yapabilirsiniz.
if(scrollTop() > 150){ addClass(fixedMenu)} mantığı ile... sayfa 150px kaydırılınca otomatik fixedMenü classı eklenir ve header pozisyonu fixed olur. Çok da güzel olur. :)
- Üyelik 28.09.2011
- Yaş/Cinsiyet 38 / E
- Meslek Back-end Developer
- Konum İstanbul Avrupa
- Ad Soyad E** G**
- Mesajlar 1051
- Beğeniler 253 / 258
- Ticaret 5, (%100)
o menüyle ilgili bir sorum olacaktı hazır konusu açılmışken :)
Sayfa başı butonunun üstüne gelince içe doğru bir gölgeleme geliyor bunu nasıl yapabiliriz css ile çözemedim :)
Sayfa başı butonunun üstüne gelince içe doğru bir gölgeleme geliyor bunu nasıl yapabiliriz css ile çözemedim :)
- Üyelik 15.07.2011
- Yaş/Cinsiyet 30 / E
- Meslek Öğrenci :)
- Konum Uşak
- Ad Soyad ** **
- Mesajlar 1345
- Beğeniler 761 / 199
- Ticaret 2, (%100)
o menüyle ilgili bir sorum olacaktı hazır konusu açılmışken :)
Sayfa başı butonunun üstüne gelince içe doğru bir gölgeleme geliyor bunu nasıl yapabiliriz css ile çözemedim :)
Sayfa başı butonunun üstüne gelince içe doğru bir gölgeleme geliyor bunu nasıl yapabiliriz css ile çözemedim :)
Site sizinmiydi :D
@Kakarotto :P
Uzman coder değilim anlayacağım dilden anlatsan olur mu ?
Htmlye şunu ekle css ye şunu şu js yi çağır diye :)
- Üyelik 04.12.2011
- Yaş/Cinsiyet 35 / E
- Meslek .
- Konum İzmir
- Ad Soyad ** **
- Mesajlar 2376
- Beğeniler 704 / 791
- Ticaret 1, (%100)
Evet bence de. JQuery'e yeni giriş yapanlar (mesela ben :D) için açıklayıcı olunmalı.
- Üyelik 30.01.2012
- Yaş/Cinsiyet - /
- Meslek
- Konum
- Ad Soyad ** **
- Mesajlar 2434
- Beğeniler 686 / 1151
- Ticaret 1, (%100)
Şöyle anlatayım o zaman.
1-) Büyük mavi header`in altında bulunan siyah menü çubuğuna .nav-container isminde bir sınıf verin. İsim önemli değil, o siyah menüyü çevrelesin yeterli.
2-) css dosyasında
diye bir sınıf oluşturun.
3-) herhangi bir js dosyasına da;
kodlarını yapıştırın.
Burada sayfa 140px aşağıya kaydırılırsa (o mavi büyük header yüksekliği ne ise onu girersiniz), .nav-container isimli sınıfın içine .fixed sınıfı eklenir. Yani siz 140px den itibaren sayfayı her aşağıya kaydırmanızda o menü sabit olarak gelecektir.
Bu kadar. :) Biraz kurcalarsanız sınıf isimlerini falan uygunca düzenlerseniz halledebilirsiniz. :)
1-) Büyük mavi header`in altında bulunan siyah menü çubuğuna .nav-container isminde bir sınıf verin. İsim önemli değil, o siyah menüyü çevrelesin yeterli.
2-) css dosyasında
.fixed{
position:fixed;
top:0;
width:100%;
}
diye bir sınıf oluşturun.
3-) herhangi bir js dosyasına da;
$(function(){
$(window).scroll(function(){
if($(this).scrollTop()>140){
$(".nav-container").addClass("fixed");
}
else{
$(".nav-container").removeClass("fixed");
}
});
});
kodlarını yapıştırın.
Burada sayfa 140px aşağıya kaydırılırsa (o mavi büyük header yüksekliği ne ise onu girersiniz), .nav-container isimli sınıfın içine .fixed sınıfı eklenir. Yani siz 140px den itibaren sayfayı her aşağıya kaydırmanızda o menü sabit olarak gelecektir.
Bu kadar. :) Biraz kurcalarsanız sınıf isimlerini falan uygunca düzenlerseniz halledebilirsiniz. :)
- Üyelik 15.07.2011
- Yaş/Cinsiyet 30 / E
- Meslek Öğrenci :)
- Konum Uşak
- Ad Soyad ** **
- Mesajlar 1345
- Beğeniler 761 / 199
- Ticaret 2, (%100)
Deneyeyim :D
- Üyelik 04.12.2011
- Yaş/Cinsiyet 35 / E
- Meslek .
- Konum İzmir
- Ad Soyad ** **
- Mesajlar 2376
- Beğeniler 704 / 791
- Ticaret 1, (%100)
Aslında bunu CSS'de position: absolute; z-index: 100; ekleyerek de yapamaz mıyız? Menünün alt kısmına da margin-top: 100px; deriz. Böylece menünün hemen altındaki kısımlar menünün arkasında kalmaz.
- Üyelik 08.09.2011
- Yaş/Cinsiyet 29 / E
- Meslek Öğrenci
- Konum Elazığ
- Ad Soyad K** P**
- Mesajlar 539
- Beğeniler 93 / 86
- Ticaret 0, (%0)
Adam bu şekilde yapmış :D
$(window).scroll( function() { var scrollVal = $(this).scrollTop(); if ( scrollVal > 150 ){ $('.header_top').stop().animate({ top: '-130', opacity: 1 }, 100, function() { // Animation complete. $('.second_logo').show().stop().animate({ width: '50' }, 100, function() { $('.second_logo img').fadeIn(500); }); }); $('.logo, .social').hide(); $('#nav_top').css('padding-top', '102px'); $('.scroll_top, .next_prev_nav').fadeIn(500); }else{ $('.header_top').stop().animate({ top: '0px', opacity: 1 }, 100, function() { // Animation complete. }); $('.logo, .social').show(); $('.scroll_top, .next_prev_nav').fadeOut(50); $('#nav_top').css('padding-top', '38px'); $('.second_logo img').css('display','none'); $('.second_logo').stop().animate({ width: '0' }); } if ( scrollVal > 40 ){ $(".header_top").hover(function() { $('.header_top').stop().animate({ opacity: 1 }); }, function () { $('.header_top').stop().animate({ opacity: 1 }) }); } });
KEP Creativity | Digital Agency
- Üyelik 15.07.2011
- Yaş/Cinsiyet 30 / E
- Meslek Öğrenci :)
- Konum Uşak
- Ad Soyad ** **
- Mesajlar 1345
- Beğeniler 761 / 199
- Ticaret 2, (%100)
Büyük mavi header`in altında bulunan siyah menü çubuğuna .nav-container isminde bir sınıf verin. İsim önemli değil, o siyah menüyü çevrelesin yeterli.
şurayı anlamadım
headerde o menünün divini kapsayan div class"nav-container" oluşturdum
ama olmadı :D
şurayı anlamadım
headerde o menünün divini kapsayan div class"nav-container" oluşturdum
ama olmadı :D
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)