Tabs (Inpage Filter)
CODE
×
HTML
<div class='nav-tabs-ext'> <div class='select filter-2'>Beliebteste</div> <div class='tab-2 active'>Beliebteste</div> <div class='tab'>Informationen und Daten abrufen</div> <div class='tab'>Dokumente bestellen</div> <div class='search-icon'></div> </div>
CSS
@media screen and (max-width: 1119px) { div.nav-tabs-ext { margin-left: 30px; margin-right: 30px; } } @media screen and (max-width: 767px) { div.nav-tabs-ext { margin-left: 20px; margin-right: 20px; } } div.search-icon { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; height: 32px; width: 32px; right: 24px; top: 16px; position:absolute; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } div.tab-2.active { background-color: rgba(78,78,78,1); color: var(--white); font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; text-align:center; display: inline-block; border-radius: 41px; border: none; padding: 11px 20px 12px 20px; vertical-align: middle; margin: 18px 5px; -webkit-transition: all 180ms ease-in-out; transition: all 180ms ease-in-out; cursor: pointer; overflow: hidden; margin-right: 15px; margin-left: 15px; } div.select.filter-2 { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIgOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMTAuNywwLjlMNiw1LjdMMS4zLDAuOUwwLjYsMS42TDYsNy4xbDUuNC01LjVMMTAuNywwLjl6Ii8+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-size: 12px 8px; background-position: calc(100% - 30px) center; } div.nav-tabs-ext > div.select.filter-2 { display: none; } div.nav-tabs-ext > div.tab-2.active { margin-bottom: 12px; margin-left: 0px; } div.nav-tabs-ext > div.tab { margin-bottom: 12px; } div.nav-tabs-ext > div.tab { margin-bottom: 12px; } div.nav-tabs-ext > div.search-icon { display: block; top: 23px; } div.tab:first-of-type { margin-left: -1px; } @media screen and (max-width: 767px) { div.nav-tabs-ext > div.select.filter-2 { display: block; } div.nav-tabs-ext > div.tab-2.active { display: none; } div.nav-tabs-ext > div.tab { display: none; } div.nav-tabs-ext > div.tab { display: none; } div.nav-tabs-ext > div.search-icon { display: none; } } div.tab { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: 0.02rem; word-spacing: 0.05rem; text-align:center; display: inline-block; border-radius: 41px; border: none; padding: 11px 20px 12px 20px; vertical-align: middle; margin: 18px 5px; -webkit-transition: all 180ms ease-in-out; transition: all 180ms ease-in-out; cursor: pointer; overflow: hidden; cursor:pointer; color: var(--black); background-color: var(--white); } div.tab:hover, div.tab:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } div.select { color: rgba(112,112,112,1); line-height: 1.4; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 17px; padding-right: 62px; padding-bottom: 12px; padding-left: 28px; width: 100%; max-width: 800px; height: 59px; }
JS
Tabs (Inpage Filter)
×
Beliebteste
Beliebteste
Informationen und Daten abrufen
Dokumente bestellen