CSS 菜单列表设计

image

这是一个速成的 CSS 教程, 将向您展示如何使用 CSS 线条属性或者背景图片创建一个菜单列表. 这个技巧会在 <li> 元素上定义 border-bottom 属性, 并使用绝对位置的将嵌套在里面的元素覆盖在线上. 这是非常灵活的, 你可以通过修改边线和背景图片轻易地更改设计. 如果浏览器的字体是可缩放的, 那么它会相当的好用.

演示页面: Demo: CSS Menu Design

原文链接: CSS: Menu List Design

1. HTML 代码

请看一下这里的 HTML 代码和图解, 这有助于你更好地理解后面的 CSS.

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

HTML 图解

2. CSS 代码

重点在这里.

  • 为 <li> 元素添加 position:relative 和应用 border-bottom 风格.
  • 使用 position:absolute 和负数的 bottom 定位属性将下横线两端的元素下移并覆盖在线条上面.
  • 注意: 请使用相对于字体尺寸 (em) 去控制边距.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.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. 变换线条风格

你可以简单地通过修改 CSS 和边距来变换 <li> 元素的风格.

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

4. 使用图片作为线条

你同样可以使用背景图片来实现菜单列表的线条.

演示页面

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

5. IE6 版本

如果你还在使用满是 bug 的 IE6 浏览器, 你会发现布局不正常. 为了解决这个问题, 可以为 <li> 元素加入一些修复处理, 代码如下:

