[xhtml+css实例]不规则导航的制作
作者：林小志 来源：林小志博客 发布时间：2008-04-04 18:11:00
标签：导航,不规则,hover,css
前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。
先看图（图片只是大致做了一下）
xhtml结构部分内容：
<ul>
<li><a href="#" title="菜单">菜单</a></li>
<li><a href="#" title="菜单">菜单</a></li>
<li><a href="#" title="菜单">菜单</a></li>
</ul>
css部分内容：
* {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(/file/UploadPic/20084/4/200844181915677.gif) center center no-repeat;}
a:hover {color:#000;background:url(/file/UploadPic/20084/4/200844181915759.gif) 0 0 no-repeat;width:86px;position:relative;}
效果展示：
思路：
主要是利用当:hover触发的时候让a定位，出了li的浮动范围，出现梯形的图片。从而实现了不规则导航的菜单。
过程：
1、在浏览器中，根据li的结构表现，后面的li会覆盖住前面的li，如果宽度足够的话，是靠边在一起，那么只要利用负边距就可以实现初始状态下相互叠加的样式。margin:0 -5px;
2、初始状态下的叠加实现了，要解决的就是:hover触发的时候，让<a href="#" title="菜单">菜单</a>这个放弃浮动使用定位。在这个过程中如果是要利用绝对定位话，会让有一个z-index的问题出现。
这个问题只体现在IE中，FF下是无问题的，可以正常显示。IE中表现出来的是最后一个li永远都会盖住前面的li，那么当鼠标经过的时候就无法完美显示了。
个人认为比较重要的几个属性：
1、li中的负边距，实现叠加效果
2、:hover中的position:relative
3、a是内联元素，要触发haslayout，可以使用float:left来触发
0
投稿猜你喜欢
- 一、85％的广告没人看解读：如何挤进那15％的成功广告中去，吸引了读者就是成功了一半。Quester视角：反过来讲，只有不到1/5的广告能吸
- 如IP为192.168.1.111现要截取第二个.之前的值，得到结果192.168，很多网站都只显示前面2个值 &nb
- 昨天在网上看到一个防采集软件，说采集只访问当前网页，不会访问网页的图片、JS等，今天突然想到，通过动态程序和Js访问分别记录访问者的IP，然
- 来看看javascript怎么实现自动点击超级链接吧，主要使用了js中的onclick事件。这里推荐大家看看这篇文章js鼠标事件大全。看了这
数据完整性是任何数据库系统要保证的重点。不管系统计划得有多好，空数据值的问题总是存在。本文探讨了在SQL Server中处理这些值时涉及的3- 所以对应的asp处理代码如下代码如下:dedearr=split(xiangguanid2,chr(13)) '分割成数组
- 本讲的内容是使用ASP的ActiveX Server Components（组件），说实话下面的内置组件我们用的很少。一、 Browser
- 打过了趟深圳回来后，已经快半个月，在广州购书中心逛了下，发现2本前端书《重构HTML-改善WEB应用的设计》、《CSS3 实战》，看了一半《
- 众所周知，FileSystemObject（fso）组件的强大功能及破坏性是它屡屡被免费主页提供商(那些支持ASP)的禁用的原因，我整理了一
- 你一定很熟悉Youtube了，知道它是一个视频分享网站。是的，youtube目前十分流行，你也许会常常访问。这里有一些关于youtube u
- 前言：HTML5和CSS3的时代到来了，新版2011版淘宝网首页已全部使用HTML5，拥抱变化才是王道。为之漫笔翻译的很好，看了一遍后，感觉
- 在运用xmlhttp组件编写程序中，会碰到 "msxml3.dll 错误 ‘800c0005’&nb
- 原文地址：30 Days of Mootools 1.2 Tutorials - Day 10 - Using FX.TweenMooToo
- mysql数据库数据表和数据表关联--问题??用户数据表user 字词作品数据表article 短信 message外键ID 主键，之间的关
- 上回 说到“大屏幕浏览页面的良好体验，本就应该用户自己调整窗口。”根据屏幕不同大小，缩小窗口出横向滚动条在所难免，但理想情况下，页面应该能适
- 一、利用外键约束更新MySQL中的数据现在，最流行的开源关系型数据库管理系统非MySQL莫属，而MySQL又支持多个存储引擎，其中默认的也是
- 先说明一下，现在网上有一些功能很强大的动画类，如MOOFX之类，我为什么要写这三个动画函数？因为在写zDialog时需要且只需要用到透明度渐
- 我们开发数据库应用时，常常需要用到模糊查询。如果同一个条件需要匹配很多字段怎么办呢？通常，程序员会每个字段都在SQL中“field like
- 在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展
- 在做项目的过程中，我们经常会建立各种各样的规范，以方便团队之间更好的合作更好的完成项目；同样我们也经常会听到各种各样的协议，比如Google
