资讯频道 → Web前端
阅读更多

5顶
4踩

Web前端

原创新闻 5 个精美实用的 CSS3 Tab 菜单

2012-07-09 11:15 by 见习编辑 html5_dev 评论(2) 有11280人浏览
css html tab 菜单

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Tab菜单是一种比较特殊的菜单，和其他菜单不同，Tab菜单更多的是帮助用户在更狭小的范围内导航所要阅读的内容，通过对Tab页的切换，用户可以在有限的空间内找到更多感兴趣的内容。下面给大家分享5款简单而实用的CSS3 Tab菜单示例，希望能有用。

1、CSS3实现的Tab菜单导航

这是一款基于CSS3技术的Tab菜单导航，这个Tab菜单仅仅利用了一些简单的CSS代码和HTML5实现的，大家可以下载源代码试试这个Tab菜单。



2、JS和HTML5实现的Tab菜单

这又是一个简单实用的HTML5 Tab菜单，该HTML5 Tab菜单有详细的制作教程供大家参考。



3、基于CSS3和jQuery的Tab菜单

这是一款基于CSS3和jQuery的Tab菜单，Tab切换时带有淡入淡出的效果，相当流畅，而且又十分简易，短短几行CSS3代码和jQuery代码就能实现这个简单实用的Tab菜单，不过需要支持CSS3的浏览器才能运行哦。



4、CSS3辉光效果的Tab菜单

这是一款基于纯CSS3的Tab菜单，该Tab菜单的Tab项在点击切换的时候会发出微微的辉光，从整体来看十分大气，大家可以将该Tab菜单的源码下载下来试用一下。



5、精美的CSS3 3D Tab菜单

这是一款基于CSS3和jQuery的3D Tab菜单插件，该Tab菜单在Firefox、Chrome、Opera和IE10中将展现3D的效果，在IE的其他版本将会以普通的Tab呈现给用户，所以这个Tab菜单的兼容性还是蛮好的，一起来看看吧。



5
顶
4
踩
评论 共 2 条 请登录后发表评论
2 楼 hotterdmj 2012-07-11 09:38
haokan !
1 楼 ixiaohei 2012-07-09 23:15
学习了

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics