Horizontal Navigation

”;

In this chapter, we will learn how to add horizontal navigation or menu items to the website.

Step 1 − To create menu items or horizontal navigation, let’s add the following code in <div id = “top-nav”> in the index.html file, which contains the list of menu items.

<div id = "top-nav"> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

Step 2 − It is a simple bulleted list for the top menu. To create a hyperlink, go to the design view or code view.

Design View

Step 3 − Select the item that you want to use as the hyperlink and press Ctrl + K.

Hiperlink

Step 4 − Click on the ScreenTip… button.

ScreenTip

Step 5 − Enter the text you want as the screen tip and click OK.

Insert Hiperlink

Step 6 − In the Text to display field, enter Home and select the index.html file and then click OK.

Text to display

Step 7 − Similarly, add hyperlinks for other menu items, as shown in the following code.

<!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"> </div> 
         <div id = "main-content"> </div> 
         <div id = "footer"> </div> 
      </div> 
   </body>  
</html>

Step 8 − To set the style for top navigation, go to the Manage Styles panel.

Manage Styles

Step 9 − Right-click on “#top-nav” and select Modify Style. Select the ”Border” Category and change the width to thin.

top-nav

Step 10 − Select the Box category and uncheck padding ‘Same for all’ and enter 10 in the top and bottom fields.

Box

Step 11 − Go to the Position category.

Position Category

Step 12 − Remove the 50 from the height field and click OK. From the Apply Styles panel, click New Style…

Height Field

Step 13 − Enter #top-nav ul in the Selector field and select the Existing style sheet from the “Define in” dropdown. In the Block category, select center from the test-align field and go to the List category.

top-nav ul

Step 14 − Select none from the list-style-type field and click OK.

list-style-type

Step 15 − Again, from the Apply Styles panel, click New Style… Enter #top-nav ul li in the Selector field. Then select the Existing style-sheet from the “Define in” dropdown and go to the Layout category.

Styles Apply

Step 16 − Select inline from the display field and click OK.

Inline

Step 17 − Go to Apply Styles panel, click New Style… Enter #top-nav ul li a in the Selector field and select the Existing style sheet from the “Define in” dropdown and select white as the font color.

top-nav ul li

Step 18 − Go to the Background category.

Background Category

Step 19 − Select green as the background color and go to the Box category.

Select green

Step 20 − Set the padding values and click OK.

Step 21 − Now let’s go to the Apply Styles panel again and click New Style. Enter #topnav ul li a:hover in the Selector field and select the Existing style sheet from the “Define in” dropdown and select black as the font color.

Padding Values