Expression Web menus using CSS

Part 4

Styling the vertical menu using CSS

In our previous Expression Web tutorial, we learnt how to style the Horizontal CSS menu, using an unordered list and some CSS. Now we need to look at the left hand side navigation links.

Your page should be looking like the screen shot here. You will recall that we created a menu using an unordered list and some CSS. We will style the vertical navigation in much the same way as the horizontal but with a couple of modifications. Open your practice site and the masterpage.

Click inside the #left_col <div>

From the tool bar select bulleted list

As you can see a unordered list has been placed on your page.

Type in the following text as an unordered/bulleted list.

Link 6
Link 7
Link 8
Link 9
Link 10

Now we will turn the text into Links

Highlight the Link 6 text and the use the hyperlink icon to create a link.

It does not matter where the link goes, we are only interested in the hyperlink. In this case, i have selected a link from my recently visited sites. But it could have been any link. You can select pages from within your site or outside of your site.

Repeat for all of the text link text.

We now have an unordered list of links (CSS menu)

Click on new style in the manage styles task pane

Delete the selector text

Type the following into the selector box

#left_col ul

As we have used a list, we want to get rid of the bullets/markers

Select list from the Category list

In the list style type dropdown, select none

Now select Position from the Category list

Set the width to 100%

Don't forget to select % from the size dropdown

Select Layout from the Category list

Click the dropdown beside display and select Block

Select Box from the Category list

Set the margin to 0(zero)px and do the same for padding

Click OK

Your page should look like the screenshot below.

Styling the list

Select new style from the manage styles task pane

Delete the selector text

Type the following into the selector box

#left_col li

Don't forget to Define in: Existing style sheet and make sure masterstyles.css is selectd!

Select layout from the Category list

Click on display and select Block

Select Box from the category list

Set the margin to be 0(zero)px

Set padding to 0(zero)px

Select border from the Category list

Border style set to solid

Border width set to 1px

Type the following code into the border colour box

#FFFFFF

Select Background from the Category list

For Background colour, type in the following code

#C99981

Your page should look like the screen shot below.

Click on New Style in the manage styles task pane

Delete the selector text and replace it with the following.

#left_col a

This is the start of the link styling

In the color box, type the following code

#FF6600

We don't want our links underlined so select None from the text decoration list

Select layout from the Category list

Click on the display dropdown and select Block

Select Box from the Category list

Set the padding to be 1px

Now select Border from the Category list

Set the border style to be Solid

Set the border width to be 1px

Type the following code into the border color

#C99981

Select Block from the Category list

Click on the Text-align dropdown and selet center

Select Box (again) from the Category list

In the margin section, deselect th Same for all check box

Set the right margin to be 20px

Set the left margin to 20px

Click on Font (again) from the Category list

Set the font size to be 100%

Select background from the category list

Type the folloowing code into the Background color box

#FAE687

That about it for Links...
Now we are going to style the hover effect.

Not long to go now!

Your page should look like the one below.

Click on New Style from the manage styles task pane.

Delete the Selector text

Type the following into the Selector text box

#left_col a:hover

Click on Color and type in the following

#FFFFFF

Again we don't want the text to be underlined so click on none in the Text decoration area.

Select Border from the Category list

Click on the Border Style dropdown and select Solid

In the border width type 1 (one) make sure px is selected.

In border color, type in the following

#C98080

Make sure Same for all is checked for Style - width and color

Select Box from the Category list

Deselect same for all in the Margin section

In the right margin box type

20

make sure px is selected.

Click ok and preview your page in Expression Web

Your page should look like this.

This is how the page looks in Internet Explorer.

Roll your mouse over the links to check that all is working as intended. (Rollover the links when previewing your own page in IE

Its always good to check the design in other browsers too!

You should notice that when rolled over, the text of the links will change colour?

This is ok but we will make the hover state a little more dramatic.

In the manage styles task pane, select the manage style tab and find the following code

#left_col a:hover

Right click on this style and select Modify style

The style pop up box appears

Select Background from the Category list

Type the following into the Background color box

#C98080

That's it we are done! You page should look like this in Internet explorer.