kostenloser Webspace werbefrei: lima-city


Dropdown Menue durch klick öffnen..Brauch Hilfe von euch

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    bengman

    bengman hat kostenlosen Webspace.

    Hey Leute, Ich stehe vor einem Rätsel: Wie öffne Ich das Dropdown Menue durch einen Klick ohne Javascript zu können?
    Ich weiß ohne Javascript geht es nicht, also wollte Ich fragen ob mir da einer helfen kann.
    Mein Code ist folgender:

    <nav>
      <div id="navigation">
     
        <div id="navigation2">
     
         <ul id="seiten">
          <li class="home">
          <a href=""><h3>Startseite</h3></a>
          <div id="homeseite">
          .
          </div>
          </li>
     
          <li class="gästebuch"><a href="#"><h3>G&auml;stebuch</h3></a></li>
     
     
          <li class="sozialenetzwerke">
          <a href="#"><h3>Soziale Netzwerke</h3></a>
          <div id="soialenetzwerkeseite">
          .
          </div>
          </li>
     
          <li class="partner">
          <a href=""><h3>Partner</h3></a>
          <div id="partnerseite">
          .
          </div>
          </li>
     
          <li class="forum"><a href="#"><h3>Forum</h3></a></li>
     
          <li class="server">
          <a href="#"><h3>Server</h3></a>
          <div id="serverseite">
          .
          </div>
          </li>
     
          <li class="teamspeak">
          <a href=""><h3>TeamSpeak</h3></a>
          <div id="teamspeakseite">
          .
          </div>
          </li>
     
          <li class="kontakt">
          <a href="#"><h3>Kontakt</h3></a>
          <div id="kotaktseite">
          .
          </div>
          </li>
         </ul>
     
        </div>
     
      </div>
    </nav>


    Und CSS:

    ul#seiten li div
           {
            display: block;
           }ul#seiten li div:hover { display: block; }
     
     
    ul#seiten li>div
           {
            display: none;
           } ul#seiten li:hover>div { display: block; }


    Im Moment öffnet sich das Menue halt wenn ich drüber gehe...
    Aber es soll sich ja öffnen wenn man klickt!
    Also kann mir einer behilflich sein und mir den fertigen jvs code senden?
    Ich habe mich bis jetzt halt noch nicht an jvs rangewagt, wollte es aber auch noch lernen, aber Ich brauche das jetzt wirklich auf die schnelle!

    Vielen Dank schonmal! :)
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. bengman schrieb:

    Ich weiß ohne Javascript geht es nicht,


    Doch, doch! Es geht auch ohne Javascript. :wink:

    Hier eine erklärtes Beispiel mit Demo: *Lesestoff*

  4. Wenn es geht, würde ich auch mal die id's der divs, deren display-Wert geändert wird durch classen ersetzen.
    <script>
        window.onload = function() {
          
          var as = document.querySelectorAll('#navigation a');
          
          for(var a = 0; a < as.length; a++)
            
            as[a].onclick = function() {
              
              var div = this.nextElementSibling;
              
              if(div)
    
                div.style.display = div.style.display != 'block' ? 'block' : 'none';
              
            }
          
        }
      </script>
  5. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    fatfreddy schrieb:
    bengman schrieb:

    Ich weiß ohne Javascript geht es nicht,


    Doch, doch! Es geht auch ohne Javascript. :wink:

    Hier eine erklärtes Beispiel mit Demo: *Lesestoff*



    Der Beitrag ist ja schon etwas älter, damals war responsives Webdesign eher ein Nebenthema. Jetzt sollte man sich entscheiden, ob man nicht auch Smartphone-Nutzern eine komfortabel Navigation anbietet.

    Unter der Prämisse "nur CSS" und dazu auch noch responsive habe ich z.B. dies gefunden:
    http://skeeterz71.com/create-responsive-top-nav-drop-menu-pure-css-create-first-responsive-webpage-part-3/
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!