How to create a CSS button menu (part 1)

Introduction: Why use CSS buttons?

A common feature in the website templates I build are navigation menus with buttons. Traditionally (as in “many years ago”) I would do these kinds of menus using images with the button text being written directly in the image files, but there are several reasons why it is better to use plain text links with CSS creating the button effect today. One good reason is that image-based menus will have a larger file size, resulting in longer loading times, while menus built with HTML and CSS only will load much faster.

Two other good reasons are accessibility and search engine optimization. Screen readers and search engines will not be able to read the text in images as easy as they can read plain text links. Using the alt=”” attribute can of course make it work anyway, and for more advanced designs it may be the best solution. But for regular navigation menus, a CSS-based button menu would be a better option. And for content management systems where the menu is generated dynamically, image buttons is simply not an option. For advanced designs, the two techniques can be combined into really beautiful menus. More about that in later posts.

In this tutorial series, I will explain how I create a simple menu using a list of links and CSS. I will cover the basics in this first part, and then expand the menu with more advanced tricks in the next couple of parts.

Step 1: Creating the list of links using HTML

For this tutorial, I will use an unsorted list (<ul>) with a number of list elements (<li>) containing regular text links. The basic HTML for this first step is fairly simple, so I will just write it out:

<ul id="avmenu">
  <li class="current"><a href="first.html">First page</a></li>
  <li><a href="second.html">Second page</a></li>
  <li><a href="third.html">Third page</a></li>
  <li><a href="fourth.html">Fourth page</a></li>
  <li><a href="fifth.html">Fifth page</a></li>
</ul>

The list has been given the ID=”avmenu”, which will allow me to apply CSS for the list and anything that the list element contains – in this case the list items and the links. I have also added a class=”current” to the first list element, since I want the current page to have a specific style to show the viewer of the menu which page that is currently shown.

Step 2: Creating the basic styles using CSS

With the HTML list created, it is time to tell the web browser how to display it. I’m starting with defining the styles for an extremely simple horizontal menu, just to get a starting point:

ul#avmenu {
margin: 35px 0;
padding: 0;
font: 12px Verdana;
list-style-type: none;
}
 
ul#avmenu li {
display: inline;
}
 
ul#avmenu li a {
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
color: #47a;
text-decoration: none;
}

The result doesn’t look very exciting, but the list of links are already starting to look like a button menu. This is what the menu looks like at this point:

I will explain each line of code in upcoming posts, as well as expanding the code to make the menu look a lot more interesting better. But for this first part, I will keep the menu as simple as possible in an effort to make it easy for CSS beginners to follow the steps and see what happens.

Step 3: Adding styles for currently active link, and highlighting buttons on mouseovers

As mentioned, I want to make the currently active button stand out a bit, and I also want to show a highlight effect when a button is hovered by the mouse pointer. Both additions will make it easier to find the right link to click on, as they work as a visual response that the viewer is pointing on the correct link. This is the code I add for these two additions:

ul#avmenu a:hover {
background: #fff;
color: #222;
}
 
ul#avmenu li.current a {
border:1px solid #777;
}

For this example, I have created a file named part1.html where I have placed the CSS and the HTML together in the same file. In my templates, I always place CSS in an external .css file – and I will do that once the code for the final menu is created. But throughout the tutorial series, I will keep the CSS and HTML together to make it easier to follow the steps and see how the changes in the code affects the menu.

Step 4: Review the results in the web browser

I have uploaded the file I have created here: part1.html, so you can see the menu live as it looks at this point. The link will open a new tab/window.

For the next part, I will create a part2.html – and so on for as long as the tutorial runs. As mentioned in the beginning of the post, I would be happy to get suggestions on what the menu should look like. I will make a vertical menu as well, and possibly a drop-down menu too if anyone is interested in seeing it. General feedback, questions and ideas are also very welcome.

Coming up in the next part: A line-by-line description of the CSS, and adding more visual effects, colors and styles…

css, tutorials