Tab-Navigation im Content

Das Accordion finde ich schon ganz schön. Wie gesagt kann man da ja auch beliebig viele Schaltflächen einbauen. Aber genau dann, finde ich es nicht mehr ganz so schick. Also durchwühlte ich das WWW nach anderen Möglichkeiten und stieß dann irgendwann auf dieses hier:

Tab-Navigation im Content

×

2018

Das ist das aktuelle Jahr. Und ich hangele mich Stück für Stück ein bisschen näher an eine Lösung heran. Um meine angedachten Lösungen ausgiebig testen können, legte ich diese Testseite an.

Ich hoffe wirklich, dass ich meine neue Homepage noch so gestaltet bekomme, dass ich rundum zufrieden bin und sie Mitte bis Ende diesen Jahres online stellen kann.

×

2017

In diesem Jahr ging es bereits ans tatsächliche Gestalten. Ich holte mir eine Free-Seite von Jimdo, richtete die Navigation anhand meiner vorher skizzierten Struktur ein und begann die Seiten mit Inhalten zu füllen.

Es dauerte nicht lang, bis ich bemerkte, dass die Seite mit der Anzahl meiner Inhalte einfach immer unübersichtlicher wurde. Bevor ich mich an die endgültige strukturelle Lösung machen wollte, sollten jedoch erst mal grob alle Inhalte stehen, damit ich auch wirklich alle "Knackepunkte" erkennen konnte.

×

2016

Aus Erfahrung mit meiner ersten Homepage wusste ich ja, wie aufwändig das Gestalten einer Homepage tatsächlich ist. Und wie wichtig es ist, sich von Anfang an darüber im Klaren zu sein, was man erzählen möchte und wie die Seite strukturiert sein soll.

Daher fing ich bereits Ende 2016 an, mir darüber erste Gedanken zu machen und die Struktur zu skizzieren.

×

2015

Zu dieser Zeit dachte ich noch gar nicht an eine 2. Homepage. Ich hatte mit meiner ersten mehr als genug zu tun.

Dieses einzubauen fand ich schon nicht mehr ganz so einfach. (Wie gesagt: Ich bin ein CSS/HTML/JavaScript-Dummie!) Meine erste Variante davon zerschoss mir (warum auch immer) den Jimdo-Bearbeitungsmodus.

Weitere Recherche brachte mir die og. Lösung, mit der der Bearbeitungsmodus wieder einwandfrei funktionierte. Wie du aber im Forum (vorheriger Link) nachlesen kannst, bin ich mit der Darstellung noch nicht ganz zufrieden und hoffe da noch auf Hilfe aus dem Forum.

Da ich auch dieses Menü genau wie das Accordion nur auf wenigen Seiten benötige, habe ich wieder alles in ein Widget gepackt:

<style>

/* <![CDATA[ */

.alles {

min-width: 320px;

max-width: 800px;

padding: 50px;

margin: 0 auto;

background: #fff;

-webkit-box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);

-moz-box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);

box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

/* Style the tab */

.tab {

overflow: hidden;

background: #fff;

border-bottom: 1px solid #bbb;

}

/* Style the buttons inside the tab */

.tab button {

float: right;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

Border: 1px solid transparent;

border-radius: 5px;

background: transparent;

cursor: pointer;

padding: 15px 25px;

transition: 0.3s;

font-size: 16px;

color: #bbb;

}

/* Change buttons on hover */

.tab button:hover {

color: #888;

-webkit-box-shadow: inset 3px 10px 25px 0px rgba(255,165,0,0.1);

-moz-box-shadow: inset 3px 10px 25px 0px rgba(255,165,0,0.1);

box-shadow: inset 3px 10px 25px 0px rgba(255,165,0,0.1);

}

/* Create an active/current tablink class */

.tab button.active {

color: #555;

background: rgba(255,165,0,0.05);

border: 1px solid rgba(255,165,0, 0.2);

-webkit-box-shadow: inset 1px 7px 19px 0px rgba(255,165,0, 0.15);

-moz-box-shadow: inset 1px 7px 19px 0px rgba(255,165,0, 0.15);

box-shadow: inset 1px 7px 19px 0px rgba(255,165,0, 0.15);

transition: 1s;

}

/* Style the tab content */

.tabcontent {

display: none;

}

/* Style the close button */

.topright {

float: right;

cursor: pointer;

margin-top: -15px;

margin-right: 10px;

font-size: 25px;

background: #fff;

padding: 0px 10px 0px 10px;

border: 1px solid #bbb;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

transition: 0.5s;

}

.topright:hover {

color: orange;

-webkit-box-shadow: inset 3px 10px 25px 0px rgba(255,165,0, 0.3), 3px 10px 25px 0px rgba(33, 33, 33, 0.75);

-moz-box-shadow: inset 3px 10px 25px 0px rgba(255,165,0, 0.3), 3px 10px 25px 0px rgba(33, 33, 33, 0.75);;

box-shadow: inset 3px 10px 25px 0px rgba(255,165,0, 0.3), 3px 10px 25px 0px rgba(33, 33, 33, 0.75);;

padding: 0px 10px 0px 10px;

transition: 0.5s;

}

/*]]>*/

</style>

/* <![CDATA[ */

function openJahr(evt, JahrName) {

var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {

tabcontent[i].style.display = "none";

}

tablinks = document.getElementsByClassName("tablinks");

for (i = 0; i < tablinks.length; i++) {

tablinks[i].className = tablinks[i].className.replace(" active", "");

}

document.getElementById(JahrName).style.display = "inline";

evt.currentTarget.className += " active";

}

// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

/*]]>*/

</script>