Ribbon style horizontal example

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 tane örnekten oluşuyor.  Biri  mavi biri  kırmızı  iki adet png formatlı  kullanıldı bu örnekte. Yazılara da text-shadow ile gölge efekti verilerek biraz 3 boyutlu bir görünüm kazandırılmış

Mouse ile kategori linklerinin üzerine geldiğiniz anda mavi renkli butonlar kırmızı renge dönüşüyor ama öyle bildiğiniz gibi birden br dönüşüm geçirmiyorlar. jQuery fadeIn ve FadeOut kullanıldığı için yavaşça renk değiştirme işlemi oluyor. Eğer beğenmezseniz JavsScript kodları ve Js  url  adresini kaldırmanız  yeterli olacaktır. Bunun  bir diğer özelliği de hangi  sayfada iseniz  o  sayfadaki buton kırmızı  olarak  duruyor.  Li etiketleri arasına eklenmiş  olan  class=”secili” kodu  butonun secili  durumda  kalmasını  sağlıyor. Bazıları bu özelliği active diye biliyor ama active ile alakalı bir durum değil. Hover kodlarını kopyalayıp .secili sınıfının içine yapıştırdığımız zaman ortaya böyle bir sonuç çıkıyor. Her sayfaya ayrı ayrı yerleştirip eklemiş olduğunuz dosyanın linkine aşağıdaki gibi secili sınıfını eklemeniz gerek.

Secili Buton Örneği

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

 Secili Olmayan Buton Örneği

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

Kullanım

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

<link rel="stylesheet" type="text/css" media="all" href="stil.css" />
<script src="https://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>

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

Html : 

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