kostenloser Webspace werbefrei: lima-city

Problem mit JS Aufklappmenü

lima-city → Forum → Die eigene Homepage → Homepage Allgemein

1. Autor dieses Themas

   t****f

   15:56, 25.7.2011

   Hallo,
   ich habe ein problem mit JS.
   ich möchte ein aufklappbares menü mit hilfe von JS erstellen.
   Das ganze sieht dann so aus:
   
   

   <!--Bildergalerie start-->
   <dd class="left_obermenu">
      <a onclick="document.getElementById('bildergalerie').style.display='block'"href="index.php?page=bildergalerie">Bildergalerie</a>
         <dl id="bildergalerie">
   			<dd class="left_untermenu"><a href="index.php?page=f12011">unertpunkt 1</a>
   						<dl id="bg_f1n2011">
   								<dd class="left_unteruntermenu"><a href="index.php?page=f1do">unterunterpunkt1</a></dd>
   						</dl>	
   			<dd class="left_untermenu"><a href="index.php?page=rndan2011">unterpunkt2</a></dd>
         </dl>
   </dd>
   <!--Bildergalerie ende-->

   
   
   CSS:
   

   #bildergalerie{display: none;}
   #bg_f1n2011{display: none;}

   
   
   
   
   Das Problem hierbei ist nur, dass dadurch das ich bei href kein "#" sondern ne url hab erscheint das untermenü nur für einen augenblick...
   allerdings brauch ich die page info für andere funktionen...
   
   kann mir hier jemand weiterhelfen? :)
   
   Gruß Toby
   
   Beitrag zuletzt geändert: 26.7.2011 8:24:29 von toby-f

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

3. sincer

   

   sincer hat kostenlosen Webspace.

   21:38, 25.7.2011

   Hey ;)
   
   Du kannst dafür nicht das Event "onClick" verwenden, sondern musst "onMouseOver" nehmen.
   
   onClick setzt nämlich nicht nur das Menü auf "display:block;", sondern aktiviert auch den Link -> Seitenwechsel.
   onMouseOver reagiert, sobald sich die Maus über dem entsprechenden Menüeintrag befindet und macht damit das Menü sichtbar.
   
   Zusätzlich müsstest du noch onMouseOut verwenden, und eine entsprechende Funktion für "display:none;" aufrufen, damit das Menü auch wieder ausklappt.
   
   Verwende in Zukunft bitte [ code ] Tags, um den Code herum. Dann kann man das ganze etwas besser lesen.
   
   lg
   Sincer
   
   Beitrag zuletzt geändert: 25.7.2011 21:39:34 von sincer
4. Autor dieses Themas

   t****f

   8:35, 26.7.2011

   also ich möchte das so haben, dass man auf den link klicken muss damit sich das untermenü öffnet, weil ich direkt unter Bildergalerie auch nen eigenen Content haben möchte.
   
   Info:
   Ich arbeite mit php und include den Content, d.h. ich lade die index.php bei jedem klick neu und über die url (page=....) bekommt der content gesagt welchen er laden soll bsp: http://localhost/template/index.php?page=bildergalerie.
   
   Jeder Link, auch wenn er untermenüpunkte hat soll einen eigenen Content bekommen.
   
   D.h. onMouseOver ist zwar ne gute Idee passt nur leider nicht in mein conzept. Hast du viell noch ne andere Idee?
   (Kann auch gerne eine PHP Lösung sein) <- wär mir sogar fast lieber.

5. sincer

   

   sincer hat kostenlosen Webspace.

   23:34, 27.7.2011

   Hey ;)
   
   

   toby-f schrieb:
   also ich möchte das so haben, dass man auf den link klicken muss damit sich das untermenü öffnet, weil ich direkt unter Bildergalerie auch nen eigenen Content haben möchte.
   (...)
   Hast du viell noch ne andere Idee?
   (Kann auch gerne eine PHP Lösung sein) <- wär mir sogar fast lieber.

   
   Ich bin mir jetzt nicht ganz sicher, was du willst, deswegen rate ich mal drauf los:
   
   Du hast geschrieben, dass das Submenü nur dann zu sehen sein soll, wenn man drauf klickt.
   Gleichzeitig willst du aber keine Links, die nach "#" führen, denn es soll sich der Content verändern.
   
   Wenn ich das richtig sehe, bist du bei JavaScript an der falschen Adresse und es wird dich freuen zu hören, dass die Lösung mit PHP umzusetzen ist ;)
   Nur um sicher zu gehen: Du willst keinen "Menü fährt von oben nach unten aus, und wird langsam sichtbar" Effekt, sondern, du willst, dass wenn man auf ein Menü klickt, bestimmte Submenü-Punkte sichtbar sind und sich der Content der Seite dem angeklickten Menüpunkt anpasst.
   
   z.B.
   Hauptmenü:
   

   Link1
   Link2
   Link3

   
   Ich klicke auf Link1:
   

   Link1
   - Sublink 1.1
   - Sublink 1.2
   Link2
   Link3

   
   Dazu verändert sich der Content der Seite.
   
   Wenn das stimmt, sieht die Lösung theoretisch so aus:
   Du lagerst dein komplettes Menü in eine eigene .php Datei aus, und inkludierst diese dann in jener Stelle, an der du es brauchst.
   Diese menu.php Datei macht dann nichts anderes, als eine if-else Kombination, die Abfragt, welche GET Parameter es gibt, und welches Menü eingeblendet werden soll.
   
   Code Beispiel:
   

   echo '<ul>';
   echo '<li class="mainMenu">Link 1</li>';
   if($_GET['page'] == "bildgallerie") {
     echo '
     <li class="SubMenu">Link 1.1</li>
     <li class="SubMenu">Link 1.2</li>
     ';
   }
   echo '<li class="mainMenu">Link 2</li>';
   else if($_GET['page'] == "whatever") {
     echo '
     <li class="SubMenu">Link 2.1</li>
     <li class="SubMenu">Link 2.2</li>
     ';
   }
   // usw
   echo '</ul>';

   
   Die echo Befehle mit den Submenüs werden nur dann ausgegeben, wenn ein entsprechender GET Parameter gefunden wurde. (Durch else-if sorgst du dafür, dass auch nur 1 Submenü zu sehen ist, und nicht z.B. 2 Submenüs von 2 verschiedenen Mainmenüs, wenn jemand die URL verändert.)
   
   Also in diesem Beispiel fehlen jetzt die ganzen <a> Tags, aber ich hoffe dass du verstehst, was ich meine ;)
   Und ich hoffe vor allem, dass es überhaupt das ist, was du suchst xD
   (Also kein Effekt (JS), sondern eine dynamische Darstellung (PHP))
   
   Ich bilde mir ein, dass man via CSS einstellen kann, wie weit eingerückt eine Listen-Element ist. Falls das nicht geht, musst du den HTML Teil anders regeln, aber der PHP Teil verändert sich nicht.
   
   Alles klar?
   
   lg
   Sincer

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?