本文共 2092 字,大约阅读时间需要 6 分钟。
最重要的任务之一是确保网站的导航简单且用户友好 。 除了导航选项卡之外,还有什么其他方法可以实现此目的。
精心设计的导航选项卡不仅可以帮助用户知道去向,而且对于将流量吸引到网站或博客的内部页面也很重要。
因此,对于我的Web设计人员来说,这是一堆漂亮又干净的基于CSS标签的导航脚本的列表。 每个选项都有一个实时演示以及其下载源 。 因此,继续自己看看。
–在Bootstrap Tabs顶部构建的扩展Tabs插件。 它可以对齐标签,旋转标题,通过AJAX加载内容以及许多其他功能。 [ ]
–无需JavaScript即可构建的现代而简单的选项卡库。 也就是说,它既快速又美观 -就像您在大多数流行网站上看到的一样美观。 [ ]
–通过Tabby,您可以创建简单的切换标签,其中可以显示任何内容,包括视频。 它提供了各种高级选项,并且还支持NPM和Bower 。 [ ]
–由JS和CSS支持的现代,便捷的选项卡式导航,该功能的构建首先考虑了移动优先,并支持水平和垂直定位样式 。 [ ]
– Toggler是一个纯JavaScript插件,用于创建可切换元素(包括手风琴和制表符) 。 另外,您可以仅显示/隐藏页面上的任何项目。 [ ]
– 使用CSS和JS创建的简单选项卡片段 。 尽管示例代码显示了简单的选项卡,但是您可以通过使用CSS更改其样式来美化这些选项卡。 [ ]
–仅CSS的库,用于创建简单的切换组件(如选项卡)。 与上述几种库不同,该库不需要依赖项-甚至不需要任何JS代码。 [ ]
– Tabbis是一个简单而高级的插件。 使用其高级配置选项,您还可以创建嵌套选项卡并定义回调 。 [ ]
选项选项卡可帮助您轻松创建动画过渡选项卡 。 但是,您必须包括Pitaya,它本身就是一个库,因此会增加加载时间。 [ ]
– jTabs是使用纯JavaScript构建的选项卡库。 这意味着它是没有jQuery之类的外部依赖项构建的,并且也支持很少的配置选项。 [ ]
– tabs.js是一个纯手工制表JavaScript标签库,其灵感来自手风琴/ Tabs of Bourbon笔芯。 响应Swift , 选项卡在小屏幕上变为手风琴 。 [ ]
– WellTabber是另一个简单JavaScript插件,例如Tabby。 与后者一样,它支持配置选项卡的各种选项 。 另外,您可以显示导航箭头。 [ ]
–使用Vanilla JavaScript构建的,受材料设计启发的选项卡片段。 它易于使用且可自定义 。 但是,它不具有高级选项。 [ ]
–动画CSS选项卡是仅CSS的选项卡系统,可让您创建简单,简洁的选项卡。 与Tabby或WellTabber不同,它不提供任何高级配置 。 [ ]
–仅使用CSS而不使用JavaScript构建的受Bootstrap启发的选项卡系统。 它带来的独特功能是将屏幕上的选项卡过大移动到下拉列表中 。 [ ]
–基于纯CSS3且不包含JavaScript的标签小部件,例如此列表中的各种插件。 使它有趣的是它的选项卡具有漂亮的可折叠过渡 。 [ ]
–仅使用JavaScript构建的高级选项卡插件。 它使您可以设置默认选项卡,动态更改选项卡以及添加onLoad和onClick事件回调函数 。 [ ]
– Tabtastic是一个易于使用CSS和JS实现标签的插件。 它使用语义标记,可供屏幕阅读器访问 ,并支持页面上的嵌套选项卡。 [ ]
-此简单教程(包含可下载的代码)分享了有关使用CSS3和jQuery创建文件夹选项卡的信息 。 它使我想起了Google Chrome等浏览器中显示的标签。 [ ]
–一个代码段,展示了如何使用普通CSS构建等宽导航选项卡。 您可以自定义外观,但不提供开箱即用的高级选项 。 [ ]
– Twitter Bootstrap向导是用于构建具有可选项结构的向导的插件。 我注意到您可以通过隐藏或删除下一个和上一个按钮来仅创建选项卡。 [ ]
–仅用CSS构建的精美制表符结构, 可在现代浏览器上使用 。 但是,与上面提供的一些功能强大的插件不同,它没有高级选项。 [ ]
响应式手风琴–顾名思义, 响应式手风琴可根据屏幕宽度用作手风琴或选项卡。 如果可能的话,它会显示选项卡;如果尺寸很小 ,则显示手风琴 。 [ ]
– CardTabs是基于jQuery的超轻量级标签插件 ,带有多个主题。 您还可以创建新主题并动态设置活动选项卡。 [ ]
–美丽,新颖的标签页片段,有两种配色方案可用:浅色和深色 。 它是使用jQuery构建的,因此它不如上面列出的其他某些插件轻。 [ ]
–自适应标签是一个简单,漂亮的标签片段。 除了现代设计之外,它没有其他功能,如上面提供的一些高级插件中所提供的那样。 [ ]
– jQuery Tabs是一个用于创建选项卡的简单插件。 顾名思义,它是使用jQuery构建的,与上面列出的一些纯CSS或JavaScript构建的插件不同 。 [ ]
翻译自:
转载地址:http://vmezd.baihongyu.com/