If you have been coding for a while, you must have needed to use tabs once or twice. And that’s not a surprise. They offer an efficient way of organizing information with an easy to follow navigation. While we used to have tabs powered by JS a few years ago, recently with CSS3, we can avoid that altogether and use the CSS versions directly. No more extra JS file to be loaded when you visit the site. Just plain old CSS. Check out these CSS tabs options that I added below. There are some really neat options that you can download and use. P.S. Some of these may use JavaScript. I added them because they were good and it would have been a shame not to include them. CSS TabsSipmle HTML and CSS tabs. Sliding Tab Box ThingsJust a transition-y thing for hidden content areas. Sexy TabsSimple HTML and CSS tabs. Responsive CSS TabsTransformer TabsRWD n stuff! One set of semantic HTML. One set of JS. Tabs that turn into a small-screen-capable tap-to-reveal fully-functional system. Material Expanding Overlay – Top-Aligned TabsHTML, CSS and JavaScript material expanding overlay – yop-aligned tabs. Adaptive tabsTabs that animate to the height of their content when switched. Pure CSS Color Tabs (no label)HTML and CSS color tabs. TabsHTML, CSS and JavaScript tabs. Tabs. Pitaya CSSIt’s another experiment to make tabs without JavaScript. Tab UITab UI with HTML, CSS and JavaScript. Pure CSS Tabs With IndicatorHTML and CSS tabs with indicator. Pure CSS TabsJust CSS, no JS! CSS3 Tabs by SoraxCSS3 Tabs by Sorax. Original: http://jsbin.com/uworip/59 Css tabsHTML and CSS tabs. Light & Sexy TabsLight tabs with HTML, CSS and JavaScript. Flying cards tabsFlying cards tabs in HTML, CSS and JavaScript. Accordion / Tabs with animationA simple tabs/accordions solution with jQuery, HTML and CSS. Toggle TabsToggle switch style tab navigation. Currently only works with two tabs. Scroll for TabsHTML, CSS and JavaScript scroll for tabs. bootstrap tab with onclick step effectBootstrap tab with onclick step effect. Pure CSS tabs“Technically, you don’t need the JS as this is just to set the min-height value. You could do this manually in the CSS, but I wanted to show both options.” – Jay Pick Featured TabsFeatured tabs with HTML, CSS and JS.UI/UX example: Tab switch animationLow fidelity mobile phone mockup done with CSS and a nice tab switch animation. Daily UI #007 | SettingsHulu settings redesign. Toggle between the tabs on the left hand bar. Little fade-in animation when switching tabs. Elastic TabsClick on tabs to see them in action. Breadcrumbs & tabsA fusion between breadcrumbs & tabs creates a new kind of Rolodex-like navigation. Built with If you enjoyed reading this article about CSS tabs, you should read these as well:
The post CSS tabs: Snippets that you can use in your website’s code appeared first on Design your way. from https://www.designyourway.net/blog/css-html/css-tabs/
0 Comments
Leave a Reply. |
AuthorPleasure to introduce myself I am Jamie 27 years old living in Searcy, AR. I am web developer and have developed over 50 sites for clients. Now a days I am focused on designing as I feel I am lacking it. Archives
April 2019
Categories |