Jan 30

Tagged in: , Comments:Add

CSS: Menu List Design

This is a quick CSS tutorial to show you how to create a menu list using either the CSS border style or a background image. The trick is to apply a bottom border to the <li> element, then use the absolute position property to shift the nested elements down to cover the border. It is very flexible — you can easily change the layout by altering the border or background image. It even works when the browser’s font size is being scaled (increased or decreased).

View Demo Menu Design

1. HTML Code

Take a look at the HTML code and the diagram. They will help you understand how the CSS work.

<ul>
  <li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li>
</ul>

code explain

2. CSS Code

The key points are:

  • Specify the <li> element to position:relative and apply a bottom border style.
  • Use position:absolute with negative bottom value to shift the <strong> and <em> element below the border.
  • Remember: use relative value (em) to control the padding space.
.menu {
  width: 500px;
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
  font: 150%/100% Arial, Helvetica, sans-serif;
}
.menu li {
  clear: both;
  margin: 0;
  padding: 0 0 1.8em 0;
  position: relative;
  border-bottom: dotted 2px #999;
}
.menu strong {
  background: #fff;
  padding: 0 10px 0 0;
  font-weight: normal;
  position: absolute;
  bottom: -.3em;
  left: 0;
}
.menu em {
  background: #fff;
  padding: 0 0 0 5px;
  font: 110%/100% Georgia, "Times New Roman", Times, serif;
  position: absolute;
  bottom: -.2em;
  right: 0;
}
.menu sup {
  font-size: 60%;
  color: #666;
  margin-left: 3px;
}

3. Change Border Style

You can easily change the style by editing the CSS border and padding for the <li> element.

li {
  border-bottom: dashed 1px #000;
  padding: 0 0 2.3em 0;
}

4. Use Image as Border (see final demos)

You can also use a background image.

li {
  background: url(images/circle.gif) repeat-x left bottom;
}

5. IE6 Version (see IE6 demo)

If you are still using the old and buggie IE6 browser, you may notice the layout doesn’t render properly. To fix the issue, simply add the clearfix trick to the <li> element.

/* clearfix */
.menu li:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.menu li {display: inline-block;}
/* Hides from IE-mac \*/
* html .menu li {height: 1%;}
.menu li {display: block;}
/* End hide from IE-mac */

Delicious Stumbleupon Digg

Design Process of the Phoenix Jobs for Designers and Developers

Comments

Pages: 12 11 10 9 8 7 6 5 4 3 21 » Show All

There are 112 comments (+Add)

  • 112 vincentdresses http://www.hibridal.com

    喜欢你们的设计与技术,常来看看

  • 111 Software services http://www.nousinfosystems.com/softwareservices.php

    Great stuff thank you for sharing.

  • 110 Mipovia http://mipovia.tumblr.com

    thanks! it is exactly what I have been looking for <3

  • 109 72color http://www.72color.com

    4. Use Image as Border (see final demos)
    very easy

  • 108 ximumu http://www.ximumu.cn

    it is cool.thank you !

  • 107 kai

    That’s cool.

  • 106 Andrew http://www.pub-rooms.co.uk

    We’ve been using the css li method to create menus on our pub website for a while now but could really do with some fresh ideas to bring the design to life. Thanks for the great tips.

  • 105 Fisker

    good!

  • 104 Mike http://www.comastore.com

    Agree that this would be a lot easier and more semantically accurate if you were using a definition list. Thanks

  • 103 Itransition http://www.itransition.com

    I can note that using the relative value (em) to control the padding space can be the best way to prevent incorrect reflection of elements in browsers. But is it reasonable to use image as a border-background? I usually apply separately images as the visual borders and borders of the elements as separate elements. I can’t imaging using images in border attributes.

Pages: 12 11 10 9 8 7 6 5 4 3 21 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

Back to top