Ein Tab-Menü im Tab-Menü erstellen

  • WSC 3.1
  • 5.1.x
  • Ein Tab-Menü im Tab-Menü erstellen

    Neu

    Hallo,

    Ich weiß das diese Frage ansich nichts mit dem Stil zu tun hat aber da ich deinem kenntnissen diesbezüglich sehr vertraue habe ich mir gedacht das ich dich einfach mal frage, ist also nicht schlimm solltest du die frage nicht beantworten wollen.

    Ich hab eine Seite erstellt wo ich Tabellen anzeigen lasse und das in einem Tab-Menü.
    Hier mein CSS code dafür:

    CSS-Quellcode

    1. /* CSS zur gestaltung von Tabs mit radio-Buttons */
    2. .tabbed figure {
    3. display: block;
    4. margin-left: 0;
    5. border-bottom: 1px solid #000000;
    6. clear: both;
    7. }
    8. .tabbed > input,
    9. .tabbed figure > div { display: none; }
    10. .tabbed figure>div {
    11. padding: 20px;
    12. width: 100%;
    13. border: 1px solid #000000;
    14. background: #1B1B23;
    15. line-height: 1.5em;
    16. letter-spacing: 0.3px;
    17. color: #444;
    18. }
    19. #tab1:checked ~ figure .tab1,
    20. #tab2:checked ~ figure .tab2,
    21. #tab3:checked ~ figure .tab3 { display: block; }
    22. nav label {
    23. float: left;
    24. padding: 15px 15px;
    25. border-top: 1px solid #000000;
    26. border-right: 1px solid #000000;
    27. background: hsl(210,50%,50%);
    28. color: #eee;
    29. }
    30. nav label:nth-child(1) { border-left: 1px solid #000000; }
    31. nav label:hover { background: hsl(210,50%,40%); }
    32. nav label:active { background: #1B1B23; }
    33. #tab1:checked ~ nav label[for="tab1"],
    34. #tab2:checked ~ nav label[for="tab2"],
    35. #tab3:checked ~ nav label[for="tab3"] {
    36. background: #1B1B23;
    37. color: #fff;
    38. position: relative;
    39. border-bottom: none;
    40. }
    41. #tab1:checked ~ nav label[for="tab1"]:after,
    42. #tab2:checked ~ nav label[for="tab2"]:after,
    43. #tab3:checked ~ nav label[for="tab3"]:after {
    44. content: "";
    45. display: block;
    46. position: absolute;
    47. height: 2px;
    48. width: 100%;
    49. background: #1B1B23;
    50. left: 0;
    51. bottom: -1px;
    52. }
    Alles anzeigen

    und hier mein HTML Code für die Seite:

    HTML-Quellcode

    1. <div class="tabbed">
    2. <input checked="checked" id="tab1" type="radio" name="tabs" />
    3. <input id="tab2" type="radio" name="tabs" />
    4. <nav>
    5. <label for="tab1">DTM Tabelle</label>
    6. <label for="tab2">Bonus Punkte</label>
    7. </nav>
    8. <figure>
    9. <div class="tab1"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-7/ac-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="DTM Tabelle DTM Liga Saison 7"></div>
    10. <div class="tab2"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-7/ac-dtm-liga-bonuspunktetabelle.png" title="Erstellt von @Stefan1507" alt="DTM Bonus Punkte Tabelle DTM Liga Saison 7"></div>
    11. </figure>
    12. </div>
    Alles anzeigen
    Ich würde aber noch gerne ein Tab-Menü machen das noch über diesen Tap-Menü ist sprich ein Tab-Menü im Tab-Menü aber irgendwie bekomme ich das einfach nicht hin :-/

    Kannst du mir da vieleicht weiterhelfen ?
    Hier ein Link zu der Seite mit dem Tab-Menü: neuesforum.f1-dtm-liga.com/dtm-tabelle/

    Vielen Dank schon mal im voraus für die Hilfe :D

    Lg Stefan
  • Neu

    Gerne kann ich helfen, allerdings ist deine Anfrage sehr allgemein.

    Was genau ist das Problem?
    Was funktioniert nicht?
    Was passiert, wenn du ein zweites Tab-Menü einbauen willst?

    Stefan Herler schrieb:

    Ich weiß das diese Frage ansich nichts mit dem Stil zu tun hat aber da ich deinem kenntnissen diesbezüglich sehr vertraue habe ich mir gedacht das ich dich einfach mal frage, ist also nicht schlimm solltest du die frage nicht beantworten wollen.
    Dann möchte ich dich bitten, auch nicht im Bereich des Designs deine Anfrage zu stellen, sondern dir nächstes Mal eines der anderen verfügbaren Foren zu suchen. Es gibt hier für fast alles direkt einen richtigen Platz. :)
    Viele Grüße
    Best Regards

    Matthias Kittsteiner
  • Neu

    Hallo,

    Danke erst einmal :D

    Black Rider schrieb:

    Dann möchte ich dich bitten, auch nicht im Bereich des Designs deine Anfrage zu stellen, sondern dir nächstes Mal eines der anderen verfügbaren Foren zu suchen. Es gibt hier für fast alles direkt einen richtigen Platz.
    Alles klar mache ich :D

    Nun ja ich habe jetzt mal versucht den HTML code so anzupassen:

    HTML-Quellcode

    1. <div class="tabbed">
    2. <input checked="checked" id="tab1" type="radio" name="tabs" />
    3. <input id="tab2" type="radio" name="tabs" />
    4. <nav>
    5. <label for="tab1">Saison 1</label>
    6. <label for="tab2">Saison 2</label>
    7. </nav>
    8. <figure>
    9. <nav>
    10. <label for="tab3">DTM Tabelle</label>
    11. <label for="tab4">Bonus Punkte</label>
    12. </nav>
    13. <figure>
    14. <div class="tab1"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-7/ac-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="DTM Tabelle DTM Liga Saison 7"></div>
    15. <div class="tab2"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-7/ac-dtm-liga-bonuspunktetabelle.png" title="Erstellt von @Stefan1507" alt="DTM Bonus Punkte Tabelle DTM Liga Saison 7"></div>
    16. </figure>
    17. </figure>
    18. </div>
    Alles anzeigen
    Es wird mir dadurch eine Tab reihe über den andern Tabs angezeigt aber ich kann irgendwie nur die oberen Tabs anklicken :-/ und es wird mir denoch bei beiden das selbe angezeigt :-/

    Mit einer reihe Tabs funktioniert das sehr gut nur sobald ich einen Tab machen möchte wo weitere Tabs drinnen sind scheitere ich leider immer wieder :-/ warscheinlich ist es eh nur ein denkfehler bei mir aber irgendwie komm ich da einfach nicht drauf :-/

    Hier ein Bild wie ich das gerne hätte:


    Hier ein Bild wie es jetzt bei mir im neuen Forum ausschaut:


    Ich hoffe das hilft ein wenig weiter mein Problem zu verstehen :D

    Lg Stefan
  • Neu

    Folgendes ist mit Beispielinhalten über die Möglichkeiten des WoltLab Suite Core umgesetzt. Ggf. fehlen dort noch CSS-Klassen, die zur besseren Darstellung behelfen. Als grobes Gerüst zum Orientieren sollte es dir allerdings reichen.

    HTML-Quellcode

    1. <div class="tabMenuContainer">
    2. <nav class="tabMenu">
    3. <ul>
    4. <li data-name="tab1"><a href="#tab1">Tab #1</a></li>
    5. <li data-name="tab2"><a href="#tab2">Tab #2</a></li>
    6. </ul>
    7. </nav>
    8. <div id="tab1" class="section tabMenuContent">
    9. <div class="tabMenuContainer">
    10. <nav class="tabMenu">
    11. <ul>
    12. <li><a href="#subTab1">(Sub-)Tab #1</a></li>
    13. <li><a href="#subTab2">(Sub-)Tab #2</a></li>
    14. </ul>
    15. </nav>
    16. <div id="subTab1" class="tabMenuContent">(Sub-)Tab #1 Tab #1 Inhalt</div>
    17. <div id="subTab2" class="tabMenuContent">(Sub-)Tab #2 Tab #1 Inhalt</div>
    18. </div>
    19. </div>
    20. <div id="tab2" class="section tabMenuContent">
    21. <div class="tabMenuContainer">
    22. <nav class="tabMenu">
    23. <ul>
    24. <li><a href="#subTab3">(Sub-)Tab #1</a></li>
    25. <li><a href="#subTab4">(Sub-)Tab #2</a></li>
    26. </ul>
    27. </nav>
    28. <div id="subTab3" class="tabMenuContent">(Sub-)Tab #1 Tab #2 Inhalt</div>
    29. <div id="subTab4" class="tabMenuContent">(Sub-)Tab #2 Tab #2 Inhalt</div>
    30. </div>
    31. </div>
    32. </div>
    33. <script data-relocate="true">
    34. require(['Ui/TabMenu'], function(UiTabMenu) {
    35. UiTabMenu.setup();
    36. });
    37. </script>
    Alles anzeigen
    Bilder
    • TabMenu1.png

      9,89 kB, 1.435×227, 3 mal angesehen
    • TabMenu2.png

      10,1 kB, 1.425×242, 3 mal angesehen
    Mit freundlichen Grüßen
    Dennis Kraffczyk
  • Neu

    Auch wenn du das Problem selber lösen konntest, wäre es nett, wenn du noch fairerweise deinen kompletten Code einmal posten könntest. Ich kann mir durchaus vorstellen, dass die Erstellung eines Multi-Tab-Menüs auch für die Nachwelt interessant sein könnte. Gerade die Einbindung des Inhalts von dir (langweiligen Text wie ich kann doch schließlich jeder :P ) wäre doch noch eine kleine Erklärung wert, oder? (:

    Und lasse mich raten:
    Du hast bei Erstellung des #6 Beitrags nicht die id="tabX" sowie <li data-name="tabX"><a href="#tabX"> angepasst gehabt? :whistling: :D ;P
    Mit freundlichen Grüßen
    Dennis Kraffczyk
  • Neu

    Hallo :D

    Ja sicher kann ich den Code noch hier rein bringen :D

    Ne eigentlich weiß ich nicht woran der fehler lag den die Tabs bezeichnung und auch die SubTabs habe ich angepasst gehabt aber irgendwie wollte es nicht klappen :-/

    Also habe ich von ganz neuen begonnen und hab deinen Code noch einmal von dir Kopiert und hab diesesmal alle Tabs und Suptabs erstellt bevor ich die Tabs befüllt habe und danach gings :D

    Hier mein Code aber der ist etwas lang geworden:

    HTML-Quellcode

    1. <div class="tabMenuContainer backgroundFarbe2">
    2. <nav class="tabMenu">
    3. <ul>
    4. <li data-name="tab1"><a href="#tab1">Saison 7</a></li>
    5. <li data-name="tab2"><a href="#tab2">Saison 6</a></li>
    6. <li data-name="tab3"><a href="#tab3">Saison 5</a></li>
    7. <li data-name="tab4"><a href="#tab4">Saison 4</a></li>
    8. <li data-name="tab5"><a href="#tab5">Saison 3</a></li>
    9. <li data-name="tab6"><a href="#tab6">Saison 2</a></li>
    10. <li data-name="tab7"><a href="#tab7">Saison 1</a></li>
    11. </ul>
    12. </nav>
    13. <div id="tab1" class="section tabMenuContent">
    14. <div class="tabMenuContainer">
    15. <nav class="tabMenu">
    16. <ul>
    17. <li><a href="#subTab1">Tabelle</a></li>
    18. <li><a href="#subTab2">Bonus Punkte</a></li>
    19. </ul>
    20. </nav>
    21. <div id="subTab1" class="tabMenuContent"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-7/ac-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="DTM Tabelle DTM Liga Saison 7"></div>
    22. <div id="subTab2" class="tabMenuContent"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-7/ac-dtm-liga-bonuspunktetabelle.png" title="Erstellt von @Stefan1507" alt="DTM Bonus Punkte Tabelle DTM Liga Saison 7"></div>
    23. </div>
    24. </div>
    25. <div id="tab2" class="section tabMenuContent">
    26. <div class="tabMenuContainer">
    27. <nav class="tabMenu">
    28. <ul>
    29. <li><a href="#subTab3">Tabelle</a></li>
    30. </ul>
    31. </nav>
    32. <div id="subTab3" class="tabMenuContent"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-6/ac-montag-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="DTM Tabelle Montags DTM Liga Saison 6"></div>
    33. </div>
    34. </div>
    35. <div id="tab3" class="section tabMenuContent">
    36. <div class="tabMenuContainer">
    37. <nav class="tabMenu">
    38. <ul>
    39. <li><a href="#subTab4">Tabelle MDL</a></li>
    40. <li><a href="#subTab5">Tabelle SDL</a></li>
    41. </ul>
    42. </nav>
    43. <div id="subTab4" class="tabMenuContent"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-5/ac-montag-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="DTM Tabelle Montags DTM Liga Saison 5"></div>
    44. <div id="subTab5" class="tabMenuContent"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-5/ac-sonntag-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="DTM Tabelle Sonntags DTM Liga Saison 5"></div>
    45. </div>
    46. </div>
    47. <div id="tab4" class="section tabMenuContent">
    48. <div class="tabMenuContainer">
    49. <nav class="tabMenu">
    50. <ul>
    51. <li><a href="#subTab6">Tabelle MDL</a></li>
    52. <li><a href="#subTab7">Tabelle SDL</a></li>
    53. </ul>
    54. </nav>
    55. <div id="subTab6" class="tabMenuContent"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-4/ac-montag-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="DTM Tabelle Liga 1 Saison 4"></div>
    56. <div id="subTab7" class="tabMenuContent"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-4/ac-sonntag-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="DTM Tabelle Liga 2 Saison 4"></div>
    57. </div>
    58. </div>
    59. <div id="tab5" class="section tabMenuContent">
    60. <div class="tabMenuContainer">
    61. <nav class="tabMenu">
    62. <ul>
    63. <li><a href="#subTab8">Tabelle</a></li>
    64. </ul>
    65. </nav>
    66. <div id="subTab8" class="tabMenuContent"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-3/ac-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="dtm tabelle saison 3"></div>
    67. </div>
    68. </div>
    69. <div id="tab6" class="section tabMenuContent">
    70. <div class="tabMenuContainer">
    71. <nav class="tabMenu">
    72. <ul>
    73. <li><a href="#subTab9">Tabelle</a></li>
    74. </ul>
    75. </nav>
    76. <div id="subTab9" class="tabMenuContent"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-2/ac-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="dtm tabelle saison 2"></div>
    77. </div>
    78. </div>
    79. <div id="tab7" class="section tabMenuContent">
    80. <div class="tabMenuContainer">
    81. <nav class="tabMenu">
    82. <ul>
    83. <li><a href="#subTab10">Tabelle</a></li>
    84. </ul>
    85. </nav>
    86. <div id="subTab10" class="tabMenuContent"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-1/ac-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="dtm tabelle saison 1"></div>
    87. </div>
    88. </div>
    89. </div>
    90. <script data-relocate="true">
    91. require(['Ui/TabMenu'], function(UiTabMenu) {
    92. UiTabMenu.setup();
    93. });
    94. </script>
    Alles anzeigen
    Ich hab mitlerweile auch das gleiche für eine Reglement seite erstellt und das hat auch wunderbar funktioniert :D
    Hier ein Link fals du dir die Reglement seite anschauen möchtest :D
    neuesforum.f1-dtm-liga.com/dtm-reglement-seite/

    Was ich jetzt noch machen möchte ist das aussehen noch verschönern aber da muss ich erst noch herausfinden wie ich das mit CSS machen kann (Was ich ansprechen muss mit CSS usw..) aber vieleicht kann mir da ja auch einer von euch weiterhelfen :D

    Lg Stefan

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen