How to create a CSS button menu (part 1)

Post 155 of 262

This is the first post in a tutorial series about creating a navigation button menu using only CSS and HTML. In this part, I will start easy and create a very simple (and therefore not so pretty) horizontal button menu. I will explain how I do it, and in forthcoming posts I will expand the menu and eventually end up with something that hopefully looks really good. Suggestions, requests and ideas for how the finished menu should look are very welcome, post a comment to this entry and tell me how you want the final result to look!

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…

,

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.

14 comments:

mackMarch 22, 2011 at 18:48Reply

Andreas thanks again for your web tutorials they are very much appreciated

Skye ArzuApril 4, 2011 at 21:06Reply

Perfect piece of work you have done, this internet site is really cool with superb info .

hemMay 17, 2011 at 04:48Reply

I am eagerly waiting for the next series of this tutorial. Any idea when they will be coming?

hemMay 17, 2011 at 04:50Reply

i have some more questions. Being a very new web developer with very little ideas about css, html, jquery etc, i want some free IDE which will help me to get started asap as i have some urgent deadline to meet. If you can guide me regarding the IDE, then it will be great. Thank you.

Bill BolandMay 24, 2011 at 05:10Reply

I am using a DreamWeaver Template of your’s – thank you very much.

Is it possible to ask you a couple of questions?

Welcome to andreas01! is the Template I am using.

I want to create a Library object out of Column 3
that when inserted is in proper position, etc …

I successfully created a Library object of the Menus – worked great.

But for some reason I cannot get the ‘extras” block to insert as a library
object in correct position

(720) 490-1680

gautamOctober 23, 2011 at 18:33Reply

hey thanks a lot for this.

Reisegutschein TeamNovember 23, 2011 at 11:16Reply

Thanks for this detailed tutorial, we are currently working on the design improvement of our site and noticed, that many people said that we should also redesign the buttons. First I thought that this could be difficult, but after reading through the tutorial it seems more easy to do.

Thanks.

GregOctober 2, 2012 at 21:30Reply

I am in total agreement with this statement and this will enhance what I already know about CSS…good job on Andreas.

Mohsen TahaniyanSeptember 19, 2012 at 22:55Reply

Hi
Your tutorial is very good and nice.thanks a lot for this

SebastianSeptember 22, 2012 at 00:13Reply

Thanks for tutorial,
I changed some point of design. Thets all.

Thanks a lot

FAUZUL FIDZIKRISeptember 23, 2012 at 17:55Reply

Sometimes I use Macromedia Dreamweaver 8 to edit the HTML code to facilitate my work.

Therefore, special for Mr. Andreas thanks again for your web tutorials.

GregOctober 2, 2012 at 21:29Reply

Andreas, your post on how to make a nav link a different colour so that one knows which page you are on was a great help! I am new to starting to code my own website designs I work on, I really appreciate taking the time to show everyone how this is done! I am learning a ton and I will definitely keep your link for reference as your code is very clean and easy to work with. Can’t wait to fit it on the present website design I am working on. Again, thanks for teaching us “newbies” – very much appreciated!!!! GT

ShakthiNovember 27, 2012 at 12:14Reply

Thanks man, it’s so helpful

RaymondDecember 31, 2012 at 10:02Reply

Good tutorial…
After studying the lesson…

I will suggested that…
http://css-button-generator.com/

It can save your time… right?

Menu