CSS Horizontal Menus

In this tutorial we will create a simple menu with rounded corners using CSS 3. This menu will display with rounded corners without graphics in browsers that support CSS 3 but with square corners in older browsers that only support CSS 2-2.1. That will be IE 9+, FF 4+, Safari & Chrome. You may use either an HTML 5 or XHTML doctype for this menu. After we have rounded corners displaying using nothing more than the tools built into Expression Web as a final step we’ll add a CSS 3 gradient to give a glass effect in those same CSS 3 browsers.

I’m starting with content generated at Fillerama using the Star Wars theme. For the purposes of this tutorial I will have all the style code in head section but you should be move all the CSS to an external stylesheet in a production site.

To work along download the raw HTML and work along.

CSS 3 Horizontal Menu Code to start with the index.txt (4.32 kb)

Save this page in a locally defined Expression Web site as css3-horizontal.html (or other name of your choice with the .html extension.) Before we begin take a look at the #nav div and you will see:

Preview the file you downloaded and it should appear as shown on the right. css3-rounded-1_thumb

In order to keep the links working without adding extra pages I used links to anchors within the text. These were created using Expression Web’s Insert > Bookmark menu to create the anchors and the normal hyperlink methods for in page links. Whether you are using in page anchors or hyperlinks to other pages the process of styling the menu is the same. Using an unordered list for menus is considered to be best practices for a modern semantic website so that should the visitor be using a screen reader or older browser/mobile device that doesn’t fully support CSS the page will still have a recognizable structure with semantic meaning. (Note the #nav is a placeholder at this point.)

<div id="nav">
<ul>
<li><a href="#sith">Sith Lords</a> </li>
<li><a href="#clone">Clone Wars</a> </li>
<li><a href="#empire">Empire Strikes Back</a> </li>
<li><a href="#revenge">Revenge of the Sith</a></li>
</ul>
</div>

Step 1 Creating the links container

Since we will be creating a horizontal menu the first thing we want to do is to take the vertical format of a list and convert it to a horizontal format. I am going to use the simplest method to display the list items inline. You will notice from the code above that our menu is in a div with the ID of “nav”. This is so that we can use inheritance to affect only the hyperlinks in this section of the page without changing the appearance of the links anywhere else. This makes it very easy to maintain a consistent look and feel within each section of the page.

#nav li {
list-style-type: none;
display: inline;
}

Your menu should now look like this:

css3-rounded-2_thumb8

As you can see the links are now inline but using default styling since we have not yet styled hyperlinks in our page. The next thing we are going to do is remove the underline and add border to each link. So far we are using CSS that every modern browser should understand and this is the view that will be seen in IE 8 and below.

#nav a {
padding: .25em .75em;
border: thin solid #2B00AE;
color: #2B00AE;
text-decoration: none;
}

css3-rounded-3_thumb1

Step 2 Rounded Corners

If you are using Expression Web 4 creating rounded corners for browsers that follow the W3C standard syntax for CSS 3 is easy to do using the Modify Styles dialog box. If you are using an older version you may need to add the border-radius code directly in code view – see the completed page’s source code for the syntax. Remember that if you have a retail copy of Expression Web 3 (full or upgrade) you get a free upgrade to Expression Web 4 and you can use them side by side.

  1. css3-rounded-4_thumb1From the Apply Styles Panel right click on the “#nav a” and select “Modify Styles” from the dropdown.
  2. The Modify Styles dialog box will open with the existing styles for “nav a” displayed. From the left side select “Border Radius” from which will allow you to set the amount of curve to be applied. You can choose to have the same amount on each corner by side or create tabs by applying the curve radius to only some of the side. In this tutorial I am using 12px for each side. You can experiment to determine what will best suit your menu by playing with the numbers.
    css3-rounded-5_thumb3
    Note: the preview window will not show you the rounded corners and neither will the design surface in Expression Web. So to preview how the radius you have specified looks you will need to save the style. Then save the page and preview in the browser of your choice. I am currently using IE 9 as my preview default.
  3. Preview in a browser that supports CSS 3 to see, in this case there is no significant display difference between Firefox, IE Opera, Safari or Chrome:
    css3-rounded-6_thumb1
  4. I would suggest that you play with padding between the link and the border and you may also want to add margin: 0 .5em or some other amount to control the space between the links.
  5. Before we go any further let’s add a little interactivity by putting a background color on the links and a rollover effect using the CSS pseudo class of :hover.  First we’ll add “background-color: #cfbaff;” to our #nav a definition which you can do either using the dialog box as above or by clicking inside one of the links in design view then selecting #nav a from the list of styles in the CSS Properties panel (by default bottom left of the screen.)
  6. Then we create a new class of #nav a:hover. 
    #nav a:hover {
    background-color: #EDE6FF;
    }

This is the limit of what we can do using the native CSS tools in Expression Web. To add a gradient background color we now have to venture into writing the CSS ourselves. In an better world it would be simple enough to create a cross browser gradient for modern CSS 3 gradients however like many things when it comes to web design there is no consistency between browsers. We begin by setting a fallback for older browser of a solid image color by adding “background: #CFBAFF;” to our “#nav a” class. That results in the links looking like:

css3-rounded-7_thumb3
Older browsers that don’t support CSS 3

css3-rounded-8_thumb1
Firefox 15, IE 9, other CSS 3 compliant browsers.

Going A Step Beyond

You can stop here if you aren’t comfortable working directly in code but if you are going to create websites you should be able to work in code without breaking your page/site. Sadly, using W3C syntax does little or nothing to give us a gradient in most browsers. Which means that to get the glass effect we have to use vendor specific prefixes. So I used the Ultimate CSS Gradient Generator by Colorzilla The version I used claims support for IE 6-8 but I’ve never had luck using filters for those versions and figured that a nice solid background will suffice for those using older browsers.

I’ll mentioned that I encountered difficulties with getting the background color to show up on older browsers using the code generated by the Colorzilla Ultimate Gradient so I removed the filter that is supposed to be work in older versions of IE. Replacing it with conditional comment to reset IE 9+ to turn the filter off for the newer versions.  The resulting code can be seen by viewing the source code of the finished page.  For comparison purposes I’ve included screenshots in IE 9, Firefox 15, Safari 5 (mac), Opera & IE 6 below.

css3-rounded-ie9_thumb2 
Internet Explorer 9

css3-rounded-ff_thumb2
Firefox 15

safari-css3_thumb2
Safari Mac – Chrome

css3-rounded-op_thumb2
Opera

css3-rounded-ie6_thumb2
Internet Explorer 6

If you absolutely must have rounded corners in Internet Explorer 6-8 take a look at Progressive Internet Explorer's Solution and their CSS Gradients approach. Another approach is to use jQuery or one of the other libraries that fill in gaps with Internet Explorer support for CSS 3 and HTML like Modernizr.

What next?

Once you are happy with your menu’s appearance you should move the CSS from the head section of the page to an external page so that you only have to change the styles in one place to have every page on your site updated.

If you have any questions about this tutorial you please ask them in the support forum.

 



Outstanding Hosting