博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
clean_50多种基于Clean Tab的Nice Clean导航脚本
阅读量:2532 次
发布时间:2019-05-11

本文共 2092 字,大约阅读时间需要 6 分钟。

最重要的任务之一是确保网站的导航简单且用户友好 。 除了导航选项卡之外,还有什么其他方法可以实现此目的。

精心设计的导航选项卡不仅可以帮助用户知道去向,而且对于将流量吸引到网站或博客的内部页面也很重要。

因此,对于我的Web设计人员来说,这是一堆漂亮又干净的基于CSS标签的导航脚本的列表。 每个选项都有一个实时演示以及其下载源 。 因此,继续自己看看。

–在Bootstrap Tabs顶部构建的扩展Tabs插件。 它可以对齐标签,旋转标题,通过AJAX加载内容以及许多其他功能。 [ ]

bootstrap-tabs-x

–无需JavaScript即可构建的现代而简单的选项卡库。 也就是说,它既快速又美观 -就像您在大多数流行网站上看到的一样美观。 [ ]

带有指示器的纯CSS标签

–通过Tabby,您可以创建简单的切换标签,其中可以显示任何内容,包括视频。 它提供了各种高级选项,并且还支持NPM和Bower 。 [ ]

虎斑猫

–由JS和CSS支持的现代,便捷的选项卡式导航,该功能的构建首先考虑了移动优先,并支持水平和垂直定位样式 。 [ ]

响应式标签式导航

– Toggler是一个纯JavaScript插件,用于创建可切换元素(包括手风琴和制表符) 。 另外,您可以仅显示/隐藏页面上的任何项目。 [ ]

切换器

使用CSS和JS创建简单选项卡片段 。 尽管示例代码显示了简单的选项卡,但是您可以通过使用CSS更改其样式来美化这些选项卡。 [ ]

纯CSS标签

–仅CSS的库,用于创建简单的切换组件(如选项卡)。 与上述几种库不同,该库不需要依赖项-甚至不需要任何JS代码。 [ ]

Tabsy CSS

– Tabbis是一个简单而高级的插件。 使用其高级配置选项,您还可以创建嵌套选项卡并定义回调 。 [ ]

塔比斯
响应式纯CSS标签
CSS标签

选项选项卡可帮助您轻松创建动画过渡选项卡 。 但是,您必须包括Pitaya,它本身就是一个库,因此会增加加载时间。 [ ]

使用Pitaya的标签页

– jTabs是使用纯JavaScript构建的选项卡库。 这意味着它是没有jQuery之类的外部依赖项构建的,并且也支持很少的配置选项。 [ ]

标签
自适应Flexbox选项卡
Tabs-手风琴

– tabs.js是一个纯手工制表JavaScript标签库,其灵感来自手风琴/ Tabs of Bourbon笔芯。 响应Swift选项卡在小屏幕上变为手风琴 。 [ ]

tabs.js

– WellTabber是另一个简单JavaScript插件,例如Tabby。 与后者一样,它支持配置选项卡的各种选项 。 另外,您可以显示导航箭头。 [ ]

泰伯尔
3D多维数据集选项卡式界面
ES6的标签模块
带有CSS标签的可变高度

–使用Vanilla JavaScript构建的,受材料设计启发的选项卡片段。 它易于使用且可自定义 。 但是,它不具有高级选项。 [ ]

物料设计选项卡

–动画CSS选项卡是仅CSS的选项卡系统,可让您创建简单,简洁的选项卡。 与Tabby或WellTabber不同,它不提供任何高级配置 。 [ ]

动画CSS标签
pureTabs
Vanilla JavaScript可访问选项卡
科幻风格的动画标签

–仅使用CSS而不使用JavaScript构建的受Bootstrap启发的选项卡系统。 它带来的独特功能是将屏幕上的选项卡过大移动到下拉列表中 。 [ ]

纯CSS引导程序自适应选项卡

