Dikey Gezinme

Bu bölümde, web sitesine dikey gezinme veya menü öğelerinin nasıl ekleneceğini öğreneceğiz. Adım adım gidelim.

Step 1 - Menü öğeleri veya dikey gezinme oluşturmak için aşağıdaki kodu şuraya ekleyelim: <div id = “left-nav”> menü öğelerinin listesini içeren index.html dosyasında.

<div id = "left-nav"> 
   <p>Site Navigation</p> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

Step 2- Üst menünüz için basit bir madde imli listedir. Bir köprü oluşturmak için şuraya gidin:design view veya code view.

Step 3 - Köprü olarak kullanmak istediğiniz öğeyi seçin ve Ctrl + K tuşlarına basın.

Step 4- Ekran İpucu… düğmesini tıklayın. İstediğiniz metni girinscreentip ve Tamam'ı tıklayın.

Step 5 - içinde Text to display alan, girin Home index.html dosyasını seçin ve ardından Tamam'ı tıklayın.

Bu aşamada, index.html sayfamız aşağıdaki gibi görünür -

Step 6 - Aşağıdaki kodda gösterildiği gibi, diğer menü öğeleri için daha fazla köprü ekleyin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
      <style type = "text/css"></style>
      <link href = "sample.css" rel = "stylesheet" type = "text/css" />
   </head>

   <body>
      <div id = "container">
         <div id = "header"></div>
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul>
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
            </ul> 
         </div> 
         <div id = "main-content"></div> 
         <div id = "footer"></div> 
      </div> 
   </body>  
</html>

Step 7- Üst gezinme stilini ayarlamak için Stilleri Yönet paneline gidin. Sağ tıklayın#left-nav ve Stili Değiştir… öğesini seçin.

Step 8 - Yazı tipi boyutu alanına 0,9 değerini girin ve şunu seçin: em yazı tipi boyutunun yanındaki açılır listeden ve Kutu kategorisine gidin.

Step 9- "Hepsi için aynı" dolgusunu işaretleyin ve üst alana 5 girin ve Tamam'ı tıklayın. Stilleri Uygula panelinden Yeni Stil… öğesini tıklayın.

Step 10 - Giriş #left-nav ulSeçici alanında. "Tanımla" açılır menüsünden Mevcut stil sayfasını seçin ve Liste kategorisinde, liste stili türü alanından hiçbirini seçin ve Tamam'a tıklayın.

Step 11 - Yine, Apply Styles panel, tıklayın New Style. "Hepsi için aynı" dolgusunun işaretini kaldırın. Alt alana 0,2 girin ve Tamam'ı tıklayın.

Step 12 - Giriş #left-nav ul li Seçici alanında ve "Tanımla" açılır menüsünden Mevcut stil sayfasını seçin ve Kutu kategorisine gidin.

Step 13 - Stilleri Uygula paneline gidin ve Yeni Stil'i tıklayın.

Step 14 - Giriş #left-nav ul li a Seçici alanında ve "Tanımla" açılır menüsünden Mevcut stil sayfasını seçin ve yazı tipi rengi olarak beyazı seçin.

Step 15- Arka Plan kategorisine gidin. Arka plan rengi olarak rengi seçin

Step 16 - Şuraya git Box kategori ve dolgu değerlerini ayarlayın.

Step 17 - Şuraya git Layoutkategori. Seçinizblock -den display açılır ve Tamam'ı tıklayın.

Step 18- Şimdi Stilleri Uygula paneline tekrar gidelim ve Yeni Stil'i tıklayalım. Giriş#left-nav ul li a:hoverSeçici alanında ve "Tanımla" açılır menüsünden Mevcut stil sayfasını seçin. Yazı tipi rengi olarak siyahı seçin.

Step 19- Şimdi Arka Plan kategorisine gidin. Fare menü öğesinin üzerine geldiğinde menü seçeneğiniz için arka plan rengini seçin ve Tamam'ı tıklayın.

Step 20 - Nasıl göründüğünü kontrol etmek için, Dosya menüsüne gidin ve tarayıcınızda Önizleme'yi seçin.

Fareyi herhangi bir menü öğesinin üzerine getirdiğinizde, arka planını ve yazı tipi rengini değiştirecektir.