Sabit Üst Menü Yapımı (CSS,jQuery,HTML) | Forumlar - Seditio Türkiye - Seditio Modül, Seditio Tema, Seditio Plugin, Seditio Dersler

Forumlar - Seditio CMS - Seditio 175 Skins - Sabit Üst Menü Yapımı (CSS,jQuery,HTML)

Author

Message

Kaan

678 posts

#885 2016-12-07 11:39 GMT

Haraketli Kayan Sabit Üst Menü Yapımı (CSS,jQuery,HTML)

Sabit duran menüler genellikle en üstte durur, bu menü’nün mantığı aslında çok basittir ufak bir css kodu ile menü’yü sabitleyebiliriz. Ancak bu mantık her menü için uygun değildir. Bu mantık sadece site menü’lerinin en üstte durduğu zaman işler.

Bu yazı ile birlikte menü’nüzü logo altına veya başka birşeyin altına koyup aşağı inerken menü’yü en üste sabitleyeceğiz.

jQuery Kütüphanesi

Bu menü’yü yapabilmemiz için bir jQuery kütüphanesine ihtiyacımız var. Aşağıda ki linklerden jquery kütüphanesini indirebilir veya o sitelerden kullanabilirsiniz.

Google CDN, Miscrosoft CDN , jQuery CDN.

Aşağıda ki kodları <head> tagı arasına ekleyin

Kod:

ğıda ki kod ile jquery kütüphanesini sitemize çağırmış oluyoruz.
[code]<script type="text/javascript" src="http://

//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>[/code]

HTML

Aşağıda ki kodlar menü’müzün htm

tml]

<div class="nav-container">

<div class="nav">

<ul>

<li><a>Home</a></li>

<li><a>CSS</a></li>

<li><a>PHP</a></li>

<li><a>SEO</a></li>

<li><a>jQuery</a></li>

<li><a>Wordpress</a></li>

<li><a>Services</a></li>

</ul>

<div class="clear"></div>

/*clear floating div*/</div>

</div>

ar"></div>
/*clear floating div*/</div>
</div>[/highlight]

CSS

Aşağıda ki kodlar ile menümüzün css kodlarını ekleyeceğiz. Bu kodları sitenizin style.css dosyasına ekleyin.

[highlight=css]
<style type="text/css">
.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */

.nav { height: 42px;}
.nav ul { list-style: none; }
.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}
</style>
[/highlight]

Javascript

Aşağıda ki kodları temanızın <head> tagı arasına ekleyin.
[highlight=javascript]
<script type="text/javascript">
jQuery("document").ready(function($){

var nav = $('.nav-container');

$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});

});
</script>[/highlight]

kayan menü html html menüyü yukarda sabit tutma wordpress üst sabit mobil için kayan menü menünün kaymasını engelleme menu cubugu olusturma kodları kayan menü php
css ile ekranda sabit kalan bar yapımı kayan menü jQuery sabit üst menü

Bunlara baktınızmı?
Php ile Kredi Hesaplama ve Ödeme Tablosu Yapımı
Seditio 175 Sayfalar için Seo Url Yapımı
Css İle Renkli Buton Yapımı

Kişiliğim, hayatım hakkında konuşabilirsiniz. Fikir yürüte bilirsiniz. Beni öyle böyle sanabilirsiniz. Ama emin olamazsınız. Sizin hakkımdaki yorumlarınız, sanmalarınız benim gerçek de ne olduğumu değiştirmez. Baktığım yeri söyleye bilirsiniz ama ne gördüğümü ASLA...