Jan 30
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).
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>
2. CSS Code
The key points are:
- Specify the
<li>element toposition:relativeand apply a bottom border style. - Use
position:absolutewith negativebottomvalue 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 */
Design Process of the Phoenix Jobs for Designers and Developers
Comments
Pages: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
There are 112 comments (+Add)
Pages: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
Loading ...
112 vincentdresses http://www.hibridal.com
January 6th, 2010 at 1:45 am
喜欢你们的设计与技术，常来看看
111 Software services http://www.nousinfosystems.com/softwareservices.php
December 28th, 2009 at 5:42 am
Great stuff thank you for sharing.
110 Mipovia http://mipovia.tumblr.com
December 15th, 2009 at 5:15 am
thanks! it is exactly what I have been looking for <3
109 72color http://www.72color.com
November 29th, 2009 at 9:41 pm
4. Use Image as Border (see final demos)
very easy
108 ximumu http://www.ximumu.cn
November 18th, 2009 at 11:08 am
it is cool.thank you !
107 kai
November 14th, 2009 at 1:55 pm
That’s cool.
106 Andrew http://www.pub-rooms.co.uk
November 12th, 2009 at 4:22 pm
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
November 3rd, 2009 at 8:54 pm
good!
104 Mike http://www.comastore.com
October 31st, 2009 at 5:10 am
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
October 14th, 2009 at 9:14 am
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.