Smooth, Semantic Tab Box

Developer
Keith Pickering
Size
4,256 Kb
Views
34,408
  1. Smooth, Semantic Tab Box Previews
  2. Smooth, Semantic Tab Box HTML Codes
  3. Smooth, Semantic Tab Box CSS Codes
  4. Smooth, Semantic Tab Box JS Codes

How do I make an smooth, semantic tab box?

What is a smooth, semantic tab box? How do you make a smooth, semantic tab box? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.

Smooth, Semantic Tab Box Previews
IQ Test

Smooth, Semantic Tab Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smooth, Semantic Tab Box</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Roboto:700,400,300);
body { font-size: 18px; font-weight: 300; font-family: "Roboto", sans-serif; padding: 50px; width: 600px; margin: 0 auto;
}
p { margin-top: 0; margin-bottom: 24px;
}
.tabs { position: relative; margin-bottom: 24px; height: 300px;
}
.tabs__item { position: relative; display: inline-block; z-index: 20; line-height: 2.5; margin-right: -0.28em; padding-left: 12px; padding-right: 12px; color: white; box-shadow: inset 0 50px #9b59b6; background-color: #ecf0f1; transition: box-shadow 0.35s ease-out, color 0.4s ease-out; cursor: pointer;
}
.tabs__item:hover { box-shadow: inset 0 50px #ac75c2;
}
.tabs__item:first-child { margin-left: 12px;
}
.tabs__item--active { color: #9b59b6; box-shadow: inset 0 0 #9b59b6 !important;
}
.tabs__item--active + .tabs__body { z-index: 10;
}
.tabs__body { position: absolute; overflow: hidden; left: 0; right: 0; height: 200px; margin-left: 0; padding: 24px; border-radius: 4px; border-bottom: 2px solid #cfd9db; background-color: #ecf0f1; transition: all 0.25s;
}
.tabs__content { opacity: 1; transition: all 0.15s ease-out;
}
.tabs__content--hidden { opacity: 0; transform: translate(0, 8px);
}
.tabs--vertical .tabs__item { display: block; width: 150px; margin-left: 0; box-shadow: inset 150px 0 0 #9b59b6;
}
.tabs--vertical .tabs__item:hover { box-shadow: inset 150px 0 0 #ac75c2;
}
.tabs--vertical .tabs__body { top: 0; left: 150px;
}
.tabs--vertical .tabs__content--hidden { transform: translate(8px, 0);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <dl class="tabs"> <dt class="tabs__item tabs__item--active">Tab 1</dt> <dd class="tabs__body"> <div class="tabs__content">This is a semantic tab box with some fancy animations.</div> </dd> <dt class="tabs__item">Tab 2</dt> <dd class="tabs__body"> <div class="tabs__content">It's super exciting.</div> </dd> <dt class="tabs__item">Tab 3</dt> <dd class="tabs__body"> <div class="tabs__content"><p>It relies on jQuery, and it can only be a fixed height due to the absolute positioning, but whatever. That's the price you're paying for sensible markup I guess.<p>Check out my multiple paragraphs.</div> </dd>
</dl>
<dl class="tabs tabs--vertical"> <dt class="tabs__item tabs__item--active">Tab 1</dt> <dd class="tabs__body"> <div class="tabs__content">This is the same thing, but vertical.</div> </dd> <dt class="tabs__item">Tab 2</dt> <dd class="tabs__body"> <div class="tabs__content">Same caveats as before, but I'll be damned if it isn't pretty.</div> </dd> <dt class="tabs__item">Tab 3</dt> <dd class="tabs__body"> <div class="tabs__content">Why are you reading these anyway</div> </dd>
</dl> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Smooth, Semantic Tab Box - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400,300);
body { font-size: 18px; font-weight: 300; font-family: "Roboto", sans-serif; padding: 50px; width: 600px; margin: 0 auto;
}
p { margin-top: 0; margin-bottom: 24px;
}
.tabs { position: relative; margin-bottom: 24px; height: 300px;
}
.tabs__item { position: relative; display: inline-block; z-index: 20; line-height: 2.5; margin-right: -0.28em; padding-left: 12px; padding-right: 12px; color: white; box-shadow: inset 0 50px #9b59b6; background-color: #ecf0f1; transition: box-shadow 0.35s ease-out, color 0.4s ease-out; cursor: pointer;
}
.tabs__item:hover { box-shadow: inset 0 50px #ac75c2;
}
.tabs__item:first-child { margin-left: 12px;
}
.tabs__item--active { color: #9b59b6; box-shadow: inset 0 0 #9b59b6 !important;
}
.tabs__item--active + .tabs__body { z-index: 10;
}
.tabs__body { position: absolute; overflow: hidden; left: 0; right: 0; height: 200px; margin-left: 0; padding: 24px; border-radius: 4px; border-bottom: 2px solid #cfd9db; background-color: #ecf0f1; transition: all 0.25s;
}
.tabs__content { opacity: 1; transition: all 0.15s ease-out;
}
.tabs__content--hidden { opacity: 0; transform: translate(0, 8px);
}
.tabs--vertical .tabs__item { display: block; width: 150px; margin-left: 0; box-shadow: inset 150px 0 0 #9b59b6;
}
.tabs--vertical .tabs__item:hover { box-shadow: inset 150px 0 0 #ac75c2;
}
.tabs--vertical .tabs__body { top: 0; left: 150px;
}
.tabs--vertical .tabs__content--hidden { transform: translate(8px, 0);
}

Smooth, Semantic Tab Box - Script Codes JS Codes

$(".tabs").each(function() { var $tabs = $(this), $tabItem = $tabs.children(".tabs__item"), $tabBody = $tabs.children(".tabs__body"), $tabContent = $tabBody.children(".tabs__content"); $tabItem.click(function() { var $currentTab = $(this); $tabContent.addClass("tabs__content--hidden"); $tabItem.removeClass("tabs__item--active"); setTimeout(function() { $currentTab.addClass("tabs__item--active"); }, 200); setTimeout(function() { $tabContent.removeClass("tabs__content--hidden"); }, 500); });
});
Smooth, Semantic Tab Box - Script Codes
Smooth, Semantic Tab Box - Script Codes
Home Page Home
Developer Keith Pickering
Username keithpickering
Uploaded August 10, 2022
Rating 3
Size 4,256 Kb
Views 34,408
Do you need developer help for Smooth, Semantic Tab Box?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keith Pickering (keithpickering) Script Codes
Name
Metro Interactive Live Tiles
Single-element Toggle Switch
Image with inset shadow
Notifications
CSS Business Card
Easy Container-Breaking Sidebar
Windows 10 Concept
Sliding Navigation Menu
Material Inspired Menu
Lovely Transforming Menu Button
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!