飞龙博客

feilong.org 前端开发教程

feilong tab slider pure css ul li no javascript

飞龙修订于 20100811 03:44 77 次浏览

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.




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

想学前端?长按二维码加我微信

想学前端?点击飞龙QQ

分类: 网站开发

新作:

旧文:

关闭

长按二维码 -> 识别图中二维码

打开微信,发现,扫一扫

支付完成后,点击下一步

感谢大力支持

然后你手机号:

最后点这,稍等即可