XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Responsive Vertical scrollable Tabs (http://xhtmlforum.de/showthread.php?t=74172)

TwisteD 05.01.2021 18:41

Responsive Vertical scrollable Tabs
 
Hallo zusammen,
bin neu hier und habe gerade eine Frage =)

Ich versuche aktuell TABS zu bauen, welche responsive und vertikal scrollbar sind. Das ganze komplett ohne JavaScript.

Der Inhalt bleibt variabel. Jetzt habe ich nur ein kleines Problem.

Ich hätte gerne das "label" im background farblich hinterlegt, wenn der "TAB" [radio] aktiv ist.
Leider bekomme ich es einfach nicht hin und hoffe auf Hilfe.

Hier der Code:
Code:

<style>
<!--
.search-tab-wrapper{width:100%;margin-left:auto;margin-right:auto}
.search-tab-radio{display:none}
.search-tabs{font-size:0;margin: 0}
.labels{overflow-y:auto;white-space:nowrap}
.labels .search-tab-label{background:#fff;color:#3b505e;border-bottom:3px solid #fff;display:inline-block;font-size:1rem;left:1px;margin-left:-1px;padding:10px 25px 7px;position:relative;vertical-align:bottom}
.labels .search-tab-label:hover{border-bottom:3px solid #00d5e0;color:#00d5e0;cursor:pointer}
.labels .search-tab-label i{display:block;text-align:center;font-size:1.3em;margin-bottom:6px}
.search-tabs .search-tab-panel{display:inline-block;overflow:hidden;position:relative;height:0;width:0}
.search-tabs .search-tab-content{display:block;float:left;font-size:1rem;width:100%;white-space:normal;background:#fff;color:#3b505e;border-top:1px solid #ccc}
span:focus{outline:none}
span:focus > .search-tab-label{background:#c40000!important}
.search-tabs .search-tab [type="radio"]:checked ~ .search-tab-panel{display:inline}
-->
</style>

HTML-Code:

<div class="search-tab-wrapper">
        <div class="labels">
                <span tabindex="0">
                        <label class="search-tab-label" for="search-tab1">Tab1</label>
                </span>
                <span tabindex="0">
                        <label class="search-tab-label" for="search-tab2-0">Tab2</label>
                </span>
                <span tabindex="0">
                        <label class="search-tab-label" for="search-tab2-1">Tab3</label>
                </span>
                <span tabindex="0">
                        <label class="search-tab-label" for="search-tab2-2"Tab4</label>
                </span>
                <span tabindex="0">
                        <label class="search-tab-label" for="search-tab2-3">Tab5</label>
                </span>
                <span tabindex="0">
                        <label class="search-tab-label" for="search-tab2-4">Tab6</label>
                </span>
        </div>
        <div class="search-tabs">
                <div class="search-tab">
                        <input class="search-tab-radio" type="radio" id="search-tab1" name="search-tabs-main" checked="checked">
                        <div class="search-tab-panel">
                                <div class="search-tab-content">
                                        Inhalt1
                                </div>
                        </div>
                </div>
                <div class="search-tab">
                        <input class="search-tab-radio" type="radio" id="search-tab2-0" name="search-tabs-main">
                        <div class="search-tab-panel">
                                <div class="search-tab-content">
                                        Inhalt2
                                </div>
                        </div>
                </div>
                <div class="search-tab">
                        <input class="search-tab-radio" type="radio" id="search-tab2-1" name="search-tabs-main">
                        <div class="search-tab-panel">
                                <div class="search-tab-content">
                                        Inhalt3
                                </div>
                        </div>
                </div>
                <div class="search-tab">
                        <input class="search-tab-radio" type="radio" id="search-tab2-2" name="search-tabs-main">
                        <div class="search-tab-panel">
                                <div class="search-tab-content">
                                        Inhalt4
                                </div>
                        </div>
                </div>
                <div class="search-tab">
                        <input class="search-tab-radio" type="radio" id="search-tab2-3" name="search-tabs-main">
                        <div class="search-tab-panel">
                                <div class="search-tab-content">
                                        Inhalt5
                                </div>
                        </div>
                </div>
                <div class="search-tab">
                        <input class="search-tab-radio" type="radio" id="search-tab2-4" name="search-tabs-main">
                        <div class="search-tab-panel">
                                <div class="search-tab-content">
                                        Inhalt6
                                </div>
                        </div>
                </div>
        </div>
</div>

Evtl. hat hier jemand eine Lösung?

top 06.01.2021 14:30

Moin,

ein ähnliches Problem hatte ich letztens auch.
Ohne JS sah ich nur den Weg die HTML-Struktur so zu ändern, dass das entsprechende Label-Feld erst nach dem dazugehörigen Input-Feld im Quelltext steht.

Entweder so:
HTML-Code:

<div class="search-tab-wrapper">
        <div class="search-tabs">
                <div class="search-tab">
                        <input class="search-tab-radio" type="radio" id="search-tab1" name="search-tabs-main" checked="checked">
                        <label class="search-tab-label" for="search-tab1">Tab1</label>
                        <div class="search-tab-panel">
                                <div class="search-tab-content">
                                        Inhalt1
                                </div>
                        </div>
                </div>
                <div class="search-tab">
                        <input class="search-tab-radio" type="radio" id="search-tab2-0" name="search-tabs-main">
                        <label class="search-tab-label" for="search-tab2-0">Tab2</label>
                        <div class="search-tab-panel">
                                <div class="search-tab-content">
                                        Inhalt2
                                </div>
                        </div>
                </div>
        ...

Vom Prinzip her habe ich das für die FAQ-Felder auf dieser Seite umgesetzt:
https://balancecoaching.de/faq.html
(Auch wenn es hier Checkboxen und keine Radioboxen sind.)

Oder (falls du deine Labels der Einfachheit halber in einer Gruppe bündeln möchtest) du setzt erst mal alle Input-Felder folgendermaßen vor die Elemente, die du damit beeinflussen willst:
HTML-Code:

<div class="search-tab-wrapper">
        <input class="search-tab-radio" type="radio" id="search-tab1" name="search-tabs-main" checked="checked">
        <input class="search-tab-radio" type="radio" id="search-tab2-0" name="search-tabs-main">
        <input class="search-tab-radio" type="radio" id="search-tab2-1" name="search-tabs-main">
        <input class="search-tab-radio" type="radio" id="search-tab2-2" name="search-tabs-main">
        <input class="search-tab-radio" type="radio" id="search-tab2-3" name="search-tabs-main">
        <input class="search-tab-radio" type="radio" id="search-tab2-4" name="search-tabs-main">
        <div class="labels">
                <label class="search-tab-label" for="search-tab1" tabindex="0">Tab1</label>
                <label class="search-tab-label" for="search-tab2-0" tabindex="0">Tab2</label>
                <label class="search-tab-label" for="search-tab2-1" tabindex="0">Tab3</label>
                <label class="search-tab-label" for="search-tab2-2" tabindex="0">Tab4</label>
                <label class="search-tab-label" for="search-tab2-3" tabindex="0">Tab5</label>
                <label class="search-tab-label" for="search-tab2-4" tabindex="0">Tab6</label>
        </div>
        <div class="search-tabs">
                <div class="search-tab">
                        <div class="search-tab-panel">
                                <div class="search-tab-content">
                                        Inhalt1
                                </div>
                        </div>
                </div>
                <div class="search-tab">
                        <div class="search-tab-panel">
                                <div class="search-tab-content">
                                        Inhalt2
                                </div>
                        </div>
                </div>
...

Bei der Lösung musst du allerdings für die maximal mögliche Anzahl an Feldern entsprechend viele verschachtelte Selektoren vorhalten:

HTML-Code:

<style type="text/css">
.search-tab-wrapper input:nth-of-type(1):checked ~ div.labels > label:nth-of-type(1),
.search-tab-wrapper input:nth-of-type(2):checked ~ div.labels > label:nth-of-type(2),
.search-tab-wrapper input:nth-of-type(3):checked ~ div.labels > label:nth-of-type(3)
/* usw.*/ {
  /* Style-Angaben */
}

.search-tab-wrapper input:nth-of-type(1):checked ~ div.search-tabs > div:nth-of-type(1),
.search-tab-wrapper input:nth-of-type(2):checked ~ div.search-tabs > div:nth-of-type(2),
.search-tab-wrapper input:nth-of-type(3):checked ~ div.search-tabs > div:nth-of-type(3)
/* usw.*/ {
  /* Style-Angaben */
}
</style>

Auf die Art hatte ich hier die Info-Felder umgesetzt:
https://www.parkhaus-huexstrasse.de/

Viel Erfolg,
top

PS: Ich hoffe es ist in Ordnung, wenn ich gleich bei meinem erstem Beitrag zwei Links gesetzt habe. :roll:


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:11 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023