Scribd
Upload
26 views4 pages

The HTML: Different Menus

The document describes how to create a stylish CSS3 navigation menu using simple HTML and CSS code. The HTML uses the new HTML5 <nav> element to contain an unordered list of navigation links. The CSS styles the navigation with properties like floats, borders, gradients and shadows to create a clean and modern look. Browser support is ensured through progressive enhancement techniques.

Uploaded by

Jorge Chávez Cuentas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views4 pages

The HTML: Different Menus

The document describes how to create a stylish CSS3 navigation menu using simple HTML and CSS code. The HTML uses the new HTML5 <nav> element to contain an unordered list of navigation links. The CSS styles the navigation with properties like floats, borders, gradients and shadows to create a clean and modern look. Browser support is ensured through progressive enhancement techniques.

Uploaded by

Jorge Chávez Cuentas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

09 Oct 2011

We all try to be very creative when it comes to designing a website navigation. It's
a sure thing: a good looking navigation menu can really enhance your website.
I wrote before about how to create different menus and today you'll learn how to
create another stylish CSS3 navigation menu.

View demo

The HTML
The markup could not be simpler and includes also the new HTML5 nav element.
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Categories</a></li>
<li><a href="">About</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>

The CSS

The CSS lines below are easy to understand and I think there isn't too much to
explain:
nav {
display: block;
width: 100%;
overflow: hidden;
}
nav ul {
margin: 80px 0 20px 0;
padding: .7em;
float: left;
list-style: none;
background: #444;
background: rgba(0,0,0,.2);
border-radius: .5em;
box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
nav li {
float:left;
}
nav a {
float:left;
padding: .8em 1.5em;
text-decoration: none;
color: #555;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #fff #ccc #999 #eee;

background: #c1c1c1;
background: linear-gradient(#f5f5f5, #c1c1c1);
}
nav a:hover, nav a:focus {
outline: 0;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background: #fac754;
background: linear-gradient(#fac754, #f8ac00);
}
nav a:active {
box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
nav li:first-child a {
border-left: 0;
border-radius: 4px 0 0 4px;
}
nav li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}

The result

Gradients and inset shadows were used for the :hover and :active states.
Browser support
I like to make things work across all browsers, degrading gracefully:

IE trident preview
Were done!
You can use this anytime as a navigation menu for your website or web application.
I hope you like the final result and feel free to share your thoughts about it

You might also like