blendi: eine Übersicht mit menü (über und untergeordnete Kategorien)

SELF-Forum

eine Übersicht mit menü (über und untergeordnete Kategorien)

blendi
– Informationen zu den Bewertungsregeln

Guten abend,

ich versuche gerade solch ein Menü hinzubekommen

menü1
Bild in voller größe
menü2
Bild in voller größe

ich habe also eine leiste und unter dieser Leiste knöpfe, welche ein Fenster mit einem Bild und einer Beschreibung öffnen sollen wenn mann darauf klickt (auserdem soll wenn man auf die leiste klickt die erste beschreibung angezeigt werden, das kleine dreieck rechts in der leiste ist optional).
bin noch ein relativer neuling habe vor zwei Tagen O'reilys "HTML von Kopf bis Fuss" durchgearbeitet (ein sehr gutes Buch nebenbei) kann man dieses Menü nur mit HTML und CSS hinbekommen?
muss keine Schritt für Schritt Anleitung oder eine komplette Datei sein, ein Tipp und/oder Schups in die richtige Richtung würde mir hoffentlich schon reichen.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. eine Übersicht mit menü (über und untergeordnete Kategorien)

    1UnitedPower
    – Informationen zu den Bewertungsregeln

    kann man dieses Menü nur mit HTML und CSS hinbekommen?

    Jein. Prinzipiell geht das natürlich, dazu müsstest du aber für jeden Unterpunkt in deinem Menü eine neue HTML-Seite erzeugen. Deine Menüeinträge wären dann einfache Links, die auf die entsprechenden Seiten verlinken.

    Ich gehe aber davon aus, dass du eher einen Echtzeit-Effekt haben möchtest.
    Dafür ist der Einsatz von Javascript unvermeidlich, weil du auf das Klicken eines Eintrags reagieren musst. Wenn du auf den Einsatz von Javascript verzichten möchtest, könntest du statt auf das Klicken auf das Überfahren mit der Maus reagieren. Dafür bietet sich die CSS-Pseudoklasse :hover an.

    Grüße
    -1UnitedPower

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. eine Übersicht mit menü (über und untergeordnete Kategorien)

      blendi
      – Informationen zu den Bewertungsregeln

      Danke erstmal,

      von wieviel Javascript reden wir hier?
      und was währe mit Frames meine jetzt im bezug auf kompatibilität und umsetzbarkeit?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. eine Übersicht mit menü (über und untergeordnete Kategorien)

        Baba
        – Informationen zu den Bewertungsregeln

        von wieviel Javascript reden wir hier?

        Pseudocode:

        <script>  
  function TabClick(tab){  
    HideAllTabs();  
    ShowTab(tab);  
  }  
  function HideAllTabs(){  
    // foreach div#tabs div{  
      // -> display:none  
    // }  
  }  
  function ShowTab(tab){  
    // div#tabs div#tab -> display:block  
  }  
  
</script>

        <html>  
  
  <div id='tabs'>  
  
    <ul>  
      <li id='tab1' onclick='TabClick("tab1");'>Apfel</li>  
      <li id='tab2' onclick='TabClick("tab2");'>Pflaume</li>  
      <li id='tab3' onclick='TabClick("tab3");'>Apfel</li>  
      <li id='tab4' onclick='TabClick("tab4");'>Apfel</li>  
    </ul>  
  
    <div id='tab1'> Hier kommt das Bild mit dem Text</div>  
    <div id='tab2'> Hier kommt das Bild mit dem Text</div>  
    <div id='tab3'> Hier kommt das Bild mit dem Text</div>  
    <div id='tab4'> Hier kommt das Bild mit dem Text</div>  
  
  </div>  
  
</html>

        Das wird mit getElementById() browserkompatibel.

        und was währe mit Frames meine jetzt im bezug auf kompatibilität und umsetzbarkeit?

        Nicht empfehlenswert. Fang damit gar nicht erst an. Bleib bei JS. Wenn Du magst auch mit framework, z.b jquery und tabs. Dann ist's noch weniger Code.
        BEISPIEL. Das CSS musst Du natürlich anpassen.

        Cheers,
        Baba

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln