Yaklaşık 10.000.000.000 hücre ve (0.31) yaşında

sticky menu

Sticky menu yapımı

Sticky header yani yukarıda yapışkan menü yapımı için kullanabileceğiniz alternatif bir yöntemi sizlerle paylaşıyorum. Dilediğiniz şekilde değiştirebilir ve kullanabilirsiniz. Header üzerinde plugin kullanmadan kolay bir şekilde yapışkan (sticky) menü yapabilirsiniz.

Örnek sticky menu demosunu incelemek için buraya tıklayınız.

CSS Kodu:

html, body {
margin: 0;
padding: 0;
}
a { text-decoration: none;}
header.navigasyon {
position: fixed;
width: 100%;
height: 110px;
background: #482680;
transition: all .3s ease-in-out;
z-index: 9
}
/* Sticky header kodu */
header.navigasyon.sticky {
position: fixed;
transition: all 0.2s ease-in-out;
height: 80px;
z-index: 9
}
/* Sticky header kodu */
header.navigasyon ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
transition: all .3s ease-in-out
}
header.navigasyon ul li {
list-style-type: none;
display: inline;
}
header.navigasyon ul li a {
color: #ffffff;
padding: 0px 10px;
border-right: 1px solid #ffffff;
}
main {
position: relative;
top: 110px;
height: 120vh;
z-index:1
}

Javascript kodu:


//Header On Scroll Functionality
$(window).scroll(() => {
var windowTop = $(window).scrollTop();
windowTop > 110 ? $('.navigasyon').addClass('sticky') : $('.navigasyon').removeClass('sticky');
windowTop > 110 ? $('main').css('top', '80px') : $('main').css('top', '110px');
});

1330cookie-checkSticky menu yapımı CSS + Javascript

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Popüler Başlıklar

Blog Hakkında

Tarih: 24 Aralık 2022, Cumartesi
Kategori: CSS
Okunma Sayısı: 1130 okunma
Yazar: Yılmaz Çiftci

Sticky menu yapımı Sticky header yani yukarıda yapışkan menü yapımı...

Yorum yap, tartışalım!

Benzer sonuçlara bakın:

header full height tam yukseklik 100vh 1

Header Full Height – Header Tam Yükseklik 100vh

Full Height tam yükseklik full ekran ayarı yapmak için işinize yarayacak...

flexbox

CSS Flexbox Yapısı

Giriş: Web tasarımı, kullanıcı deneyimini iyileştirmek ve farklı ekran...

video modal box

Javascript Modal Yapımı

Popup pencerelerinin yerini alan modal yapısını Javascript ile hazırladım....

css nedir

CSS Nedir? En Popüler 6 CSS Kütüphanesi

İngilizcesi “Cascading Style Sheets” olan...