Tab-Menü richtig verwenden

  • Guten Tag liebe Community,


    in Folgendem möchte ich euch erklären, wie man das Tabmenü Schritt für Schritt richtig verwendet.


    1. Schritt - Tabmenü erzeugen:


    Das Icon des Tabmenü in der Beitragsleiste auswählen:


    2. Schritt - Neue Tabs hinzufügen:


    Um ein neues Tab zu erstellen, muss man zwischen

    Code
    1. [tabmenu][/tabmenu]

    Folgendes einfügen:

    Code
    1. [tabmenu][tab='1.Testtab'][/tabmenu]


    Wir erhalten folgendes Ergebnis:
    [tabmenu]
    [tab='1.Testtab']
    [/tabmenu]


    Dies kann beliebig wiederholt werden, um mehr Tabs zu erzeugen. z.B.

    Code
    1. [tabmenu][tab='1.Testtab'][tab='2.Testtab'][tab='3.Testtab'][/tabmenu]



    Ergebnis:

    [tabmenu]
    [tab='1.Testtab']
    [tab='2.Testtab']
    [tab='3.Testtab'][/tabmenu]


    3. Schritt - Tabs mit Text/Inhalt füllen:


    Nun können wir die Tabs mit Inhalt füttern. Dazu einfach unter dem jeweiligen Tabname den gewünschten Text eingeben. z.B.


    Code
    1. [tabmenu][tab='1.Testtab']Testtext für das 1. Tab[tab='2.Testtab']Testtext für das 2. Tab[tab='3.Testtab']Testtext für das 3. Tab[/tabmenu]


    Das Ergebnis:
    [tabmenu]
    [tab='1.Testtab']
    Testtext für das 1. Tab
    [tab='2.Testtab']
    Testtext für das 2. Tab
    [tab='3.Testtab']
    Testtext für das 3. Tab
    [/tabmenu]


    4. Schritt - Subtabs erzeugen (optional) :


    Um einem "Haupt"-Tab ein anderes unterzuordnen geben wir folgendes ein:


    Code
    1. [tabmenu][tab='1.Testtab']Testtext für das 1. Tab[subtab='1. Untertab']Testtext für das 1. Untertab[subtab='2. Untertab']Testtext für das 2. Untertab[tab='2.Testtab']Testtext für das 2. Tab[tab='3.Testtab']Testtext für das 3. Tab[/tabmenu]


    Ergebnis:
    [tabmenu]
    [tab='1.Testtab']
    Testtext für das 1. Tab
    [subtab='1. Untertab']
    Testtext für das 1. Untertab
    [subtab='2. Untertab']
    Testtext für das 2. Untertab
    [tab='2.Testtab']
    Testtext für das 2. Tab
    [tab='3.Testtab']
    Testtext für das 3. Tab
    [/tabmenu]


    5. Schritt - Tabs mit Bildern verzieren (optional) :


    Das Tabmenü ist im Prinzip schon fertig, allerdings können wir ihm noch den letzten Schliff verpassen, damit es auch optisch ein Hingucker ist:
    Dazu fügen wir hinter dem Tabnamen folgendes ein:


    Code
    1. [tabmenu][tab='1.Testtab','Bild-URL'] Testtext für das 1. Tab[tab='2.Testtab','http://png.findicons.com/files/icons/986/aeon/16/home.png']Testtext für das 2. Tab[tab='3.Testtab']Testtext für das 3. Tab[/tabmenu]


    Ergebnis:
    [tabmenu]
    [tab='1.Testtab','http://png.findicons.com/files/icons/986/aeon/16/home.png'']
    Testtext für das 1. Tab
    [tab='2.Testtab','http://png.findicons.com/files/icons/986/aeon/16/home.png']
    Testtext für das 2. Tab
    [tab='3.Testtab']
    Testtext für das 3. Tab
    [/tabmenu]


    Bemerkung: Es ist wichtig, dass hier die Zeichen ' und , nicht vergesst. Ansonsten funktioniert es nicht.


    So, wir sind am Ende unseres 5 - Schritt Tutorials. Ich hoffe ihr könnt nutzen daraus ziehen. Für Fragen/Kritik/Lob, etc. einfach hier drunter schreiben oder mich via PN kontaktieren.
    Bis dahin verweile ich mit


    freundlichen Grüßen
    MustPunish


    [expander="Fertige" Tabmenüs zum freien Editieren]
    Ohne Bilder:


    [tabmenu]
    [tab='1. Noobtab']
    Blub
    [tab='2. Noobtab']
    Blub
    [tab='3. Noobtab']
    Blub
    [tab='4. Noobtab']
    Blub
    [/tabmenu]


    Code
    1. [tabmenu][tab='1. Noobtab']Blub[tab='2. Noobtab']Blub[tab='3. Noobtab']Blub[tab='4. Noobtab']Blub[/tabmenu]


    Mit Bildern:


    [tabmenu]
    [tab='1. Noobtab','http://png.findicons.com/files/icons/986/aeon/16/home.png']
    Blub
    [tab='2. Noobtab','http://png.findicons.com/files/icons/986/aeon/16/home.png']
    Blub
    [tab='3. Noobtab','http://png.findicons.com/files/icons/986/aeon/16/home.png']
    Blub
    [tab='4. Noobtab','http://png.findicons.com/files/icons/986/aeon/16/home.png']
    Blub
    [/tabmenu]


    Code
    1. [tabmenu]
    2. [tab='1. Noobtab','http://png.findicons.com/files/icons/986/aeon/16/home.png']
    3. Blub
    4. [tab='2. Noobtab','http://png.findicons.com/files/icons/986/aeon/16/home.png']
    5. Blub
    6. [tab='3. Noobtab','http://png.findicons.com/files/icons/986/aeon/16/home.png']
    7. Blub
    8. [tab='4. Noobtab','http://png.findicons.com/files/icons/986/aeon/16/home.png']
    9. Blub
    10. [/tabmenu]

    [/expander]

    "Zeige einem intelligenten Menschen einen Fehler und er wird sich bedanken.
    Zeige einem dummen Menschen einen Fehler und er wird dich beleidigen."




    Mit freundlichen Grüßen
    MustPunish