iceblue-dizayn / WEB TASARIM - Navigasyon Yukarı

Yukardaki Navigasyon Yapimi

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 :

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