CSS制作不规则导航

转载自52css.com，实际项目中经常用到，所以收藏下

[code]

<ul>

</ul>

［/code]

[code]

* {margin:0;padding:0;font:normal 12px/25px "宋体";}

body {background:#f8f8f8;}

ul {list-style:none;width:300px;height:25px;margin:20px auto;}

li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}

a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(***.gif) center center no-repeat;}

a:hover {color:#000;background:url(***.gif) 0 0 no-repeat;width:86px;position:relative;}

[/code]

实现思路：

　　主要是利用当:hover触发的时候让a定位，出了li的浮动范围，出现梯形的图片。从而实现了不规则导航的菜单。

编码过程：

　　1、在浏览器中，根据li的结构表现，后面的li会覆盖住前面的li，如果宽度足够的话，是靠边在一起，那么只要利用负边距就可以实现初始状态下相互叠加的样式。margin:0 -5px;

　　2、初始状态下的叠加实现了，要解决的就是:hover触发的时候，让<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="菜单">菜单</a>这个放弃浮动使用定位。在这个过程中如果是要利用绝对定位话，会让有一个z-index的问题出现。

　　这个问题只体现在IE中，FF下是无问题的，可以正常显示。IE中表现出来的是最后一个li永远都会盖住前面的li，那么当鼠标经过的时候就无法完美显示了。

最终代码：

[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>CSS布局实例：制作不规则形状的CSS导航菜单 - http://www.52css.com%3c/title>

* {margin:0;padding:0;font:normal 12px/25px "宋体";}

body {background:#f8f8f8;}

ul {list-style:none;width:300px;height:25px;margin:20px auto;}

li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}

a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(attachments/month_0804/o2008424202323.gif) center center no-repeat;}

a:hover {color:#000;background:url(attachments/month_0804/f2008424202316.gif) 0 0 no-repeat;width:86px;position:relative;}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

[/code]

在IE6中出现问题的补充：

　　此案例在IE6浏览器中运行时，最左侧的菜单被“切”掉了一个角，这是由IE6对宽度理解的不同造成。为了避免这一情况的出现，我们在合理计算尺寸的情况下，给ul增加一个左内边距，即：padding-left。就可以合理的解决此问题。修改ul的CSS样式编码如下：

CSS制作不规则导航

Example Source Code [www.52css.com] ul {list-style:none;width:300px;height:25px;margin:20px auto; padding-left:20px;}

比较重要的几个属性：

　　1、li中的负边距，实现叠加效果

　　2、:hover中的position:relative

　　3、a是内联元素，要触发haslayout，可以使用float:left来触发

转载于:https://www.cnblogs.com/Lion5859/articles/1360123.html

CSS制作不规则导航

继续阅读

美团弹性伸缩系统的技术演进与落地实践

通过script标签实现JSONP跨域调用

10种无线技术全接触(2)

面试过程中，竟然遇到PUA，我不得不服这种“潜规则”～

我想带你去浪漫的土耳其（Python&Matlab实现)

Dom4j--解析XML的首选

Java高级特性第15节解析XML文档(3) - JDOM和DOM4J技术

Js获取浏览器宽高转载 JS获取浏览器高度和宽度

Django 实现单点登录（SSO）

Efficient Editing With vim

javascript查找关键字高亮效果

嵌入Adobe Flash Player的内容，使用SWFObject 2

SWFObject2

jquery 操作复选框下拉框

ClipboardData实现复制内容到剪贴板，兼容各种浏览器

ASP.NET中存取图片到数据库的示例(C#)