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.