打印

[教程] [xhtml+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(http://www.linxz.cn/blog2/attachments/month_0804/d200843194011.gif) center center no-repeat;}
a:hover {color:#000;background:url(http://www.linxz.cn/blog2/attachments/month_0804/s200843194022.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来触发







注:以上内容或许讲得不是非常明白,不过大家可以仔细分析一下源码,然后交流一下。如果觉得好也请不要回帖说顶,收藏,谢谢之类的话,你们的点击就是对我的支持了。
该内容只发于蓝色理想论坛个人BLOG,如果要转摘请注明一下出处,谢谢!
本帖最近评分记录
  • jxdawei 威望 +3 谢谢分享 2008-4-3 20:16
li里面的宽度和高度如果和a一样的话略去吧~~

省点是点
不在放荡中变坏,就在沉默中变态...
font:normal 12px/25px "宋体";

这个是什么意思? 12px/25px
4WD

TOP

认证您的手机,获得手机认证图标, 更多手机认证的好处
字体大小是12px,行高是25px.
CSS缩写来的.
楼主的演示在IE6下貌似会出现以下情况,第一个菜单左侧被隐藏


稍微改了一下,呵呵 (margin:0 -5px; --> margin:0 -10px 0 0;)

 提示:您可以先修改部分代码再运行
另外,提个建议,楼主的CSS定义里似乎有很多属性多余。
  • li里的 height, width, display
  • a里的 top, left, background里的附属参数
  • a:hover里的 width


[ 本帖最后由 sorrycc 于 2008-4-4 13:58 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
chencheng.org/blog

TOP

呵呵,谢谢sorrycc的提醒
有些代码当时是测试的时候遗留的,成功后就忘记了这些东西了。

TOP

相当不错
在迷茫中前进...

TOP

都是强人啊            向你们学习

TOP

这个例子貌似很久很久以前在国外的一个网站上看到过,主要运用的是负margin来实现
个人Blog:PlanABC   团队Blog:淘宝UED  专注Web前端技术!

TOP

思路不错!sorrycc 改过的更完美了!
安静!

TOP

为什么要用“charset=utf-8" 呢?
博客:http://blog.sina.com.cn/xpoqx

TOP

好东西,学习了!

TOP

楼主和sorrycc都辛苦了,
sorrycc改的不错

TOP

现学现卖一个:

 提示:您可以先修改部分代码再运行

TOP

都是 高手哈

TOP

我也不怕献丑制作了一个菜单

特点: 不使用图片,制作不规则的菜单。

重点: 利用 position margin boder 属性!

html
复制内容到剪贴板
代码:
<ul>
<li><a href=""><span>text...</span></a></p>
<li><a href=""><span>text...</span></a></p>
<li><a href=""><span>text...</span></a></p>
<li><a href=""><span>text...</span></a></p>
</ul>


 提示:您可以先修改部分代码再运行

TOP

学习。~~~~很不错的效果~

TOP

学习了..正遇到了同一个问题..

经常上理想,还是是不错的哈...嘿嘿.

TOP

真是不错!

真是不错!
引用:
原帖由 gulu77 于 2008-4-24 11:30 发表
我也不怕献丑制作了一个菜单

特点: 不使用图片,制作不规则的菜单。

重点: 利用 position margin boder 属性!

html


text...
text...
text...
text...



[html]





gulu77制作


ul{ ...
DIV+CSS

TOP

不规则几何图形制作导航菜单

 提示:您可以先修改部分代码再运行
彳亍日寺米青女少言亥言兑金童女子

TOP

楼上的,,,在FF下嘛都看不到
老子说:知之为知之;不知就Ta马的google知是也!

TOP

不用图片实现,不规则导航

修正16 楼代码,之前对IE6的不支持!

特点: 不使用图片,制作不规则的菜单。

重点: 有效利用 position margin boder 属性!

 提示:您可以先修改部分代码再运行
源文http://blog.gulu77.com/demo/200805/menu.html

TOP

楼上的好像更强。。学习

TOP

回复 gulu77 在 22# 的帖子

有点不完美!字体不居中!
span{
display:block;/*不加这句,FF下文字的下划线移位了,不知道为什么*/
position:relative;
top:26px;
z-index:5;
}
这样就好了!

TOP

要字体居中, 这样改会好点...

span{ position:absolute;}

改为

span{ position:absolute; display:block; width:80px; text-align:center}

TOP

margin错位、padding^^^^^^
太帅了



[ 本帖最后由 sujun 于 2008-6-27 11:22 编辑 ]
D2  PHP

TOP

a 不用float:left, 用display:block;或zoom:1也可以

附:
hasLayout 是IE特有的一个属性。微软 filter 滤镜要求 hasLayout=true 方可执行(否则没有效果)。这个属性可能导致问题的问题还有:

* Many common IE float bugs.
* Boxes themselves treating basic properties differently.
* Margin collapsing between a container and its descendants.
* Various problems with the construction of lists.
* Differences in the positioning of background images.
* Differences between browsers when using scripting.

下列元素默认 hasLayout=true

* <table>
* <td>
* <body>
* <img>
* <hr>
* <input>, <select>, <textarea>, <button>
* <iframe>, <embed>, <object>, <applet>
* <marquee>

下列属性也会导致 hasLayout=true

position: absolute
Refers to its containing block, and that's where some problems begin.

float: left|right
The float model has a lot of quirks due to some aspects of a layout element.

display: inline-block
Sometimes a cure when the element is at inline level and needs layout. Applying layout is probably the only real effect of this property. The “inline-block behaviour” itself can be achieved in IE, but quite independently: IE/Win: inline-block and hasLayout.

width: any value
This is often an implicit fix, more often the trigger when hasLayout does things wrong.

height: any value
height: 1% is used in the Holly Hack.

zoom: any value (MSDN)
MS proprietary, does not validate. zoom: 1 can be used for debugging.

writing-mode: tb-rl (MSDN)
MS proprietary, does not validate.

inline 元素的特殊情况

* width and height trigger hasLayout in IE 5.x and IE 6 in quirks mode only. As of IE6, when the browser is in “standards-compliance mode” inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout.

ie5.x和 ie 6 quirk 模式中,设置了 width 或者 height 属性的元素 hasLayout=true。ie 6 standards-compliance mode(标准兼容模式)时,设置了 width 或者 height 属性的元素 hasLayout=false

* zoom always triggers hasLayout, but it's not supported in IE5.0.
zoom 会导致 hasLayout=true,但 ie 5 不支持该属性。

通过 x.currentStyle.hasLayout 来获得 hasLayout 值(注意IE only,其他浏览器无效)。

<p>段落 p</p>
<div>块 div</div>
<table><tr><td>表格 td </td></tr></table>
<script>
objs=document.all
str=""
for(i=0;i<objs.length;i++){
str+=objs[i].tagName+"-"
}
//alert(str)
document.body.onclick=function(){obj=event.srcElement;alert(obj.tagName+":"+obj.currentStyle.hasLayout)}
</script>


hasLayout 不可写。也就是说,你不能通过 hasLayout=true 来设置 hasLayout 属性,而只能通过 width,height,zoom 等改变 hasLayout 状态。

Another thing to consider is how “layout” affects scripting. The clientWidth/clientHeight properties always return zero for elements without “layout.” This can be confusing to new scripters and is different to how Mozilla browsers behave. We can use this fact to determine “layout” for IE5.0: If the clientWidth is zero then the element does not have layout.

hasLayout=false 元素返回的 clientWidth/clientHeight 属性总是0。比如下面的代码



大多数情况下,我们是需要 hasLayout=true 的,通过CSS设置 hasLayout=true 的hack方法有:

/* \*/
* html .gainlayout { height: 1%; }
/* */

或者

.gainlayout { _height: 0; }

或者

<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->

或者针对最近发布的 IE 7 测试版

<!--[if lt IE 7]><style>
/* style for IE 6 + IE5.5 + IE5.0 */
.gainlayout { height: 0; }
</style><![endif]-->

<!--[if IE 7]><style>
.gainlayout { zoom: 1;}
/* or whatever we might need tomorrow */
</style><![endif]-->

[ 本帖最后由 loveface 于 2008-6-28 02:00 编辑 ]
不要浮躁

TOP

14楼版主做的不错。

TOP



 提示:您可以先修改部分代码再运行
[ 本帖最后由 marvellous 于 2008-6-30 00:42 编辑 ]

┏┯┓┏┯┓┏┯┓┏┯┓
┨┠┨┠┨┠
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

好东西,学习了!
腾飞赛鸽网

TOP