demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Vertical Navigation and List-Style

css / navigation

Estimated reading time: 1 minute, 46 seconds

Vertical Navigation ScreenshotA vertically-oriented website navigation bar is in some ways easier to create, as the list is already vertical – the major issue is setting its layout. The navigation bar starts with much the same code as before:

<ul id="nav">
<li><a href="#">Home</a>
<li><a href="#">About Us</a>
;<li><a href="#">Order</a>
<li><a href="#">Privacy Statement</a>
<li><a href="#">Contact</a>
</ul>

Most habituated users expect the primary navigation for a website to be on the left or top of the page; we’ll set ours to the left with float. At the same time, we’ll alter the display of the list:

ul#nav { float: left; font-family: Bell Gothic Std, sans-serif; text-transform: uppercase; letter-spacing: 0.5em; font-size: x-small; }

float immediately collapses the width of our unordered list to that of our widest piece of content (“Privacy Statement” in the case of the list above). However, the list items still have bullet points in front of them. We’ll turn those off by setting list-style-type to none:

ul#nav { float: left; list-style-type: none; font-family: Bell Gothic Std, sans-serif; text-transform: uppercase; letter-spacing: 0.5em; font-size: x-small; }

In the version of the navigation list shown in the screenshot above, I have added a border on all sides of the navigation with the exception of the left to visually separate it from the content. The background-image I added was more than large enough for me to add some padding-top and bottom to place the navigational items in the middle of the element.

The links in the list still look somewhat plain. We also need to separate them from the background. Let’s do that through a descendant selector:

ul#nav li a { text-decoration: none; color: #fff; background-color: rgba(0, 0, 0, 0.7); }

You’ll note that each link is only as large as its content. That’s because the a tag is displayed inline.

ul#nav li a { text-decoration: none; color: #fff; background-color: rgba(0, 0, 0, 0.7); display: block; }

They’re also a little close together. We’ll add padding to each link:

ul#nav li a { text-decoration: none; color: #fff; background-color: rgba(0, 0, 0, 0.7); display: block; padding: 0.75em; }

And a :hover state:

ul#nav li a:hover { background-color: rgba(0, 0, 0, 0.9); }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.