Drop-Down ve şeffaf bir üst-menü tasarımı

Genel olarak baktığımzda tamamen Css kullanılarak hazırlanmış bir yatay üst menü örneği olarak görülelebilir olsa da işin içine biraz jQuery slide eklenmiş olan bir örnek. Bu çalışmada butonların arka plan rengi yok ve bu sayede web sitenin arka plan görüntüsü örneğin içinden görülebiliyor. Böylelikle her  çeşit tasarıma uyacak bir  örnek gibi düşünüyorum.  Belki mouse butonların üzerine geldiğinde değişen renk seçeneği uyumlu olmayabilir. Bunun dışında bir de açılır bölümün rengi de hoşunuza gitmeyebilir. Yine de stil dosyası bölümünden kendi web sitenize  göre renklerini değiştirebilirsiniz. Alt linklerin açılmasını ve kapanmasını  slideDown ve slideUp özelliği sağlıyor.

Anasayfa butonuna dikkat ederseniz sürekli rengi  aynı ve değişmezmiş gibi görünüyor. Aslında bu kimileri tarafından active diye adlandırılıyor.  Aslında active değil. Hover  bölümündeki kodların bir benzerini secili adlı dive ekledim. Bir çok sitede buna benzer çalışmalar görmüş olabilirsiniz. Tıklamış olduğunuz kategori butonunun arka plan rengi diğerlerine göre farklı bir renge sahiptir. Tek bir kategoriye göre uyarladığım için diğer linklere tıkladığınızda değişmez çünkü diğer linklerin sayfası yok. Kendi kategorilerinize uyarlamak isterseniz eğer her sayfa ile alakalı linkin li etiketleri arasına class=”secili” kodu eklemeniz gerek. Örneğin html kodlarına bakarsanız anasayfa linkinde aynı şekilde görebilirsiniz.

  Kullanım

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

Js ve stil dosyası adresleri :

<link rel="stylesheet" href="css/style.css" media="screen"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 JavaScript : 

<script type="text/javascript"> 
$(document).ready(function(){
	$("ul#menu li a").mouseover(function() { 
		$(this).parent().find("ul.acil").slideDown('fast').show(); 
		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.acil").slideUp('slow');
		});
	});
});
</script>

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

Html : 

<ul id="menu">
 <li class="secili"><a href="index.html">Anasayfa</a></li>
 <li><a href="#">Webmaster</a>
	<ul class="acil">
		<li><a href="#">Ajax</a></li>
		<li><a href="#">Script</a></li>
		<li><a href="#">Javascript</a></li>
		<li><a href="#">Html5</a></li>
		<li><a href="#">Yui</a></li>
	</ul>
</li>
 <li><a href="#">Wordpress</a>
 	<ul class="acil">
		<li><a href="#">Plugin</a></li>
		<li><a href="#">Widget</a></li>
		<li><a href="#">Theme</a></li>
	</ul>
 <li><a href="#">Script</a>
  	<ul class="acil">
		<li><a href="#">Php</a></li>
		<li><a href="#">Asp</a></li>
		<li><a href="#">Flash</a></li>
	</ul>
 </li>
 <li><a href="#">Photoshop</a></li>
 <li><a href="https://www.mintik.com/?p=10811">Tutorial</a></li>
</ul>

Tıklandığında  açılan kategori  butonu  gri  renkte  sabit  olarak kalıyor bir diğer  kategoriye geçince diğer kategori butonu  gri renge  geçiyor.  Aşağıdakikoda dikkate  ederseniz Anasayfa  butonuna  class=”secili” kodunu  eklediğimizi  göreceksiniz. Her  kategori için bunu  ayrı  ayrı eklemeniz gerekiyor.

Seçili buton kodu

 <li class="secili"><a href="index.html">Anasayfa</a></li>

 Normal buton kodu

 <li><a href="index.html">Anasayfa</a></li>