Nifty Navigation Tricks Using CSS Article

Discussion

Nested lists are a perfect way to describe the navigation system that we’re working with here. The first list contains the main sections of the site, while the sublist under Recipes shows the subsections within the Recipes category. Even without any CSS styling, the structure of the list is still clear and comprehensible, as you can see in the figure below.The navigation remaining logical without the CSSThe HTML that we use to mark up this list simply nests the sublist inside the li element of the appropriate main item:<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
With this HTML, and without any changes to the CSS, the menu will display as shown in the figure below on the left, where the li elements inherit the styles of the main menu.Let’s add a style rule for the nested list to communicate visually that it’s a submenu, distinct from the main navigation:#navigation ul ul {margin-left: 12px;}This rule will indent the nested list so that it’s in line with the right edge of the border for the main menu, as demonstrated in the following figure on the right.The sublist taking on the styles of the main navigation and the indented version

Let’s add some simple styles to the li and a elements within the nested list to complete the effect:#navigation ul ul li {border-bottom: 1px solid #711515;margin: 0;}#navigation ul ul a:link, #navigation ul ul a:visited {background-color: #ED9F9F;color: #711515;}#navigation ul ul a:hover {background-color: #711515;color: #FFFFFF;}

How do I make a horizontal menu using CSS and lists?

All the examples we’ve seen in this chapter have dealt with vertical navigation – the kind of navigation that will most likely be found in a column to the left or right of a site’s main content area. However, site navigation is also commonly found as a horizontal menu close to the top of the document.

Solution

As the figure below shows, this type of menu can be created using styled lists in CSS. The li elements must be set to display inline to avoid that line break between list items.Using CSS to create horizontal list navigationHere’s the HTML and CSS that creates this display:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_horiz.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
body {padding: 1em;}#navigation {font-size: 90%;}#navigation ul {list-style: none;margin: 0;padding: 0;padding-top: 1em;}#navigation li {display: inline;}#navigation a:link, #navigation a:visited {padding: 0.4em 1em 0.4em 1em;color: #FFFFFF;background-color: #B51032;text-decoration: none;border: 1px solid #711515;}#navigation a:hover {color: #FFFFFF;background-color: #711515;}

Discussion

To create the horizontal navigation, we start with a list that’s identical to the one we created for our vertical list menu:<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
We style the #navigation container to apply some basic font information, as we did with the vertical navigation. In a CSS layout, this ID would probably also contain some additional styles that determine the navigation’s position on the page:#navigation {font-size: 90%;}In styling the ul element, we remove the list bullets and default indentation applied to the list by the browser:#navigation ul {list-style: none;margin: 0;padding: 0;padding-top: 1em;}The property that transforms our list from a vertical to a horizontal display is applied to the li element. After we set the display property to inline, the list looks like the figure below:#navigation li {display: inline;}Displaying the list menu horizontallyAll that’s left for us to do is to style the links for our navigation:#navigation a:link, #navigation a:visited {padding: 0.4em 1em 0.4em 1em;color: #FFFFFF;background-color: #B51032;text-decoration: none;border: 1px solid #711515;}#navigation a:hover {color: #FFFFFF;background-color: #711515;}If you’re creating boxes around each link – as I have here – remember that, in order to make more space between the text and the edge of its container, you’ll need to add more left and right padding to the links. To create more space between the navigation items, add left and right margins to the links.

How do I create button-like navigation using CSS?

Navigation that appears to be composed of clickable buttons is a feature of many web sites. This kind of navigation is often created using images to which effects are applied to make the edges look beveled and button-like. Often, some JavaScript code is used to swap in another image, so the button appears to depress when the user holds the cursor over it or clicks on the image.This brings up the question: Is it possible to create such button-like navigation systems using only CSS? Absolutely!

Solution

Creating a button effect like that shown below is possible, and fairly straightforward, using CSS. The effect’s success hinges on your use of the CSS border properties.Building button-like navigation with CSSHere’s the code you’ll need:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_button.css"
/>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {font-size:90%}#navigation ul {list-style: none;margin: 0;padding: 0;padding-top: 1em;}#navigation li {display: inline;}#navigation a:link, #navigation a:visited {margin-right: 0.2em;padding: 0.2em 0.6em 0.2em 0.6em;color: #A62020;background-color: #FCE6EA;text-decoration: none;border-top: 1px solid #FFFFFF;border-left: 1px solid #FFFFFF;border-bottom: 1px solid #717171;border-right: 1px solid #717171;}#navigation a:hover {border-top: 1px solid #717171;border-left: 1px solid #717171;border-bottom: 1px solid #FFFFFF;border-right: 1px solid #FFFFFF;}

Discussion

To create this effect, we’ll use the horizontal list navigation described in the section called “How do I make a horizontal menu using CSS and lists?”. However, to create the button look, we’ll use different colored borders at the top and left than we use for the bottom and right sides of each button. By giving the top and left edges of the button a lighter colored border than we assign to the button’s bottom and right edges, we create a slightly beveled effect:#navigation a:link, #navigation a:visited {margin-right: 0.2em;padding: 0.2em 0.6em 0.2em 0.6em;color: #A62020;background-color: #FCE6EA;text-decoration: none;border-top: 1px solid #FFFFFF;border-left: 1px solid #FFFFFF;border-bottom: 1px solid #717171;border-right: 1px solid #717171;}We reverse the border colors for the hover state, which creates the effect of the button being pressed:#navigation a:hover {border-top: 1px solid #717171;border-left: 1px solid #717171;border-bottom: 1px solid #FFFFFF;border-right: 1px solid #FFFFFF;}Try using heavier borders and changing the background images on the links, to create effects that suit your design.

Go to page: 1 | 2 | 3 | 4

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.