feilong tab slider pure css ul li no javascript
feilong.org 修订于2010-08-11 03:44:00 您好，第 237 位朋友！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.
更新网址：https://feilong.org/tabslider-purecss-nojavascript-en
最初发布：20100811 03:44:00 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发