–基于纯CSS3且不包含JavaScript的标签小部件,例如此列表中的各种插件。 使它有趣的是它的选项卡具有漂亮的可折叠过渡 。 [ ]

折叠式标签栏
很棒CSS动画选项卡

–仅使用JavaScript构建的高级选项卡插件。 它使您可以设置默认选项卡,动态更改选项卡以及添加onLoad和onClick事件回调函数 。 [ ]

JavaScript Tabifier
骨架标签

– Tabtastic是一个易于使用CSS和JS实现标签的插件。 它使用语义标记,可供屏幕阅读器访问 ,并支持页面上的嵌套选项卡。 [ ]

Tabtastic

-此简单教程(包含可下载的代码)分享了有关使用CSS3和jQuery创建文件夹选项卡的信息 。 它使我想起了Google Chrome等浏览器中显示的标签。 [ ]

CSS3和jQuery文件夹选项卡
标签内容

–一个代码段,展示了如何使用普通CSS构建等宽导航选项卡。 您可以自定义外观,但不提供开箱即用的高级选项 。 [ ]

等宽导航选项卡
使用jQuery和CSS的选项卡式内容

– Twitter Bootstrap向导是用于构建具有可选项结构的向导的插件。 我注意到您可以通过隐藏或删除下一个和上一个按钮来仅创建选项卡。 [ ]

Twitter Bootstrap向导
纯CSS标签

–仅用CSS构建的精美制表符结构, 可在现代浏览器上使用 。 但是,与上面提供的一些功能强大的插件不同,它没有高级选项。 [ ]

只是另一个CSS标签

响应式手风琴–顾名思义, 响应式手风琴可根据屏幕宽度用作手风琴或选项卡。 如果可能的话,它会显示选项卡;如果尺寸很小 ,则显示手风琴 。 [ ]

响应式手风琴

– CardTabs是基于jQuery超轻量级标签插件 ,带有多个主题。 您还可以创建新主题并动态设置活动选项卡。 [ ]

卡片标签
咏叹调

–美丽,新颖的标签页片段,有两种配色方案可用:浅色和深色 。 它是使用jQuery构建的,因此它不如上面列出的其他某些插件轻。 [ ]

最小和性感的标签
选项卡式小部件

–自适应标签是一个简单,漂亮的标签片段。 除了现代设计之外,它没有其他功能,如上面提供的一些高级插件中所提供的那样。 [ ]

自适应标签
树样式选项卡
Tabulous.js

– jQuery Tabs是一个用于创建选项卡的简单插件。 顾名思义,它是使用jQuery构建的,与上面列出的一些纯CSS或JavaScript构建的插件不同 。 [ ]

jQuery标签
jQuery rTabs

翻译自:

转载地址:http://vmezd.baihongyu.com/

你可能感兴趣的文章
《代码大全》学习摘要(五)软件构建中的设计(下)
查看>>
C#检测驱动是否安装的问题
查看>>
web-4. 装饰页面的图像
查看>>
微信测试账户
查看>>
Android ListView上拉获取下一页
查看>>
算法练习题
查看>>
学习使用Django一 安装虚拟环境
查看>>
Hibernate视频学习笔记(8)Lazy策略
查看>>
CSS3 结构性伪类选择器(1)
查看>>
IOS 杂笔-14(被人遗忘的owner)
查看>>
自动测试用工具
查看>>
前端基础之BOM和DOM
查看>>
[T-ARA/筷子兄弟][Little Apple]
查看>>
编译Libgdiplus遇到的问题
查看>>
【NOIP 模拟赛】Evensgn 剪树枝 树形dp
查看>>
java学习笔记④MySql数据库--01/02 database table 数据的增删改
查看>>
两台电脑如何实现共享文件
查看>>
组合模式Composite
查看>>
程序员最想得到的十大证件,你最想得到哪个?
查看>>
我的第一篇CBBLOGS博客
查看>>