Vertical List Menu


I used to find it hard to find a list menu that was compatible with all the browsers I use without having to use any CSS hacks that’s why when I created this one I decided to keep it and use it as my standard list menu, that way I only have to change certain aspects of the styling to make it look how I want it to look.

First of all we’ll do the HTML for the list menu, this will simply be:

<div class="listmenu">
<ul>
	<li><a href="#">List Item 1</a></li>
	<li><a href="#">List Item  2</a></li>
	<li><a href="#">List Item  3</a></li>
	<li><a href="#">List Item  4</a></li>
</ul>
</div>

And that’s it as far as the HTML for our list goes, if you’re confused now you might want to do some more reading on HTML. You can see the list so far Here. As you can see, it’s nothing special yet!
Now we’ll move onto the CSS. You might have noticed that our listmenu was inside a class called “listmenu” that’s simply so we can reuse the list menu as many times as we want on a single page, while using an ID would only let us use it once.
Here’s the code for the listmenu class:

.listmenu ul {
margin: 0 0 5px 0;
padding: 0 0 2px 0;
list-style-type: none;width:185px;}

All I have done here is added a little bit of padding and margin to space the whole list out from the side of the page, you can change this to whatever you need to make it fit your layout. I also added a width, pretty obvious what that does :p and a “list-style-type: none;” that will remove the bullet points from the end of the list. You can see what the whole list looks like now if you go Here. As you can see, there’s still some work to do!
Next we’re going to add the CSS to style the list item, this will only work on list items that are hyperlinked like the ones in the HTML code posted above. The code for the list item looks like this:

