Tabmenu

Blätterfunktion II

eine weitere Möglichkeit zum Blättern im Seiteninhalt . Nennt man auch "content-slider", oder "Tab-Slider", oder auch "Tab-Menü". Es funktioniert mit reinem CSS. Kann allerdings nur einmal - pro Seiteninhalt - eingefügt werden.



In meinem "Impressum" eine weitere Möglichkeit :   >> Demo Impressum

Tipp für Bilder:
Ich habe im Beispiel meine Instagram-Bilder verwendet.
Höhe und Breite haben den gleichen Wert (alle 4 Seiten gleich lang).
Oder mit GIMP oder Photoscape zuschneiden.
Quadratische Bilder ermöglichen rechts daneben mehr Text.

---

Schritt 1: Der HTML-Code für Seiteninhalt

- auf "Seiten"
- wähle eine Seite aus
- im Editor (Werkzeugleiste) auf "Quellcode" klicken
- die Seite ist nun in HTML-Code-Ansicht
- an gewünschter Stelle einfügen:

<div class="tabbox">

  <input type="radio" name="tabbox" id="tab_1" checked="checked">
  <label for="tab_1">  Titel 1 </label>

      <div class="inhalt">
      Hier Dein Inhalt hinein für DIV 1
      </div>

  <input type="radio" name="tabbox" id="tab_2" checked="checked">
  <label for="tab_2"> Titel 2 </label>

      <div class="inhalt">
      Hier Dein Inhalt hinein für DIV 2
      </div>

  <input type="radio" name="tabbox" id="tab_3" checked="checked">
  <label for="tab_3"> Titel 3 </label>

      <div class="inhalt">
      Hier Dein Inhalt hinein für DIV 3
      </div>

  <input type="radio" name="tabbox" id="tab_4" checked="checked">
  <label for="tab_4"> Titel 4 </label>

      <div class="inhalt">
      Hier Dein Inhalt hinein für DIV 4
      </div>

</div>

Bild mit Text einfügen ?
Im obigen HTML-Code ersetze Hier Dein Inhalt hinein für DIV durch :

<img style="width:200px; float:left; margin-right:20px;" src="GRAFIKADRESSE" alt="">
 Und hier der Text, der sich neben dem Bild platziert

---

Schritt 2: Der CSS-Code

<style type="text/css">
<!-->
.tabbox {
     display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; 
    -webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;
     padding-top: 1em;
     box-shadow: 5px 5px 15px #555; }

/* Button zum Inhalt wechseln */
.tabbox label {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 1;-ms-flex-order: 1;order: 1;
    display: block;
    padding: 0rem 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
    background: #DDDDDD;
    font-weight: bold;
    font-size: 14px;
    border:1px solid #ccc;
    transition: background ease 0.2s; }

/* die DIV mit Inhalt */
.tabbox .inhalt {
    -webkit-box-ordinal-group: 100;-webkit-order: 99;-ms-flex-order: 99;order: 99;
    -webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
    width: 100%;
    display: none;
    padding: 1rem;
    margin-top: 2px;
    background: #FFFFFF; }

.tabbox input[type="radio"] { position: absolute; opacity: 0; }
.tabbox input[type="radio"]:checked + label { background: #fafafa; }
.tabbox input[type="radio"]:checked + label + .inhalt { display: block; }
-->
</style>

Ich empfehle diesen CSS-Code mit im Seiteninhalt einzufügen, wenn dieser "content-slider" auch auf anderen Seiten eingefügt wird. Er kann dann auf jeder Seite ein anderes Aussehen bekommen, z.B. ohne Schatten (box-shadow:) , andere Button-Farben (background:)