jQuery ve Css3 ile Hazırlanmış Hover Efektli Üst Menü Örneği

01 Aralık 2012 | Kategori: Css,jQuery,Webmaster | Yazar: mintik

Resimde her butonun menü üzerine geldiği an seçili haldeyken bir görüntüsünğü kaydedip tek resim üzerinde birleştirdim. Göründüğü gibi tek bir menü. Biri mavi biri kırmızı iki adet png formatlı resimden oluşuyor ve Css3 kullanarak yazılarda gölge efekti kullandım biraz. Aslında 3d görünüm vermek istedim ama çok küçük olduğu için pek birşey belli olmuyordu ve hafif boşluklar meydana geliyordu.

Menü örneği jQuery hover efekti ile daha güzel görünür diye onuda ekledim. butonlar arası geçiş pek hoş görünmedi gibi. Oda sizin zevkinize kalmış. Eğer beğenmezseniz JavsScriptkodları ve jQuery url adresini kaldırmanız yeterli olacaktır. Menünün bir diğer özelliği hangi sayfada iseniz o sayfadaki buton kırmızı olarak duruyor. Li elemanları arasına eklenmiş olan kodu butonun secili durumda kalmasını sağlıyor. Anasayfaya ekleyeceğiniz menüde anasayfa butonundaki li elemanlarına kodu eklemeniz gerekiyor. Her sayfa için ayrı ayrı bu şekilde uygulamanız gerekmektedir.

Secili Buton Örneği

<li class="secili"><a href="#">Tutorial</a></li>

1	<li class="secili"><a href="#">Tutorial</a></li>

Secili Olmayan Buton Örneği

<li><a href="#">Tutorial</a></li>

1	<li><a href="#">Tutorial</a></li>

Kullanım

Head etiketleri arasına eklenmesi gereken bölümler.

jQuery ve Still dosyasının url adresleri :

<link rel="stylesheet" type="text/css" media="all" href="stil.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

1 2	<link rel="stylesheet" type="text/css" media="all" href="stil.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

JavaScript :

<script type="text/javascript">
$(document).ready(function () {
	$('.secilebilen-menu li').append('<div class="gizli"><\/div>');
	$('.secilebilen-menu li').hover(
		function() {
			$(this).children('div').stop(true, true).fadeIn('1000');	
		}, 
		function() {
			$(this).children('div').stop(true, true).fadeOut('1000');	
	});
});
</script>

$(document).ready(function () {

$('.secilebilen-menu li').append('<div class="gizli"><\/div>');

$('.secilebilen-menu li').hover(

function() {

$(this).children('div').stop(true, true).fadeIn('1000');

function() {

$(this).children('div').stop(true, true).fadeOut('1000');

});

</script>

Body etiketleri arasına eklenmesi gereken bölüm.

Html :

<div class="secilebilen-menu">
	<li><a href="#">Anasayfa</a></li>
	<li><a href="#">Css</a></li>
	<li><a href="#">Photoshop</a></li>
	<li><a href="#">jQuery</a></li>
	<li><a href="#">Wordpress</a></li>
	<li class="secili"><a href="#">Tutorial</a></li>
</div>