垂直導航

在本節中，我們將學習如何向網站新增垂直導航或選單項。讓我們一步一步來。

步驟 1 - 要建立選單項或垂直導航，讓我們在 index.html 檔案中的<div id = “left-nav”>中新增以下程式碼，其中包含選單項列表。

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

步驟 2 - 這是一個用於頂部選單的簡單專案符號列表。要建立超連結，請轉到設計檢視或程式碼檢視。

步驟 3 - 選擇要用作超連結的專案，然後按 Ctrl + K。

步驟 4 - 點選螢幕提示…按鈕。輸入您想要作為螢幕提示的文字，然後點選確定。

步驟 5 - 在要顯示的文字欄位中，輸入首頁並選擇 index.html 檔案，然後點選確定。

在此階段，我們的 index.html 頁面如下所示：

步驟 6 - 為其他選單項新增更多超連結，如下面的程式碼所示。

<!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>

步驟 7 - 要設定頂部導航的樣式，請轉到“管理樣式”面板。右鍵單擊#left-nav並選擇“修改樣式…”。