Beatiful horizontal navigation with :active selector

Eğer  dikkat etmişseniz  mutlaka karşılaşmışsınızdır. Bazı websitelerinde kategori linkine tıklayıp kategori sayfası açıldığında tıklamış  olduğunuz kategori linkinin arka plan rengi diğer linklere göre farklı renkte olur. Aynı hover dediğimiz mouse üzerine geldiğinde renk değiştiren butonlar gibi. Bunun  için .örnekDiv:hover özelliğini kullanırız. Tıklandığında linkin renginin değişmesini istiyorsak eğer hover yerine .örnekDiv:active  özelliğini kullanmamız gerek. Buradaki Css3 üst menü örneğimiz de aynı mantıkla hazırlanmış. Renginin değişik olmasını istediğiniz linkin içine class=”active” eklediğiniz zaman linkin arkaplanı yazı şekli efektleri Cssde activeye verdiğiniz değerler ile eşleşir ve active eklediğiniz link diğer linklerden farklı görünür.  Başka birşeyde yazabilirsiniz bunun yerine. Ama tıklandığında renginin değişik görünmesini istiyorsanız .örnekDiv:active olarak kullanmanız gerek.

Demo sayfasının  boyutu  çok küçük olduğu  için sayfalar  arası  geçiş  ajax  tab

görünümündedir bu sizi aldatmasın. Ajax tab değildir. Büyük boyutlu  sayfalarda  daha  iyi farkedebilirsiniz  ama şimdiki  demomuzda sayfalar arası geçiş biraz hızlı oluyor.

Kullanım

• Head etiketleri arasıa eklemeniz gereken bölüm.

Css  stil  dosyasının  url adresi : 

<link rel="stylesheet" href="./style.css" type="text/css" />

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

Html : 

<h1 class="page-title">Clean CSS3 Navigation Bar</h1>
 <!--To get the navigation bar, copy only the unordered list (ul)-->
  <ul id="nav-bar">
			<li><a href="#" class="active">Anasayfa</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">jQuery</a></li>
			<li><a href="#">Css3</a></li>
			<li><a href="#">Wordpress</a></li>
		</ul>
	</div>

 Class=”active” Kullanımı

Html  içerisindeki  kodlara  dikkat ederseniz clas=”active” yazısını  görebilirsiniz. Active  tıklanmış olan linkin  seçili  halde  durmasını  sağlıyor.  Burada önemli olan  menüyü  eklediğiniz  sayfaların tamamında  sayfa linkinin yanına class=”active”  özelliğini eklemeniz  gerekmekte.

• Anasayfa menü html kodu : 

  <ul id="nav-bar">
			<li><a href="index.html" class="active">Anasayfa</a></li>
			<li><a href="1.html">Photoshop</a></li>
			<li><a href="2.html">jQuery</a></li>
			<li><a href="3.html">Css3</a></li>
			<li><a href="4.html">Wordpress</a></li>
		</ul>
	</div>

• 2. sayfa menü kodu :

  <ul id="nav-bar">
			<li><a href="index.html">Anasayfa</a></li>
			<li><a href="1.html" class="active">Photoshop</a></li>
			<li><a href="2.html">jQuery</a></li>
			<li><a href="3.html">Css3</a></li>
			<li><a href="4.html">Wordpress</a></li>
		</ul>
	</div>

Sanırım bu iki örnek  herşeyi  anlatıyor.