飞龙博客

深入经藏 智慧如海

纯css制作滑动tab选项卡思路

feilong.org 修订于2010-08-11 03:42:21 1,925

如果你在找纯css制作的tab选项卡效果,网上有一些可用的,飞龙收集了一些。不过有些tab可以滑动,有些需要点击。有些是真的用css和xhml制作的tab选项卡,有些说是纯css其实还有JavaScript的配合。有些去掉css后的纯html就变得不可阅读缺乏语义化,有些语义化可以可惜ul dl div混杂,所以飞龙感觉似乎没找到真正合适的纯css制作的tab选项卡。

飞龙晚上决定自己从零开始,自己来做一个可以滑动的纯css不带JavaScript的tab选项卡/滑动门效果。思路是:可以用链接a或li的hover属性模拟滑动效果,再用li下子ul,实现选项卡下内容的显示或隐藏。本日志更新网址:http://feilong.org/tabslider-purecss-nojavascript 飞龙第2次修订于20100811深圳

一、首先抛开css和javascript,写下纯xhml代码。由一个div包含一个双层ul组成。这样可以保证没有css了,一样可以清晰显示内容。

<div class="fltabslider"><ul>

<li><a href="#feilong">feilong</a>
<ul>
<li><a href="http://feilong.org/tabslider-purecss-nojavascript">feilongtab</a></li>
</ul>
</li>

<li><a href="#calligraphy">calligraphy</a>
<ul>
<li><a href="http://feilong.org/feilong">feilong</a></li>
</ul>
</li>

<li><a href="#jiaju99">jiaju99</a>
<ul>
<li><a href="http://jiaju99.com"><img src="http://jiaju99.com/themes/yard/images/logo.gif"/></a></li>
</ul>
</li>

<li><a href="#anyting">anyting</a>
<ul>
<li><a href="http://feilong.org">飞龙博客为您解忧</a></li>
<li><a href="http://aneave.com">同在屋檐下</a></li>
<li><a href="http://ajike.com">阿吉客</a></li>
<li><a href="http://yilulu.com">一路路</a></li>
<li><a href="http://bjloto.com">龙头泉</a></li>
</ul>
</li>

</ul></div>

二、然后,编写和调试css。要点包括选项卡标题的初始大小颜色和悬停大小颜色。选项卡li的排列大小和悬停效果。li下子ul的初始和悬停的位置和颜色和大小。子ul下的孙li或孙ul的样式重写。

三、有需要的朋友,请联系飞龙,资料在本地电脑,包括pure css feilongslider和css reset,不想发布到网上。

更新网址:http://feilong.org/tabslider-purecss-nojavascript
最初发布:20100811 03:15:59 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文:

飞龙前端QQ群