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#)