Expression Web Tutorials

 Expression Web Tutorial:  Navigation Menus

Make a Horizontal Navigation Menu with CSS

One of the most frequently asked questions is how to create a navigation menu in Expression Web.  Be it horizontal or vertical.

So here is the help you've been looking for.  I also suggest viewing the recent video tutorial updates.  One set of the videos shows you how to style a horizontal navigation using a list.  The other video teaches you how  to make a vertical menu.

Assume we are working with the following layout:

layout

1.  Make a List  <ul> & Style the List

We must first create an unordered list, then we need to style the list with CSS.  An unordered list will create a bulleted list by default.  So we use CSS to remove the bullets and style the hyperlinks, as well as make nav buttons (optional).

 

 

  1. How to apply <ul> tag Place your cursor in the #top-nav div and type in "Home" as your first navigation link to be. 
  2. Then highlight "Home". 
  3. Go to the tool bar at the top left and right begfore the font format, click on the arrow and choose "unordered list" <ul>.   
  4. Click on the thumbnail to see larger image.  ----->

 

The HTML tags that will create a  bulleted list:  <ul></ul>
Each item in the list, called List Item, is wrapped in the following HTML tags:  <li></li>

<ul> and <li> provide the 'hooks' for our CSS Styles.  We only need 2 CSS styles to modify the entire list and make it horizontal.  There is no need to style each individual item in your menu.

Now place your cursor at the end of the word "home" and press enter.  Type in the next word that will be a link in your navigation. 

It's tough to insert all your items at this point.  Just enter 2 and then style the ul and li.

Then you can more easily add more links.  Each item/link will receive the existing styles automatically.

Style the Unordered List <ul>

  1. Click new style.  [located in the Manage Styles Task Pane]
  2. Make the selector #top_nav ul. 
  3. Define in: Existing Style Sheet
  4. Check the box to apply style to current selection.
  5. URL: choose you external style sheet from the drop down menu.
  6. Then click on the List Category.
  7. Look for list-type-style: choose none.  This removes the bullets. 
  8. Then choose Box category 
  9. Place 0px for margins and padding.   This removes the default margins/padding.
  10. Click "OK".

#top-nav ul {
    list-style-type: none;
    margin: 0;
}

 

Style the List Items <li>

  1. Click new style.
  2. Make the Selector #top-nav li
  3. Define in: Exisitng S. S.
  4. Check the box
  5. URL: external style sheet
  6. Now click on the Layout Category
  7. Choose float: left   <----- this makes the list become horizontal.
  8. Still in the Layout Category:  overflow: hidden
  9. Position Category:  width:110px
  10. Block Category:   line-height: 30px ,  text-align: center
  11. Box Category:  margin: 0 for all, padding: 0 for all
  12. Background Category:  choose a background color and/or background-image to style the newly created buttons.  You can also add borders, margin, font color, etc. 

#top-nav li {
    float: left;
    overflow:hidden;  
    line-height: 30px;
    width: 110px;   
    line-height: 30px;   
    margin:0;
    padding:0;
    font-family: Myriad Pro,  Verdana;   
    color: #ffffff;   
    background-color: #222;   
    text-align: center   
    border: ridge 2px #000;
}

 

Next, Create the Hyperlinks and Style the Hyperlinks with CSS.  Create a hover effect for all hyperlinks using only CSS.   Watch the Video.