Tabs and Filters

Developer
Ken Lane
Size
6,930 Kb
Views
30,360
  1. Tabs and Filters Previews
  2. Tabs and Filters HTML Codes
  3. Tabs and Filters CSS Codes
  4. Tabs and Filters JS Codes

How do I make an tabs and filters?

What is a tabs and filters? How do you make a tabs and filters? This script and codes were developed by Ken Lane on 25 October 2022, Tuesday.

Tabs and Filters Previews
IQ Test

Tabs and Filters - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tabs and Filters</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='body'> <div class='hex-tabs' data-tab> <div class='spacer'></div> <div class='hex-tab'> <div class='up'> <svg height='41' width='24'> <line style='stroke:rgb(255,255,255); stroke-width:1;' x1='24' x2='0' y1='0' y2='41'> No SVG. </line> </svg> </div> <div class='up2'></div> <div class='text two-rows' href='#share-board'> Share <div class='share-icons'> <i class='fa fa-facebook'></i> <i class='fa fa-twitter'></i> <i class='fa fa-linkedin'></i> <i class='fa fa-slack'></i> </div> </div> <div class='down'> <svg height='41' width='24'> <line style='stroke:rgb(255,255,255); stroke-width:1;' x1='0' x2='24' y1='0' y2='41'> No SVG. </line> </svg> </div> <div class='down2'></div> </div> <div class='spacer'></div> <div class='hex-tab active'> <div class='up'> <svg height='41' width='24'> <line style='stroke:rgb(255,255,255); stroke-width:1;' x1='24' x2='0' y1='0' y2='41'></line> No SVG. </svg> </div> <div class='up2'></div> <div class='text' href='#cards'> Cards </div> <div class='down'> <svg height='41' width='24'> <line style='stroke:rgb(255,255,255); stroke-width:1;' x1='0' x2='24' y1='0' y2='41'></line> No SVG. </svg> </div> <div class='down2'></div> </div> <div class='spacer'></div> <div class='hex-tab'> <div class='up'> <svg height='41' width='24'> <line style='stroke:rgb(255,255,255); stroke-width:1;' x1='24' x2='0' y1='0' y2='41'> No SVG. </line> </svg> </div> <div class='up2'></div> <div class='text text2' href='#activity'> Activity <div class='button-badge'>48</div> </div> <div class='down'> <svg height='41' width='24'> <line style='stroke:rgb(255,255,255); stroke-width:1;' x1='0' x2='24' y1='0' y2='41'> No SVG. </line> </svg> </div> <div class='down2'></div> </div> <div class='spacer'></div> <div class='hex-tab'> <div class='up'> <svg height='41' width='24'> <line style='stroke:rgb(255,255,255); stroke-width:1;' x1='24' x2='0' y1='0' y2='41'> No SVG. </line> </svg> </div> <div class='up2'></div> <div class='text text2' href='#chat'> Chat <div class='button-badge'>17</div> </div> <div class='down'> <svg height='41' width='24'> <line style='stroke:rgb(255,255,255); stroke-width:1;' x1='0' x2='24' y1='0' y2='41'> No SVG. </line> </svg> </div> <div class='down2'></div> </div> <div class='spacer'></div> </div> <div style='float:clear;'> <div class='page' id='cards'> <div class='filter-by'> Filter by: </div> <div class='filters'> <div class='filter'> <span class='msg'> <div class='tiny'>Pinned</div> <div class='tiny'>By You</div> </span> <span class='count'>5</span> </div> <div class='filter active-filter'> <span class='msg'> <div class='tiny'>Tanjo Bot</div> <div class='tiny'>Recommends</div> </span> <span class='count'>33</span> </div> <div class='filter'> <span class='msg'> <div class='tiny'>Pinned By</div> <div class='tiny way-tiny'>Collaborators</div> </span> <span class='count'>7</span> </div> <div class='filter'> <span class='msg'> <div class='tiny'>No</div> <div class='tiny'>Filter</div> </span> <span class='count'>45</span> </div> </div> <div class='add-button-box'> <div class='add-button'> <a href='#'> <div class='inner'> + </div> <div class='add-card'> ADD </div> <div class='add-card add-card-bot'> CARD </div> </a> </div> </div> <div class='add-menu' style='display:none;'> <div class='add-item-wrap'> <div class='item'> + &nbsp; &nbsp; &nbsp; NOTE </div> </div> <div class='add-item-wrap'> <div class='item'> + &nbsp; &nbsp; &nbsp; URL </div> </div> <div class='add-item-wrap'> <div class='item'> + &nbsp; &nbsp; &nbsp; FILE </div> </div> </div> <div class='sort-cards'> <div class='inner'> SORT CARDS </div> </div> </div> <div class='page' id='activity' style='display:none;'> <div class='filter-by'> Filter by: </div> <div class='filters'> <div class='filter smaller'> <span class='msg'>All</span> <span class='count'>5</span> </div> <div class='filter smaller'> <span class='msg'>Bots</span> <span class='count'>5</span> </div> <div class='filter smaller active-filter'> <span class='msg'>Humans</span> <span class='count'>33</span> </div> <div class='filter smaller'> <span class='msg'>Messages</span> <span class='count'>7</span> </div> <div class='filter smaller'> <span class='msg'>Me</span> <span class='count'>45</span> </div> </div> </div> <div class='page' id='share-board' style='display:none;'> Share </div> <div class='page' id='chat' style='display:none;'> Chat </div> </div>
</div> <script src='http://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/foundation.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tabs and Filters - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700|Arvo:400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700|Arvo:400,700);
.body { color: white; background-color: #FFF; margin: 0; padding: 0; font-family: "Source Sans Pro", sans-serif;
}
.hex-tabs { background-color: #56688b; border-bottom: 1px solid white; height: 46px; display: flex; width: 100%; text-transform: uppercase;
}
.hex-tabs .spacer { width: 33%;
}
.hex-tabs .hex-tab { color: white; margin: 5px 0 0 0; z-order: 10; cursor: pointer; min-width: 200px; position: relative; bottom: -1px; height: 42px;
}
@media (max-width: 822px) { .hex-tabs .hex-tab { min-width: 120px; }
}
@media (max-width: 495px) { .hex-tabs .hex-tab { min-width: 80px; }
}
.hex-tabs .hex-tab:hover > .text { text-decoration: underline;
}
.hex-tabs .hex-tab .up { float: left; height: 41px; width: 24px;
}
@media (max-width: 495px) { .hex-tabs .hex-tab .up { display: none; }
}
.hex-tabs .hex-tab .up2 { float: left; height: 41px; width: 1px; border-left: solid 1px white;
}
@media (min-width: 496px) { .hex-tabs .hex-tab .up2 { display: none; }
}
.hex-tabs .hex-tab .text { float: left; border-top: solid 1px white; vertical-align: middle; align: center; line-height: 41px; height: 41px; color: white; font-weight: 100; padding: 0 5px; width: 140px; text-align: center; display: block;
}
@media (max-width: 822px) { .hex-tabs .hex-tab .text { width: 135px; width: 200px; padding: 3px 1px 0 1px; width: 65px; line-height: 38px; }
}
@media (max-width: 822px) { .hex-tabs .hex-tab .two-rows { line-height: 17.5px; }
}
.hex-tabs .hex-tab .down { float: left; height: 41px;
}
@media (max-width: 495px) { .hex-tabs .hex-tab .down { display: none; }
}
.hex-tabs .hex-tab .down2 { float: left; height: 41px; border-right: solid 1px white;
}
@media (min-width: 496px) { .hex-tabs .hex-tab .down2 { display: none; }
}
.hex-tabs .share-icons { float: right; font-size: 12px; padding-left: 2px;
}
.hex-tabs .share-icons i { padding: 0 2px;
}
.hex-tabs .button-badge { float: right; background-color: #fa3e3e; border-radius: 5px; color: white; margin: 10px 0 0 0; padding: 4px 5px 2px 4px; font-size: 15px; font-weight: 100; height: 17px; line-height: 17px; position: absolute; top: -1px; left: 35px;
}
@media (max-width: 822px) { .hex-tabs .button-badge { left: 0px; top: -4px; }
}
@media (max-width: 495px) { .hex-tabs .button-badge { left: -2px; top: -15px; padding: 1px 2px 0px 1px; }
}
.hex-tabs .active .up, .hex-tabs .active .down, .hex-tabs .active .text, .hex-tabs .active .text2 { background: #56688b;
}
@media (max-width: 495px) { .hex-tabs .active .up, .hex-tabs .active .down, .hex-tabs .active .text, .hex-tabs .active .text2 { border-top: solid white 3px; }
}
.page { background-color: #56688b; padding: 15px; border: solid 1px white; border-top: none;
}
.hide { display: none !important;
}
.body { font-family: "Source Sans Pro", sans-serif;
}
.header { background: #56688b; height: 90px; padding: 30px 30px 0;
}
.filter-by { height: 250px; display: block; float: left; color: #ddd;
}
.filters { font-family: "Source Sans Pro", sans-serif; color: #fff;
}
.filters .label { display: inline-block; vertical-align: middle; margin-bottom: 5px; height: 30px; font-weight: 300;
}
.filters .label-spacer { height: 1px; width: 75px; padding: 0; float: right;
}
.filters .filter { position: relative; border: 1px solid #ddd; margin: 0 4px 6px; color: #ddd; background: #56688b; padding: 0px 10px 0 7px; display: inline-block;
}
.filters .filter:hover { border: 1px solid white; cursor: pointer;
}
.filters .filter:hover span { text-decoration: underline;
}
.filters .filter span { display: inline-block;
}
.filters .filter .tiny { text-align: right; width: 69px; font-size: 11px; height: 12px; text-transform: uppercase;
}
.filters .filter .way-tiny { font-size: 10px; position: relative; left: -4px;
}
.filters .filter .count { font-size: +20px; position: relative; text-align: center; top: -4px; padding-left: 5px; min-width: 23px; text-decoration: none !important;
}
.filters .filter .msg { display: ininle-block;
}
.filters .smaller { height: 30px;
}
.filters .smaller .msg { font-size: 12px; font-weight: 300; text-transform: uppercase;
}
.filters .smaller .count { position: relative; top: 1px;
}
.active-filter { border-bottom: solid 4px white !important;
}
.filter:before { position: absolute; left: -1px; top: -1px; content: ''; border-top: 15px solid silver; border-right: 15px solid transparent;
}
.filter:after { position: absolute; left: -2px; top: -2px; content: ''; border-top: 15px solid #56688b; border-right: 15px solid transparent;
}
.add-button-box { position: relative;
}
.add-button { border: solid 10px #56688b; position: absolute; top: -25px; left: -15px; display: inline-block; overflow: hidden;
}
@media (min-width: 624px) { .add-button { top: -15px; }
}
.add-button a { text-decoration: none;
}
.add-button a:hover .inner { background: white;
}
.add-button a:hover .add-card { color: black; font-weight: 300; text-decoration: underline;
}
.add-button a:hover .inner { color: black; border-color: white;
}
.add-button .outer { border: solid orange 0.5px;
}
.add-button .inner { font-size: 31px; line-height: 39px; border: solid 1px white; width: 38px; text-align: center; color: white; background: #56688b;
}
.add-button .add-card { position: absolute; font-size: 10px; top: 1px; left: 11px; color: #778296; font-weight: 100; letter-spacing: 1px;
}
.add-button .add-card-bot { top: 27px; left: 7px;
}
.sort-cards { position: relative; display: inline-block; font-size: 10px; right: -15px; float: right; top: -2px; border: solid 8px #56688b; background: #56688b; cursor: pointer;
}
.sort-cards .inner { border: solid 1px white; padding: 2px 3px; margin: 0 0 2px 0;
}
.sort-cards:hover { text-decoration: underline;
}
.add-menu { display: inline-block; background: #56688b; padding: 10px; color: white; position: absolute; left: 58px; border: solid white 1px;
}
.add-menu .add-item-wrap { position: relative; border: solid 1px white; margin: 5px 3px 5px 0;
}
.add-menu .add-item-wrap .item { padding: 6px 16px; cursor: pointer; font-weight: 100;
}
.add-menu .add-item-wrap .item:hover { text-decoration: underline;
}
.item:before { position: absolute; left: -1px; top: -1px; content: ''; border-top: 15px solid silver; border-right: 15px solid transparent;
}
.item:after { position: absolute; left: -2px; top: -2px; content: ''; border-top: 15px solid #56688b; border-right: 15px solid transparent;
}