演示页面

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 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 */
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: CSS 菜单列表设计
  1. wulinfo | #1
    May 15th, 2009 at 00:40

    这等沙发还不坐上

  2. wulinfo | #2
    May 15th, 2009 at 00:41

    看见沙发我就坐上了 :twisted:

  3. 苏洋 | #3
    May 15th, 2009 at 00:43

    板凳 :idea:

  4. 苏洋 | #4
    May 15th, 2009 at 00:58

    为什么是em和px混合的用...而不是声明转换量后全部em呢?MG老师讲讲...
    最后的CSS Hack似乎缺了,IE7,记得CSS Hack的顺序是 FF,IE7,IE6? :neutral:

  5.  Maxter | #5
    May 15th, 2009 at 01:50

    :cry: english

  6. Rui | #6
    May 15th, 2009 at 04:18

    居然很前排,坐下慢慢看~ :lol:

  7. nick.w | #7
    May 15th, 2009 at 08:51

    从头学习css中

  8. 拆組達人 | #8
    May 15th, 2009 at 09:09

    說明的真是清楚
    CSS努力學習中

  9. calcifer | #9
    May 15th, 2009 at 09:38

    good,CSS 刚好学完这部分,很巧妙的办法。

  10. calcifer | #10
    May 15th, 2009 at 09:41

    @ Maxter
    This article is translated from another web page. And luckily, it's in English~
    Mg12 had given the url at the end of this post. :lol:
    Sample: http://webdesignerwall.com/demo/menu/menu-list.html
    Original English issue: http://www.webdesignerwall.com/tutorials/css-menu-list-design/

  11. Jutoy | #11
    May 15th, 2009 at 11:13

    先收藏了,等6月考完4级,好好学学CSS~

  12. Sivan | #12
    May 15th, 2009 at 11:27

    这个以前用过,不过除了绝对定位,我试了用margin也行。出去的部分在IE6下如果看不见,给IE6专门加个 :oops: 不支持的position:fixed就行。

  13. Polly | #13
    May 15th, 2009 at 13:56

    每次来都能看到MG12共享的好东西 :grin:

    关注iNove!

  14. huahua | #14
    May 15th, 2009 at 14:10

    mg12兄,想请教下你的的分类Categories一行两列实现问题。
    #sidebar .widget_archive li {
    width:110px;
    float:left;
    }
    我用了上面CSS之后,那条分隔线放的位置就乱了,会跟文字重叠在一起,得如何处理?帮忙解决下。

  15. 金融危机 | #15
    May 15th, 2009 at 15:37

    这真热闹... = =#

  16. autosfans | #16
    May 15th, 2009 at 17:32

    CSS的确是越来越精细了,不过就是有些太麻烦啦

  17. HK | #17
    May 15th, 2009 at 19:43

    不会CSS的,过来学习一下了

  18. fefe | #18
    May 15th, 2009 at 19:50

    太感謝了。我最近正好想學這個呢。

  19. Showfom | #19
    May 15th, 2009 at 22:01

    学习咯

  20. bruce | #20
    May 15th, 2009 at 22:47

    我刚接触wp没多久,也许这个问题很弱..不过还是想知道博主文章后如此格式的Related Posts,是通过什么插件实现的呢!

  21. joel | #21
    May 16th, 2009 at 03:37

    :shock: 好壮观啊,mg一群小弟...

  22. mg12 | #22
    May 16th, 2009 at 08:52

    @苏洋
    这是翻译过来的, 每人的做法都不一样.

    @Jutoy
    6月21日是吧?... 加油!

    @huahua
    请在 widget_category 的下方再加上 <div class="fixed"><div>

    @bruce
    http://fairyfish.net/2007/09/12/wordpress-23-related-posts-plugin/

    @joel
    囧~

  23. 园子 | #23
    May 16th, 2009 at 11:58

    您好

    我想问下您的首页的Recent Comments头像显示功能是怎么实现的

    我试用了您的主题,但是没有显示评论者的头像

    谢谢~

  24. bolo | #24
    May 16th, 2009 at 14:31

    用图片做好像简单一点,纯css比较难兼容各种浏览器

  25. ccgk | #25
    May 16th, 2009 at 21:29

    好好学习,天天向上。

  26. Calcifer | #26
    May 16th, 2009 at 22:28

    @园子
    那个是插件WP-RecentComments,详细见mg12的插件介绍,http://www.neoease.com/plugins/

  27. 怪鸟 | #27
    May 17th, 2009 at 10:51

    我使用了"Thread Twitter".但我的博客页面怎么不显示twitter的信息呢?这是为何?而"Protect my updates "我是关着的.地址:http://www.6ird.com/index.php/twitter

  28. grubylee | #28
    May 17th, 2009 at 16:27
  29. Gorden | #29
    May 17th, 2009 at 17:28

    css 着实麻烦, 12,评论框用ajax提交的 是用插件实现的吗? 可否分享一下

  30. mg12 | #30
    May 18th, 2009 at 14:33

    @Gorden
    Quick Comments 插件, 我的博客介绍过的, 你可以搜索一下.

  31. calf | #31
    May 18th, 2009 at 15:02

    :idea: 博主啥时候开始设计这个主题的?

  32. shine | #32
    May 18th, 2009 at 22:05

    不错,学习ing~~~~

  33. austin | #33
    May 19th, 2009 at 14:56

    板凳

  34. Alex | #34
    May 20th, 2009 at 12:55

    IE 6 hack还不怎么会呢,学习一下。。。

  35. shine | #35
    May 20th, 2009 at 20:24

    你好,请问,我设置好了LINKS页面
    但是我想像你这样,http://www.neoease.com/links/
    分类名称排列的,要如何设置?

  36. Sunts | #36
    May 20th, 2009 at 22:07

    @shine
    我也有同样的问题,但是经过修改links.php文件解决了

  37. shine | #37
    May 21st, 2009 at 10:03

    非常感谢Sunts 我修改好了,

  38. chui | #38
    May 29th, 2009 at 01:31

    說明的真是清楚

  39. Fufu | #39
    Jun 12th, 2009 at 10:54

    不错的方法。很好的技巧。

  40. 浩天 | #40
    Dec 20th, 2009 at 02:53

    万恶的IE6,深痛欲绝

  1. No trackbacks yet.

Twitter Email feed
RSS feed