Microsoft Expression web tutorial
In this chapter, we will learn how to add vertical navigation or menu items to the website. Let's take it step by step.
Step 1 - To create menu items or vertical navigation, let's add the following code in in the index.html file which contains the list menu items.
Step 2 - This is a simple bulleted list for your main menu. To create a hyperlink, go to the design view or code view .
Step 3 - Select the element you want to use as hyperlink element and press Ctrl + K.
Step 4 - Click on the Tooltip… button. Enter the text desired as screentip and click OK.
Step 5 - In the Text to display field, enter Home and select the file index. html and click OK.
At this point, our index.html page looks like this -
Step 6 - Add more hyperlinks for other menu items as shown ins the following code.
< content = " text / html; charset = utf-8 "http-equiv = " Content-Type "/> < href="">
Step 7 - To set the style of the top navigation, go to the Manage styles. Right click on #lef t-nav and select MBedit the style…
Step 8 - Enterset to 0.9 in the font size field and select em from the drop-down list next to and go to the Box category.
Step 9 - Check the 'Same for all ' fill and enter 5 in the upper field and click OK. In the Apply Styles panel, click New style…
Step 10 - Enter # left-nav ul in the Chooser field. Select the existing style sheet in the "Set in" drop-down list and in the List category, do not select any in the List type field and click OK.
Step 11 - Again, in the Apply Styles panel, click on New Style . Uncheck the fill " Same for all. ”Enter 0.2 in the bottom field and click OK.
Step 12 - Enter # left-nav ul li in the Chooser field and select the stylesheet existing in the "Define in drop-down list" field and go to the Box category.
Step 13 - Go to the Apply Styles panel and click New Style.
Step 14 - Enter # left-nav ul li a in the Chooser field and select the existing stylesheet in the der list.oulante "Set in " and select white as the font color.
Step 15 - Go to selfish background chat. Select color as background color.
Step 16 - Go to to the Box category and set the padding values.
Step 17 - Go to Layout category. Select block from the display drop-down list > and click OK.
Step 18 - Now back to the Apply Styles panel and click on New Style. Enter #le ft-nav ul li a: hover in the Chooser field and select the existing style sheet from the “Set in” drop-down list. Select black as the color for font.
Step 19 - Now go to the Background category. Select the background color of your menu option when the mouse hovers over the menu item and click OK.
Step 20 - To check how it looks, go to the File menu and select Preview in your browser.
When you hover the mouse over any menu item, it will change its background and font color.