Tabs and Filters
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 - 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'> + NOTE </div> </div> <div class='add-item-wrap'> <div class='item'> + URL </div> </div> <div class='add-item-wrap'> <div class='item'> + 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(); }
});
Developer | Ken Lane |
Username | kenlane22 |
Uploaded | October 25, 2022 |
Rating | 3 |
Size | 6,930 Kb |
Views | 30,360 |
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!
Name | Size |
Money Buttons | 1,774 Kb |
A Pen by Ken Lane | 1,707 Kb |
PinGame3 | 18,875 Kb |
Word Array Into Sentences | 2,953 Kb |
Links in FirePad | 3,201 Kb |
Pin Game2 | 18,417 Kb |
Magnify Linked Page Area | 7,515 Kb |
Twinkling Word Cloud | 3,299 Kb |
ZoomCards | 2,926 Kb |
Pin Game | 14,075 Kb |
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!
Name | Username | Size |
Realistic Buttons | Stoypenny | 2,248 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Haml Calendar | Katydecorah | 5,643 Kb |
Intake Form Page 2 | Ijantje | 4,983 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!