[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
投稿猜你喜欢
比如 1--1 2--1- 进程想要执行任务就需要依赖线程。换句话说，就是进程中的最小执行单位就是线程，并且一个进程中至少有一个线程。那什么是多线程？提到多线程这里要说
- 本文实例讲述了MySQL中USING 和 HAVING 用法。分享给大家供大家参考，具体如下：USING用于表连接时给定连接条件（可以理解为
- MySQL 中原数据锁是系统自动控制添加的，对于用户来说无需显示调用，当我们使用一张表的时候就会加上原数据锁。原数据锁的作用是为了保护表原数
- 最近研究微信API，发现个非常好用的python库：wxpy。wxpy基于itchat，使用了 Web 微信的通讯协议，实现了微信登录、收发
- 几年前，看到一台湾人写的一段程序（好像是《日语基础》），在网页上实现音视频与文字的同步播放（就是音视频播到哪部分，相应的文字就亮显，点击某一
- 为了得到更加清晰的图像我们需要通过技术对图像进行处理，比如使用对比度增强的方法来处理图像，对比度增强就是对图像输出的灰度级放大到指定的程度，
- 通常我们定义一个函数，然后调用该函数时，函数相关的代码才开始执行。可是很多人并不知道，当我们定义函数时，一些代码就开始执行了。今天就来说说函
- 本文实例为大家分享了python实现网络五子棋的具体代码，供大家参考，具体内容如下服务器端：import osimport socketim
- 以前的Dreamweaver中是没有图片处理功能的，即使你要处理也只能使用CSS中的相关滤镜进行一些效
- Golang中Array是值类型而slice是引用类型。因此两者之间的赋值或拷贝有些差异，本文带你了解各自的差异。1. 拷贝array前面提
- 有感于中国互联网设计界十几年的变化，从网页设计师变身界面设计师，和近一两年来兴起的转型交互设计师。大多数都是随着一个行业的兴起而前赴后继的投
- python-redis-lock官方文档不错的博文可参考问题背景在使用celery执行我们的异步任务时，为了提高效率，celery可以开启
- :hover是我们在CSS设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类:hover，比如我们常见的纯CSS菜单、相册效果等等。或许
- 修复Access数据库，我们一般使用微软Office 97中带的Access 97对数据库进行修复和整理。Access数据库被损坏分以下几种
- 本文实例讲述了Python中顺序表原理与实现方法。分享给大家供大家参考，具体如下：Python中的顺序表Python中的list和tuple
- 前言数据分析时候，需要将数据进行加载和存储，本文主要介绍和excel的交互。read_excel()加载函数为read_excel(),其具
- 整数在Python中，整数（integer）是一种内置数据类型，用于表示整数值。Python中的整数类型可以表示任意大小的整数，而不需要考虑
- 加强ASP网站后台安全一些主要措施：----------------------------------------------------
- 有一次去超市换货，本能的找到服务中心，服务中心说这个业务在超市旁边一个房间里，由于忘记带小票，那个小房间的人让我去另外一个小房间调电脑里的记
