50+ Niza Clean CSS Scripts de navegación basados en pestañas
Una de las tareas más vitales de un diseñador de experiencia de usuario es asegurarse de que La navegación del sitio web es simple y fácil de usar.. ¿Y qué otra manera de hacer esto posible que a través de las pestañas de navegación?.
Las pestañas de navegación bien diseñadas no solo ayudan a los usuarios a saber dónde ir, sino que también son importantes para dirigir el tráfico a las páginas internas de su sitio web o blog..
Así que, para mis amigos de diseño web, aquí hay una larga lista de scripts de navegación basados en pestañas CSS agradables y limpios. Cada opción tiene un Demostración en vivo junto con su fuente de descarga.. Así que ve y echa un vistazo por ti mismo..
bootstrap-tabs-x - Un complemento de pestañas extendido construido en la parte superior de Bootstrap Tabs. Puede alinear pestañas, rotar títulos, cargar contenido a través de AJAX, y numerosas características más. [Manifestación]
Pestañas CSS puras con indicador - Una biblioteca de pestañas moderna pero sencilla construida sin JavaScript. Eso significa que es rapido y hermoso también - tan hermoso como ves en los sitios web más populares. [Manifestación]
Atigrado - Tabby le permite crear pestañas de alternancia simples, que pueden mostrar cualquier contenido, incluidos los videos. Ofrece varios Opciones avanzadas y soporta NPM y Bower. también. [Manifestación]
Navegación tabulada sensible - Una navegación con pestañas moderna y práctica respaldada por JS y CSS, que se construye pensando en el móvil primero y Soporta estilos de posicionamiento tanto horizontales como verticales.. [Manifestación]
Toggler - Toggler es un complemento de JavaScript puro para crear elementos con capacidad de alternar, incluidos acordeones y pestañas. Además, puede mostrar / ocultar cualquier elemento de la página. [Manifestación]
Pestañas CSS puras - UNA Fragmento de pestañas simple creado usando CSS y JS. Aunque el código de ejemplo muestra pestañas simples, aún puede embellecer las pestañas cambiando su estilo usando CSS. [Manifestación]
Tabsy CSS - Una biblioteca solo para CSS para crear componentes de alternancia simples como pestañas. Esta biblioteca, a diferencia de algunas de las anteriores, no necesita dependencias, ni siquiera ningún código JS. [Manifestación]
Tabbis.js - Tabbis es un complemento simple pero avanzado. Usando sus opciones de configuración avanzadas, puede crear pestañas anidadas y definir devoluciones de llamada también. [Manifestación]
Pestañas CSS puras y sensibles [Manifestación]
Pestañas CSS [Manifestación]
Pestañas utilizando Pitaya - Las pestañas que usan Pitaya te ayudan a crear pestañas de transición animadas fácilmente. Sin embargo, debe incluir Pitaya, que es una biblioteca en sí misma y aumenta el tiempo de carga. [Manifestación]
jTabs - jTabs es una biblioteca de pestañas construida con JavaScript puro. Eso significa que está construido con no hay dependencias externas como jQuery y soporta algunas opciones de configuración también. [Manifestación]
Pestañas Flexbox responsivas [Manifestación]
Acordeón de pestañas [Manifestación]
tabs.js - tabs.js es una pura biblioteca de pestañas de JavaScript inspirada en Accordion / Tabs of Bourbon Refills. Es sensible tal que Las pestañas cambian a acordeones en pantallas pequeñas.. [Manifestación]
BuenoTabber - WellTabber es otro complemento simple de JavaScript como Tabby. Como este último, Soporta varias opciones para configurar las pestañas.. Además, puede mostrar flechas de navegación. [Manifestación]
Cubo 3D interfaz tabulada [Manifestación]
Módulo de pestañas para ES6 [Manifestación]
Alturas variables con pestañas CSS [Manifestación]
Fichas de diseño de materiales - Un fragmento de código inspirado en el diseño de materiales creado con Vanilla JavaScript. Es Fácil de usar y personalizable también. Sin embargo, no cuenta con opciones avanzadas. [Manifestación]
Pestañas CSS animadas - Las pestañas CSS animadas son un sistema de pestañas solo para CSS que te permite crear pestañas simples y ligeras. A diferencia de Tabby o WellTabber, No ofrece ninguna configuración avanzada.. [Manifestación]
pureTabs [Manifestación]
Pestañas accesibles de JavaScript de vainilla [Manifestación]
Fichas animadas de estilo de ciencia ficción [Manifestación]
Pestañas adaptables de Bootstrap de CSS puro - Un sistema de pestañas inspirado en Bootstrap creado solo con CSS y sin JavaScript. ¿Qué característica única que trae es Las pestañas que se adaptan en la pantalla se mueven a una lista desplegable. [Manifestación]
Barra de pestañas plegable - Un widget de pestañas basado en CSS3 puro y sin JavaScript, como varios complementos en esta lista. Lo que lo hace interesante es que sus pestañas tienen un transición plegable de buen aspecto. [Manifestación]
Impresionantes pestañas animadas CSS [Manifestación]
Tabulador de JavaScript - Un complemento avanzado de pestañas construido con solo JavaScript. Le permite establecer una pestaña predeterminada, cambiar la pestaña dinámicamente y Añadir funciones de devolución de llamada onLoad y onClick.. [Manifestación]
Pestañas de esqueleto [Manifestación]
Tabtastic - Tabtastic es un complemento fácil de implementar pestañas utilizando CSS y JS. Eso Utiliza el marcado semántico, es accesible para lectores de pantalla., y soporta pestañas anidadas en una página. [Manifestación]
CSS3 & jQuery Folder Tabs - Este sencillo tutorial (con código descargable) comparte sobre creando pestañas de carpetas usando CSS3 y jQuery. Me recuerda a las pestañas que se muestran en los navegadores como Google Chrome. [Manifestación]
Contenido con pestañas [Manifestación]
Pestañas de navegación de ancho igual - Un fragmento de código, que muestra el uso de CSS sin formato para crear pestañas de navegación de igual ancho. Usted puede Personaliza la apariencia, pero no ofrece opciones avanzadas fuera de la caja.. [Manifestación]
Contenido tabulado con jQuery y CSS [Manifestación]
Asistente de arranque de Twitter - Twitter Bootstrap Wizard es un complemento para crear asistentes de una estructura tabable. Noté que podría crear solo pestañas ocultando o eliminando los botones siguiente y anterior. [Manifestación]
Pestañas CSS puras [Manifestación]
Pestañas CSS responsivas [Manifestación]
Sólo otra pestaña CSS - Una estructura de pestañas bellamente diseñada construida con solo CSS, que funciona en navegadores modernos. Sin embargo, a diferencia de los poderosos complementos dados anteriormente, no tiene opciones avanzadas. [Manifestación]
Acordeón sensible a las pestañas - El Acordeón sensible a las pestañas, como su nombre indica, funciona como un acordeón o pestañas según el ancho de la pantalla. Eso muestra las pestañas si es posible más acordeón si el tamaño es pequeño. [Manifestación]
Tarjetas - CardTabs es un Complemento de pestañas ultraligeras basado en jQuery, que viene con múltiples temas. También puede crear nuevos temas y configurar la pestaña activa dinámicamente. [Manifestación]
Aria Tabs [Manifestación]
Pestañas Mínimas y Sexy - Un hermoso, nuevo fragmento de pestañas que es Disponible en dos combinaciones de colores: claro y oscuro.. Está construido utilizando jQuery, por lo que no es tan ligero como algunos de los complementos mencionados anteriormente. [Manifestación]
Widget con pestañas [Manifestación]
Pestañas adaptativas - Adaptive Tabs es un fragmento de pestañas simple y hermoso. Aparte del diseño moderno, no tiene más funciones como la disponible en algunos complementos avanzados que se mencionaron anteriormente. [Manifestación]
Pestaña de estilo de árbol [Manifestación]
Tabulous.js [Manifestación]
jQuery Tabs - jQuery Tabs es un complemento simple para crear pestañas. Como su nombre lo indica, es construido con jQuery, a diferencia de algunos complementos mencionados anteriormente que están construidos con CSS puro o JavaScript. [Manifestación]
jQuery rTabs [Manifestación]
Nota del editor: Esta publicación se publicó originalmente en junio de 2008 y se actualizó en abril de 2018 sobre la base del nuevo contenido..
