![Microsoft Expression Web Tutorial](/microsoft_expression_web/images/microsoft-expression-web-mini-logo.jpg)
- Microsoft Expression Web Tutorial
- MS Expression Web - Home
- MS Expression Web - Overview
- Environment Setup
- MS Expression Web - New Website
- Blank Web Page
- Webpage Layout
- MS Expression Web - HTML Layout
- Horizontal Navigation
- Vertical Navigation
- MS Expression Web - Validate Pages
- Dynamic Web Template
- MS Expression Web - Search Page
- MS Expression Web - Images
- MS Expression Web - Hyperlinks
- MS Expression Web - Video
- SQL Datasource
- MS Expression Web - MS Word
- MS Expression Web - Gridview
- MS Expression Web - Master Pages
- MS Expression Web - Data Table
- MS Expression Web - Publish
- Backup Website
- MS Expression Web - Add-Ins
- MS Expression Web Resources
- MS Expression Web - Quick Guide
- MS Expression Web - Resources
- MS Expression Web - Discussion
Vertical Navigation
In this chapter, we will learn how to add vertical navigation or menu items to the website. Let’s go step by step.
Step 1 − To create menu items or vertical navigation, let’s add the following code in <div id = “left-nav”> in the index.html file which contains the list of menu items.
<div id = "left-nav"> <p>Site Navigation</p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div>
Step 2 − It is a simple bulleted list for your top menu. To create a hyperlink, go to the design view or code view.
![Bulleted List](/microsoft_expression_web/images/bulleted_list.jpg)
Step 3 − Select the item that you want to use as the hyperlink and press Ctrl + K.
![Hiperlink](/microsoft_expression_web/images/hiperlink.jpg)
Step 4 − Click the ScreenTip… button. Enter the text you want as the screentip and click OK.
![ScreenTip](/microsoft_expression_web/images/screentip.jpg)
Step 5 − In the Text to display field, enter Home and select the index.html file and then click OK.
![Insert Hiperlink](/microsoft_expression_web/images/insert_hiperlink.jpg)
At this stage, our index.html page looks as follows −
![Html Page Look](/microsoft_expression_web/images/html_page_look.jpg)
Step 6 − Add more 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"> <!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 − To set the style for top navigation, go to the Manage Styles panel. Right-click on #left-nav and select Modify Style…
![Modify Style](/microsoft_expression_web/images/modify_style.jpg)
Step 8 − Enter the value 0.9 in font-size field and select em from the dropdown list next to the font-size and go to the Box category.
![Select em](/microsoft_expression_web/images/select_em.jpg)
Step 9 − Check the padding ‘Same for all’ and enter 5 in the top field and click Ok. From the Apply Styles panel, click New Style…
![Apply Styles Panel](/microsoft_expression_web/images/apply_styles_panel.jpg)
Step 10 − Enter #left-nav ul in the Selector field. Select the Existing style-sheet from the “Define in” dropdown and in the List category, select none from the list-style-type field and click OK.
![left-nav ul](/microsoft_expression_web/images/leftnav_ul.jpg)
Step 11 − Again, from the Apply Styles panel, click New Style. Uncheck the padding ‘Same for all’. Enter 0.2 in the bottom field and click OK.
![New Styles](/microsoft_expression_web/images/new_styles.jpg)
Step 12 − Enter #left-nav ul li in the Selector field and select the Existing style sheet from the “Define in” dropdown and go to the Box category.
![left-nav ul li](/microsoft_expression_web/images/leftnav_ul_li.jpg)
Step 13 − Go to Apply Styles panel and click New Style.
![Go to Apply styles](/microsoft_expression_web/images/go_to_apply_styles.jpg)
Step 14 − Enter #left-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.
![left-nav ul li a](/microsoft_expression_web/images/leftnav_ul_li_a.jpg)
Step 15 − Go to the Background category. Select the color as the background color
![Background](/microsoft_expression_web/images/bg.jpg)
Step 16 − Go to the Box category and set the padding values.
![Box Values](/microsoft_expression_web/images/box_values.jpg)
Step 17 − Go to the Layout category. Select block from the display dropdown and click OK.
![Select Block](/microsoft_expression_web/images/select_block.jpg)
Step 18 − Now let’s go to Apply Styles panel again and click New Style. Enter #left-nav ul li a:hover in the Selector field and select the Existing style sheet from the “Define in” dropdown. Select black as the font color.
![Padding Values](/microsoft_expression_web/images/padding_values.jpg)
Step 19 − Now go to the Background category. Select the background color for your menu option when the mouse is hovering on the menu item and click OK.
![Menu Item](/microsoft_expression_web/images/menu_item.jpg)
Step 20 − To check how it is looks, go to the File menu and select Preview in your browser.
![File Menu](/microsoft_expression_web/images/file_menu.jpg)
When you hover the mouse on any menu item, it will change its background and font color.
To Continue Learning Please Login