Tabs and Filters - Script Codes JS Codes

$(".hex-tab").mousedown( function()
{ $(".hex-tab").removeClass("active"); $(this).addClass("active"); $(".page").hide(); var a = $(this).find(".text").attr("href"); console.log( a ); $( a ).show();
});
$(".filter").mousedown( function()
{ $(".filter").removeClass("active-filter"); $(this).addClass("active-filter");
});
var addMenuShown = false;
var upBlocked = false;
$(".add-button-box").click( function()
{ upBlocked = true; $(".add-menu").toggle(); setTimeout( function(){ upBlocked = false; },50);
});
$(document).click( function()
{ if( !upBlocked ) { $(".add-menu").hide(); }
});
Tabs and Filters - Script Codes
Tabs and Filters - Script Codes
Home Page Home
Developer Ken Lane
Username kenlane22
Uploaded October 25, 2022
Rating 3
Size 6,930 Kb
Views 30,360
Do you need developer help for Tabs and Filters?

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!

Ken Lane (kenlane22) Script Codes
Name
Twinkling Word Cloud
Links in FirePad
Filter Buttons With Count
Twinkling Word Cloud React
Money Buttons
Pin Game1
Pin Game
ZoomCards
CSS Tab UI with SVG diagonal lines
A Pen by Ken Lane
Create amazing captions 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!