feilong tab slider pure css ul li no javascript
飞龙更新于 2010-08-11 03:44 加入书签 CTRL+D 有 89 个朋友来过If you are looking for tab slider of xhml content or posts,here are some resourses online feilong collected.But none of them is satisfactory,because some need to click the tab.some need javascript along.some interweave ul div or dl togethere.They are not pure css and xhml tab slider in my eyes.
So feilong decided to create a pure tab slider with only css and ul li and a.It is true or pure css,no javascript.How to create such pure css tab slider then? You can use a:hover or li:hover to simulate slider affect,and you can use li to display or hide the sub of ul.This post updated url is http://feilong.org/tabslider-purecss-nojavascript-en edit by feilong on August 11 in Shenzhen.
First,no thinking of css or javascript,feilong write down the pure xhml snipet below,which is made of a div box and ul li ul,that is ,a double ul element.
<div class="fltabslider"><ul> <li><a href="#feilong">feilong</a> <ul> <li><a href="http://feilong.org/tabslider-purecss-nojavascript-en">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">feilong blog help you a little</a></li> <li><a href="http://aneave.com">under an eave</a></li> <li><a href="http://ajike.com">ajike</a></li> <li><a href="http://yilulu.com">yilulu</a></li> <li><a href="http://bjloto.com">beijing loto</a></li> </ul> </li> </ul></div><div class="fltabslider"><ul> <li><a href="#feilong">feilong</a> <ul> <li><a href="http://feilong.org/tabslider-purecss-nojavascript-en">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">feilong blog help you a little</a></li> <li><a href="http://aneave.com">under an eave</a></li> <li><a href="http://ajike.com">ajike</a></li> <li><a href="http://yilulu.com">yilulu</a></li> <li><a href="http://bjloto.com">beijing loto</a></li> </ul> </li> </ul></div> |
Second,feilong edit and test the css style.including initial and hover tab colors，tab lis position and hover effects，the sub uls position and color,and the reset css of grandsun uls or lis.
If you want the code feilong wrote,please input you name and your email and comment some words,or contact feilong here.
飞龙初发：
2010-08-11 03:44
本文更新网址：
https://feilong.org/tabslider-purecss-nojavascript-en
所在目录： 网站开发