iceblue-dizayn / WEB TASARIM
  Navigasyon Yukarı
 

 


Yukardaki Navigasyon Yapimi


navi oben

Asagidaki 3 Adimlarin anlami nedir?

  • 1 Tane DIV Alani yapiyoruz
  • DIV- Alanini yukardaki Baslik Bölümüne pozisyonluyoruz.
  • DIV´in 4 Tane daha DIV- Alani var...
  • O 4 Tane DIV´in icine istege göre Sayfa Linklerini yaziyoruz.
  • simdi diger Adimlara bakalim :


1. Adim :

  • Ilköne CSS- Komutlarini "Navi yukari" icin yaziyoruz
  • böylece DIV- Alanlirinin görünüsü degisiyor (Genislik / Renk / Cerceve v.s.)
  • "Tasarim üzerindeki yazi" Alanina yaziyoruz.
  • ve bu komuttan ÖNCE --> </style>


/* Menu-Alani icin Menu */
#Menu_Box {
  width: 650px; /* Genislik  */
  position: absolute; 
  left: 50%; /* = DEGISTIRMEYIN ! */
  margin-left: -304px; /* SOLA + SAGA kaydirma */
  margin-top: 190px; /* YUKARI + USAGI kaydirma */
  overflow: hidden;}

/* 4 Tane DIV- Alani */		
#link_1, #link_2, #link_3, #link_4  {
  float: left;  /* Dugmeler yanyana(button) */
  text-align: center;
  margin-right: 8px;   /* Dugmeler arasindaki Mesafe */
  overflow: hidden; }

/* 4 Linkin Görünüsü */
#link_1 a, #link_2 a, #link_3 a, #link_4 a {
  display: block; /* = yönlendirme Alani dolduruyor */
  width: 148px; /* = Dugmenin genisligi */
  height: 20px; /* = Dugmenin yuksekligi */
  line-height:20px; /* = yukseklik Alani */
  margin-top: 30px; /* = Hove efekti kullanilinca, LAZIM */
  color: #cccccc;  /* = Link Rengi */
  font-size: 14px;  /* = Link Metin Buyuklugu */
  font-family: arial; /* = Link Metin Cesidi */
  text-decoration: none; /* = Link´in altini cizme */
  background-color: #555555;  /* = Arkaplan Rengi Link */
  border: 1px solid #bbbbbb;  /* = Cerceve */
  -moz-border-radius-topleft: 10px; /* = sol taraftaki  kosenin yuvarlanmasi */
  -moz-border-radius-topright: 10px; /* = sag taraftaki  kosenin yuvarlanmasi */
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;}
		
/* Link icin Hover Efekti */
#link_1 a:hover, #link_2 a:hover, #link_3 a:hover, #link_4 a:hover {
  font-size:15px;
  margin-top: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  font-weight: bold;
  background-color: #6f8ac4; }



Lütfen dikkat ediniz:

Eger "Tasarim üzerindeki yazi" Alanina hala CSS- Kodlari eklenmediyse: 

  • o zaman KOD´dan önce bunu yaz: <style type="text/css"><!--
  • ve KODdan sonra: --></style>
  • böylece Tarayiciniz CSS- Komutlarini anliyor ve uyguluyor!
  • sonradan eklenecek olan diger CSS- Kodlari --> </style> bundan önce yazilacak!




2. Adim:


  • simdi daha Tasarimda bir degisiklik görmuyoruz
  • Sadece DIV´lerin görünüsünü belirledik.

  • simdi DIV- Alanlari ekleyelim.
  • "Tasarim üzerindeki yazi"  Alanina eklenecek !       
  • cünkü bir HTML oldugundan dolayi --> </style> bundan SONRA yazilacak 

<div id="Menu_Box">
<div id="link_1"> <a href="BURAYA LINKIN">METIN</a> </div>
<div id="link_2"> <a href="BURAYA LINKIN">METIN</a> </div>
<div id="link_3"> <a href="BURAYA LINKIN">METIN</a> </div>
<div id="link_4"> <a href="BURAYA LINKIN">METIN</a> </div>
</div>


"BURAYA LINKIN " olan yere acilacak Sayfanin Linkini yazmaniz gerekiyor.
Örnek:
 Bu Sitenin Linkini :  http://iceblue-dizayn.tr.gg/ yerede Sayfanizin Ismini yazacaksiniz!

"METIN" olan yerede, acilacak Sayfanin Ismini yaziyoruz.
Örnek: Bu Sayfanin Ismi " Navigasyon Yukari"...



3. Adim : Navigasyonu kaydirmak




1. Kodda bulunan koda bakiniz #Menu_Box {

  • margin-top: Bir tane bundan var
  • margin-left: Bir tanede bundan var

SOLA / SAGA Kaydirma ?  margin-left: ´ yaninda bulunan Sayiyi yükseltin / kücültün 
Daha yüksege / Derine Kaydirma? =  margin-top ´yaninda bulundugu Sayiyi yükseltin / kücültün. 




Yukari Navigasyon icin tamamlama :


  •  Acilacak Sayfanin Dügmesini Renkli olarak ön Plana cikartalim:

"Yukari Navigasyon" da yönlendirilmis Sayfalarinin icine  a:hover ´nin Iceriginde bulunan CSS- Komutlarini yazmamiz lazim!
  • "Sayfalarimi degistir"
  • Yukarida yönlendirilmis olan ilk Sayfayi seciniz
  • simdi Sayfa düzenlenmek icin acik
  • Yukarida Editörün yukarisindan bulunan "Quellcode"´a tiklayin
  • Sayfan Simdi HTML Görünüsünde
  • Sayfa Iceriginin en yukarisina bunlari yazalim :

<style type="text/css">
<!--

#link_1 a {
  font-size: 15px!important;
  background-color: #800000!important;
  margin-top: 20px!important;
  padding-top: 5px!important;
  padding-bottom: 5px!important;
  font-weight: bold!important;
  color: #FFFFFF!important; }
-->
</style>


  • #link_2 a  ,  #link_1 in Icerigini aliyor
  • #link_3 a  ,  #link_1 in Icerigini aliyor
  • #link_4 a  ,  #link_1 in Icerigini aliyor

 
   
  Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol