find-templates - Tab Menu

Tab Menu

jQuery Tabbed-Menü:

Für den Baukasten angepasst , nach Original-Beispiel von "yensdesign.com"

jQuery tabbed menu :

Das Feld kann in Farbe + Größe angepasst werden. Im CSS Code müssen 2 Breiten geändert werden. Siehe #teaser und #teaser ul

Grafiken

auch Grafiken lassen sich hier einfügen mit <img src="Bild-URL" alt="" />
Damit sich Text neben Bild platziert, bekommt der Bildercode noch folgendes dazu:
style="float: left; margin-right:15px;"

mehrfach Einfügen ?

Das "tabbed menu" sollte nur einmal pro erstellte Seite eingebunden werden, weil neben Klassennamen auch ID-Namen im Code stehen. Und ID-Namen dürfen im Quellcode einer Seite nicht doppelt vorkommen.

Schritt 1: Der CSS Code

Baukasten-Design "CSS" : Code einfügen im Feld "css ohne style tags".
Alle anderen Designs: Einfügen im Feld "Text über Design", vor dem --></style>

#teaser {
       width: 400px; 
       overflow: hidden; }

#teaser ul {
       width: 400px; 
       list-style-type: none; 
       padding: 0px; 
       margin: 0px; }

#teaser ul.menu li {
	float: left;
	margin-right: 5px;
	margin-bottom: -1px; }


/* Menu-Buttons oben */
#teaser ul.menu li {
	font-weight: bold;
	display: block;
	padding: 5px 10px 5px 10px;
	background-color: #efefef;
	margin-bottom: -1px;
	border: 1px solid #d0ccc9;
	color: #898989;
	cursor: pointer; }

#teaser ul.menu li.active {
	background: #fff;
	top: 1px;
	border-bottom: 0;
	color: #5f95ef; }

#teaser ul.menu li:hover {
        color: #202020;
        background-color:#ddd; }

/******* INHALT *******/
.inhalt {
        font-size: 11px;
        color: #000000;
        background-color: #FFFFFF;
	border: 1px solid #d0CCC9;
        margin: 0pt auto;
	text-align: left;
	padding: 20px 10px 20px 10px; }


/* Ueberschriften im Inhalt */
.inhalt h2 {
        font-size: 14px;
        font-family: arial;
        color: #343434; 
        margin-bottom: 10px; }

.inhalt.news_1 { display: block; }
.inhalt.news_2 { display: none; }
.inhalt.news_3 { display: none; }

Wenn noch KEINE CSS-Codes im Feld "Text über Design" eingefügt wurden sind:
Schreibe vor dem Code <style type="text/css"></style>

Schritt 2: jQuery javascript Code

- auf "Eigene Seiten editieren"
- Seite wählen, wo das "Menü" hinein soll
- im Editor oben links auf "Quellcode" klicken
- und zu Beginn der Seite diesen Javascript-Code einfügen:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$(".menu > li").click(function(e){
switch(e.target.id){
	        case "news_1":
		//change status & style menu
		$("#news_1").addClass("active");
		$("#news_2").removeClass("active");
		$("#news_3").removeClass("active");
		$("div.news_1").fadeIn();
		$("div.news_2").css("display", "none");
		$("div.news_3").css("display", "none");
	        break;

		case "news_2":
		$("#news_1").removeClass("active");
		$("#news_2").addClass("active");
		$("#news_3").removeClass("active");
		$("div.news_2").fadeIn();
		$("div.news_1").css("display", "none");
		$("div.news_3").css("display", "none");
		break;

		case "news_3":
		$("#news_1").removeClass("active");
		$("#news_2").removeClass("active");
		$("#news_3").addClass("active");
		$("div.news_3").fadeIn();
		$("div.news_1").css("display", "none");
		$("div.news_2").css("display", "none");
		break;
	}
//alert(e.target.id);
return false;
});
});
//@Author: Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it
</script>

Schritt 3: Der HTML-Code für den Seiteninhalt
gleich nach dem Javascript-Code mit einfügen, oder an gewünschter Stelle im Inhalt:

<div id="teaser">

<ul class="menu">
<li id="news_1" class="active">Titel 1</li>
<li id="news_2">Titel 2</li>
<li id="news_3">Titel 3</li>
</ul>
<br style="clear: left;" />

<div class="inhalt news_1">
<h2>Überschrift 1</h2>
Hier dein Text hinein
</div>

<div class="inhalt news_2">
<h2>Überschrift 2</h2>
Hier dein Text hinein
</div>

<div class="inhalt news_3">
<h2>Überschrift 3</h2>
Hier dein Text hinein
</div>
</div>

Das Aussehen (Breite / Text / Farbe) kannst du im CSS Code anpassen.