Responsive Horizontal Scrollable & Draggable Tab Menu | With Tab Content - Html, CSS & Javascript
HTML-код
- Опубликовано: 16 май 2024
- Responsive Horizontal Scrollable & Draggable Tab Navigation Menu | With Tab Content - Html, CSS & Javascript
In this video, you can learn how to create a responsive tab navigation menu that can be horizontally scrollable with left/right scroll buttons & draggable with the cursor using HTML, CSS and Javascript. Also, you can learn how to open each tab content by clicking each tab button in the tab navigation menu.
+ Like and Subscribe 🔔 for More! ❤
∎ Get This Project Source Codes - www.buymeacoffee.com/codingsn...
✔️ Clear Coding
✔️ Easy to Follow
📚 Chapters
----------------------------
0:00 - Project demo
3:14 - File setup
3:43 - Link Unicons
4:05 - Tab navigation menu (Html)
5:31 - Google fonts
6:20 - Main CSS with CSS Variables
8:25 - Tab navigation menu (Css)
13:22 - Tab menu left/right scroll buttons (Html, Css, Javascript)
24:15 - Make scroll buttons visibility compatible with a none scrollable tab-menu-bar (Javascript)
26:23 - Make scroll buttons visibility compatible with smaller screens (Javascript)
29:53 - Make the tab menu draggable (Javascript, Css)
35:58 - Tab Content (Html, Css)
46:17 - Open each tab content by clicking tab buttons (Javascript, Css)
52:30 - Media queries
Book Me 🔖
-----------------------
∎ Book me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsn...
∎ Book me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsn...
∎ Download File Setup and Images - codingsnow.com
∎ Download All Source Files On Patreon - / 75564550
∎ Facebook Page - / codingsnow
∎ Instagram - / coding.snow
∎ Support From Paypal - paypal.me/codingsnowget
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - / codingsnow
🔗External Sources
------------------------------------
∎ Image Source - www.pexels.com
∎ Unicons - iconscout.com/unicons/getting...
#CodingSnow #WebDesign #Tabs #TabMenu
----------------------------------------------
Copyright Disclaimer under section 107 of the Copyright Act of 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing.
🎵 Background Music
---------------------------------------
Song: Niwel - Stories
Music provided by Vlog No Copyright Music.
Video Link: • Niwel - Stories (Vlog ...
Song: Ikson - We Are Free (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
Video Link: • Ikson - We Are Free (V...
Something 'bout July (Instrumental) by RYYZN
/ ryyzn
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/-_something-bout-july
Music promoted by Audio Library • Something 'bout July (...
![Natanael Cano - Ya Te Olvidé [Official Video]](http://i.ytimg.com/vi/xLig8I91SJQ/mqdefault.jpg)
Beautiful, said a lot of words without saying a single word
bro amazing 🤯
Wow...Super useful tutorial ❤❤ Amazing man!
Thanks man ❤
great job! thanks a lot!
great video about tabs!!!!! Thank u❤
This is exactly what l'm looking for , Great Video 👍👏
Thank you ❤️
Pretty good, the only thing missing would be to activate the left arrow when you're scrolling with your mouse etc, like how RUclips has done it.
Wow. What platform are you using? Like VScode?
This is 🔥
Thank you ❤️
nice
Awesome, bro! I used this script in my code, and it worked perfectly on the first try
can you send JS code please
because it doesn't work with me
is there any way to categorize these states alphabetically?
Bro solved 90% of my problems saying 🗣️🔉🎼🎷🎶🎶🎵🎶🎼🎼
bro in 39:53 how can you put the teks beside the image???, why i can't do that
Beautifull video. But active tab changes on page refresh. Please help with coding.
How can I implment this with react please ?
15:18 left-btn, right-btn not working in css for me. i have done same as in the video. possible mistake?
can you send me the HTML & CSS
beautyful but it does not function (Uncaught TypeError: Cannot read properties of undefined (reading 'add') where there is tab_Nav(i) )
wow amazing video this video is helpfull for me but
i'want to downlaod this source code
i'm a ARTS STUDENT i'm learning website design in youtube
how can get source code free
bro i buy your code but it not working properly in worpress will you please help me to get rid off from problem
Please send me a email.
@@CodingSnow bro i already send you regarding my issue
NIce