Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Şifremi Unuttum
Asp.Net .Net MVC PHP & MySQL C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Türkçe
English
German
Tüm Kategoriler
jQuery Responsive Menü Yapımı

Merhaba Arkadaşlar,

İnternetin artık mobil platformlardan kullanılmasının yaygınlaşmasının ardından web sitelerinin de bu duruma ayak uydurması gerekmektedir.

Bizde bunun üzerine sitelerimizi biraz revize edeceğiz hazırlayacağımız menü ekran çözünürlüğü 800px in altına düştüğünde menümüz açılır menü şekline dönüşecek.

ilk olarak menümünü bir oluşturalım.

<nav class="temizle">
	<ul class="temizle">
		<li><a href="#">Ana Sayfa</a></li>
		<li><a href="#">Hakkımızda</a></li>
		<li><a href="#">Galeri</a></li>
		<li><a href="#">İnsan Kaynakları</a></li>
		<li><a href="#">Referanslar</a></li>
		<li><a href="#">İletişim</a></li>
	</ul>
	<a href="#" id="ackapa">Menu</a>
</nav>	

 

menümüzü oluşturduk şimdi bu menümüzü şekillendirelim css imizi kodlamaya başlayalım.

.temizle:before,
.temizle:after {
    content: " ";
    display: table;
}
.temizle:after {
    clear: both;
}
.temizle {
    *zoom: 1;
}	

 

ilk olarak temizle class ımızı yazdık bu ekran çözünürlüğü 800px in altına düştüğünde açılacak olan menümüzün ayarı bir nebze...

onun ardından css imize devam edelim menümüzü şekillendirecektik...

nav {
	height: 40px;
	width: 100%;
	background: #262626;
	font-size: 11pt;
	position: fixed;
	top: 0;
	
}
nav ul {
	padding: 0;
	margin: 0;
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #fff;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	padding:9px 0;
}
nav a#ackapa {
	display: none;
}	

 

şekillendirme işlemi tamam siz istediğiniz tarzda menünüzü şekillendirebilirsiniz kendi sitenize göre düzeltin artık :)

css te yapacağımız son işlem 800px in altına düştüğünde nasıl gözükeceğine ilişkin yeni bir css düzenlemesi olması gereğince sade hale getirdim siz istediğiniz tarza çevirebilesiniz diye..


@media screen and (max-width: 800px) {
	nav {
		height: auto;
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}	
	nav li {
		width: 100%;
		float: left;
		position: relative;
		border-bottom: 1px solid #262626;
  	}

  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
		background: #2e2e2e;	  	
  	}  	
  	nav a:hover {
	  	background:#444;
  	}
  	  		
	nav a#ackapa{
		display: block;
		background-color: #262626;
		width: 100%;
		position: relative;
	}
	nav a#ackapa:after {
		content:"";
		width: 30px;
		height: 30px;
		color: #FFF;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}	

 

artık css kısmımız bitti. jquery kısmımız işe aşağıdaki gibidir.


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
		var ackapa 		= $('#ackapa');
				menu 		= $('nav ul');

		$(ackapa).on('click', function(e) {
			e.preventDefault();
			menu.slideToggle();
		});
		
		$(window).resize(function(){
			var w = $(this).width();

			if(w > 800 && menu.is(':hidden')) {
				menu.removeAttr('style');
			}
		});

		$('li').on('click', function(e) {				
			var w = $(window).width();
			if(w < 800 ) {
				menu.slideToggle();
			}
		});

	
		
	});	

</script>

 

umarım işinize yarar...

bir sonraki makalede görüşmek dileğiyle...

Veysel APARI

Sosyal Hesabında Paylaş

4811 görüntüleme

Yorumlar
Adınız Soyadınız
Mail Adresiniz
Doğrulama Kodu

Bildiklerimiz.Net Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz. biz bunları yapıyoruz ya siz...

© 2021 Bildiklerimiz Tüm hakları saklıdır.
bir Bildiklerimiz.Net projesidir.