kostenloser Webspace werbefrei: lima-city

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

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   bengman

   bengman hat kostenlosen Webspace.

   21:39, 1.5.2015

   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. fatfreddy

   

   fatfreddy hat kostenlosen Webspace.

   22:30, 1.5.2015

   bengman schrieb:
   
   Ich weiß ohne Javascript geht es nicht,

   
   
   Doch, doch! Es geht auch ohne Javascript.
   
   Hier eine erklärtes Beispiel mit Demo: *Lesestoff*
   
   

4. mochsdb

   mochsdb hat kostenlosen Webspace.

   1:28, 2.5.2015

   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.

   12:52, 2.5.2015

   fatfreddy schrieb:
   

   bengman schrieb:
   
   Ich weiß ohne Javascript geht es nicht,

   
   
   Doch, doch! Es geht auch ohne Javascript.
   
   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?