.listmenu li a {
color: #333;
display: block;
border-left:3px solid #666;
border-right:3px solid #666;
height: 16px;
padding: 4px 0 4px 14px;
text-decoration: none;
font-weight:bold;
background-color:#fff;}

The display:block; makes your browser put each list item on a new line rather than all on one line. The two borders simply add a 3px #666 border to either side of our list menu, they’re just there to make it look a bit nicer :p. The rest of the CSS is pretty self explanatory.

Here I added some extra CSS code:

html{
font:12px Arial, Helvetica, sans-serif;
color:#333;
padding:0;
margin:0;}

All the above code does is sets a font face, size and colour for the page to tidy it up a bit.

As you can see here the menu is starting to take shape now, all we need is a nice rollover effect.

To add the rollover we use this CSS:

.listmenu li a:hover {
background-color: #666;
color:#fff;}

All this does is change the background colour to #666 and the font colour to #fff when you put your mouse over it. If you take a look here you will see our list menu is complete! I’ll post the full code for the finished menu at the bottom of he page incase you get stuck.

If you liked this tutorial, please consider letting me know by posting a comment, and if you like RSS Feeds and tutorials like this, please sign up for my RSS Feed.

Vertical List Menu:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
html{
font:12px Arial, Helvetica, sans-serif;
color:#333;
padding:0;
margin:0;}

.listmenu ul {
margin: 0 0 5px 0;
padding: 0 0 2px 0;
list-style-type: none;
width:185px;}

.listmenu li a {
color: #333;
display: block;
border-left:3px solid #666;
border-right:3px solid #666;
height: 16px;
padding: 4px 0 4px 14px;
text-decoration: none;
font-weight:bold;
background-color:#fff;}

.listmenu li a:hover {
background-color: #666;
color:#fff;}
</style>
<div class="listmenu">
<ul>
	<li><a href="#">List Item 1</a></li>
	<li><a href="#">List Item  2</a></li>
	<li><a href="#">List Item  3</a></li>
	<li><a href="#">List Item  4</a></li>
</ul>
</div>
  • Aaron G

    I would like to thank you for putting this up! It’s a nice and simple tutorial for a great effect that I have been looking for for a long time.

  • Arthur800

    thank you very much!!!!!!! I really2 like it. It’s a nice tutorial. I can understand it easily.

  • http://www.jamesowers.co.uk James

    No problem :)

  • Danito

    Yeah, great job.

    I’m french (scuse my english), i add your web page on my favorite ^^

  • http://www.nicktoye.co.uk Nick Toye

    Why would you use a class for a single element? I know it doesn’t mean that much, but for people who are looking at this tutorial as one of the first things they learn in CSS it may be confusing.

  • http://www.jamesowers.co.uk Jmz

    You could use an ID if you wanted, however I thought people might want to use more than one list menu on a single page. This way it will be valid either way.

  • http://www.ewan.org.uk/ Ewan

    Unless you require it for something else, you don’t need a div around a UL. A UL is in it’s own, essentially, a div.

  • Ray

    I am new to CSS and found your tutorial very informative and explanations very useful. I am finding if difficult to find a similar comphrensive tutorial for horizantal menu’s.
    Maybe I am not using the attribute “display: inline;” correctly. In your article I understood the inclusion of the attribute “display: block;” makes each item go on a new line.

  • http://www.ewan.org.uk Ewan

    You don’t need to wrap a div tag round it. A UL tag is essentially a div in its own, so just assign the ID to the UL!

    cheers,

    Ewan

  • http://www.artiajans.net arti ajans

    thanks a lot..

  • http://www.prefabrik.tv/index.html prefabrik

    I need a horizatal menu and i dont understand css. Please help me!

  • http://www.jamesowers.co.uk James

    For a horizontal list menu, please try: http://jamesowers.co.uk/css-tutorials/50/horizontal-css-list-menu/

    James’s last blog post..Diversifying My Blog

  • joe harrington

    Thank you! this tutorial is perfectly set up, and is one of those things that actually explains something that is critical to today’s web development. ie; why have i seen list items being used for menus?? this is a concise and very helpful tutorial, thanks yo!

  • Pingback: Tutorial Machine » Blog Archive » Vertical List Menu

  • http://www.evanbot.com Evan Byrne

    Great tutorial. Very easy to follow and the code worked perfectly.

  • Thierry

    Is it possible to add a third color when we click the item menu? If yes, can you explain how?

  • Pingback: Vertical List Menu : infoeduindia multimedia collection

  • http://www.forum-grad.ru/ moskoviaa

    Добрый день
    Это мое сообщение к администрации – jamesowers.co.uk,
    Обменяюсь баннерами с вашим сайтом , хочу чтобы они были в этот или можем обсудить другие варианты сотрудничества.
    Наш сайт forum-grad.ru
    На этот форум о Подмосковье заходят более 3000 человек, сайт развиваеться проводяться конкурсы, каждый день разыгриваються призы “100р на телефон” и мы готовы к сотрудничеству.
    контакты info(собака)forum-grad.ru
    p/s
    прошу извинить за вторжени

  • http://www.pulsedirectory.com/ Pulsedirectory

    Its a very useful tutorial, im currently settling into plenty of reading of CSS tutorials, ive used some basic CSS within a few wordpress themes before but im trying to get a better understanding so im absorbing tutorials like this one properly now.

    Thanks
    John

  • Pingback: Vertical List Menu - Tutorial Collection

  • http://virtual-number.ru/ kirilll

    Спасибо, пригодилось))

  • http://www.prefabrikyapi.com/konteynerler/konteynerler.htm Konteyner

    nice article, thanks for your share..

  • http://www.prefabrikevfiyatlari.tk prefabrik ev fiyatları

    nice article, thanks for sharing
    .-= prefabrik ev fiyatları´s last blog ..Satılık 78 Metrekare Çelik Ev =-.

  • http://www.burakgulnar.net burak

    Thanks a lot.Good tutorial.
    .-= burak´s last blog ..Warez nedir?Seo da önemi =-.

  • http://www.home-remedies.in Home Remedies

    Thanks for your vertical list menu.

  • http://cihip.com cihip

    Vertical List Menu post for thanx.

  • http://www.castajansim.com ajanslar

    merhaba böyle güzel konular açıp insanlara faydalı bir iş yaptığınız için çok teşekkür ederim!

  • http://www.sarinokta.org/ sari nokta

    thanks for this share… nice post…

  • http://www.prezervatifim.net/ prezervatif

    vertical list menu is nice, thanx.

  • http://www.tom-elliott.net/ Elliott

    Very useful, thanks

  • Pingback: +20 tutoriales CSS para principiantes | colorate

  • Pingback: CSS Tutorials for Beginners | Webpappa