20+ jQuery Tab Bars - Free Code + Demos
Collection of 20+ jQuery Tab Bars. All items are 100% free and open-source.
1. Tab Bar Menu Animation
Author: Doğukan Çavuş (dgknca)
Links: Source Code / Demo, Www.youtube.com
Created on: September 21, 2019
Made with: HTML, SCSS, Babel
Tags: tab-bar, tab-menu, tab
2. Liquid Tab Bar Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: September 17, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
3. Transparent Fading Navigation Bar
Transparent Fading Navigation Bar with Mask Image
Author: MrPirrera (pirrera)
Links: Source Code / Demo, Dribbble Shot
Created on: August 23, 2014
Made with: HTML, CSS, JS
Tags: transparent, fading, navigation, menu
4. Fancy Tab Bar Active Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: August 21, 2019
Made with: HTML, SCSS, JS
Tags: tab, animation, mobile, menu, nav
5. 3D Tab Bar
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble.com
Created on: August 14, 2019
Made with: HTML, SCSS, JS
Tags: 3d, tab, bar, animation, menu
6. Login Bar
An animated login bar I have created. You can customize it just by changing the values of semantically created SASS variables, and use it in your projects!
Author: EGE ಠ_ಠ (macitege)
Links: Source Code / Demo
Created on: April 23, 2019
Made with: HTML, SCSS, JS
Tags: login, auth, login bar, auth bar, animated
7. Add File Tab Bar Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: December 20, 2018
Made with: HTML, SCSS, JS
8. Tab Bar Active Animation - CSS Only
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: June 11, 2019
Made with: HTML, SCSS
9. Tab Bar Active Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: October 18, 2018
Made with: HTML, SCSS, JS
Tags: tab-bar, active, animation, icons, particle
10. Tab Bar Interaction
Author: Zed Dash (z-)
Links: Source Code / Demo, Dribbble Shot
Created on: October 10, 2018
Made with: HTML, SCSS, JS
Tags: tab, animation
11. Fluid Tab Active State
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shots
Created on: February 22, 2017
Made with: HTML, Sass, JS
Tags: tabs, menu, jquery, bar
12. Tab Bar Active Animation
From https://dribbble.com/shots/5380015-WeChat-Tab-Bar-Redesign
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: October 18, 2018
Made with: HTML, SCSS, JS
Tags: tab-bar, active, animation, icons, particle
13. Mobile Tab Bar Animation
Inspired by https://dribbble.com/shots/6745653-Simple-tab-bar
Author: Doğukan Çavuş (dgknca)
Links: Source Code / Demo
Created on: September 24, 2019
Made with: HTML, SCSS, Babel
Tags: tab-bar, tab-menu, mobile tab
14. Tab Bar Menu Animation
From this video https://www.youtube.com/watch?v=OVYsPQkOhyc ,,
Author: Nguyễn Đức Chiến (nguyenchienbg2k)
Links: Source Code / Demo
Created on: October 8, 2019
Made with: HTML, SCSS, Babel
Tags: tab-bar, tab-menu, tab
15. Tab Bar Animation
Author: Animation Bro (animationbro)
Links: Source Code / Demo
Created on: May 3, 2020
Made with: HTML, CSS, JS
Tags: tab bar animation, tab-bar, animation
16. Foldable Tab Bar
I saw a nice transition the other day on Into the Arctic (http://intothearctic.gp) - done by the excellent Hello Monday - and wanted to see what it would take to recreate. The use of transforms to reveal additional content was a really nice touch. A good opportunity to learn a little more ...Read More
Author: teolee (teolee)
Links: Source Code / Demo
Created on: December 23, 2013
Made with: HTML, CSS, JS
Tags: tabs, css3, 3d, transition, transform
17. Mobile Tab Bar
Author: Julio Carvalho (jclimac)
Links: Source Code / Demo
Created on: August 30, 2019
Made with: HTML, SCSS, JS
18. Tab Bar Active Animation
From https://dribbble.com/shots/5462768-Tab-Bar-Animation
Author: Hakkı (Sunephe)
Links: Source Code / Demo
Created on: June 6, 2020
Made with: HTML, SCSS, JS
Tags: tabbar, animation, menu, mobile, tab
19. Tab Bar (Chrome/firefox)
Author: Andreas Storm (avstorm)
Links: Source Code / Demo
Created on: July 8, 2019
Made with: Pug, Stylus, CoffeeScript
CSS Pre-processor: Stylus
JS Pre-processor: CoffeeScript
HTML Pre-processor: Pug
Tags: pug, nav, menu, gooey
More Awesome Lists:
Share: