Görünüş olarak basit olsada  oldukça şık görünüyor bana göre. Oval köşeleri, mouse üzerine geldiğinde yavaşça renk değiştirmesi, butonların arka planında bulunan gölgenin parlaması ve buton linklerindeki başlıkların arkasında duran gölge efekti. Aslında ilk bakıldığında bir menüyü andırıyor olsa da linkler tek tek kullanıldığında buton örneğinden başka bir şey değildir. bu seferlik sizlere biraz değişik bir örnek sunmak istediğimden dolayı böyle bir tasarım karşımıza çıktı. Ayrıca yatay menü örneklerinin en vazgeçilmez özeliği olan drop&down yani açılır kapanır alt linklerin bu örnekte olmaması biraz daha da kötü olmuş diyebilirim. Yine de alt linkler kullanmayan birilerinin işine yarar diye paylaşmak istedim. Hem Css3 tarzı pek örnk bulunmuyor her yerde. Olanları da ihtiyacımızı karşılamakta bazen bir dilim eksik kalabiliyor. Bir zamanlar internette iyi veya kötü bütün örnekleri elimin altında tutardm sırf bazen kendi başıma çabalamak ve bir şeyler yapmak için.

Başlıklarda text-shadow, buton çerçevelerine border-radius + box shadow be butonların renginde de linear-gradient kullanılmış. Son olarak ta mouse üzeirne geldiğinde hafifçe renk değiştirme olayında da jQuery fadeIn ve FadeOut kullanılmış. Aslında transitions (geçişler) kullanılarak ta yapılabilirdi. Maksat biraz değişiklik olsun. Hem ne kadar çok özellik olursa bilmeyen arkadaşlarımızın işine daha çok yarayacak diye düşünüyorum.

Kullanım

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

Css :

<link rel="stylesheet" type="text/css" media="all" href="stil.css" />

 Eğer  demodaki gibi jQuery ile beraber kullanmak isterseniz aşağıdaki kodlarıda ekleyin. Butonlara fade  efekti  (yavaşça renk değiştirme) sağlayacaktır.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<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 eklemeniz 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 class="secili"><a href="#">Wordpress</a></li>
	<li><a href="#">Tutorial</a></li>
</div>

class”secili” kodunu ekleyeceğiniz  buton mouse  üzerindeymiş gibi  bir görüntüye  sahip.  Bu tür menülerle mutlaka karşılaşmışsınızdır. Eğer  nasıl kullanıldığını bilmiyorsanız  burada benzer  bir menüde  kullanımı hakkında açıklamada  bulundum. Okuyup inceleyebilirsiniz.