kostenloser Webspace werbefrei: lima-city

JS: Problem mit DropDown-Menü

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

1. Autor dieses Themas

   d************h

   19:58, 22.9.2009

   Hi!
   
   Ich habe mir gestern ein einfaches DropDownMenü zusammengebastelt. Dummerweise habe ich es aber nur bis zum ersten Unterelement geschafft. Ich weiß jetzt nicht mehr, wie ich es mit möglichst wenig code weiter machen kann.
   
   Ihr findet das Menü hier: http://dynamic-search.lima-city.de/?action=page&go=start
   Also ich will es so, das wenn man mit der Maus auf eines der immer sichtbaren Elemente geht, sich dann ein unterelement öffnet. Das haut auch hin, es soll sich aber dann teilweise noch ein Unterelement öffnen, nur halt rechts daneben, und so weiter.
   
   Hier mal der HTML-Code von einem Element:
   

   <ul class="menuitem" onmouseover="show_submenu('sm_2')" onmouseout="hide_submenus()">
   	<li><a href="index.php?action=page&amp;go=webdesign" title="Webdesign"><div>Webdesign</div></a>
   		<ul class="submenu" id="sm_2">
   			<li><a href="index.php?action=page&amp;go=templates" title="Hier finden Sie kostenlose Templates!"><div class="linktext">Templates</div><div class="desc">Hier finden Sie kostenlose Templates!</div></a></li>
   			<li><a href="index.php?action=page&amp;go=seo" title="Suchmaschinenoptimierung"><div class="linktext">SEO</div><div class="desc">Suchmaschinenoptimierung</div></a></li>
   			<li><a href="index.php?action=page&amp;go=html" title="Html-Referenz"><div class="linktext">Html</div><div class="desc">Html-Referenz</div></a></li>
   			<li><a href="index.php?action=page&amp;go=js" title="JavaScript-Referenz"><div class="linktext">JavaScript</div><div class="desc">JavaScript-Referenz</div></a></li>
   			<li><a href="index.php?action=page&amp;go=phpmysql" title="Php- und MySql-Referenz"><div class="linktext">Php und MySql</div><div class="desc">Php- und MySql-Referenz</div></a></li>
   			<li><a href="index.php?action=page&amp;go=aspnet" title="ASP.NET-Referenz"><div class="linktext">ASP.NET</div><div class="desc">ASP.NET-Referenz</div></a></li>
   			<li><a href="index.php?action=page&amp;go=webhosting" title="Tipps zum Webhosting"><div class="linktext">Webhosting</div><div class="desc">Tipps zum Webhosting</div></a></li>
   		</ul>
   	</li>
   </ul>

   
   
   Und hier der JS-Code:
   

   function hide_submenus()
   {
   	var sm_1 = document.getElementById("sm_1");
   	var sm_2 = document.getElementById("sm_2");
   	var sm_3 = document.getElementById("sm_3");
   	var sm_4 = document.getElementById("sm_4");
   	var sm_5 = document.getElementById("sm_5");
   	sm_1.style.visibility = "hidden";
   	sm_2.style.visibility = "hidden";
   	sm_3.style.visibility = "hidden";
   	sm_4.style.visibility = "hidden";
   	sm_5.style.visibility = "hidden";
   }
   
   function show_submenu(id)
   {
   	var sm = document.getElementById(id);
   	sm.style.visibility = "visible";
   }
   
   function show_sub_submenu(id)
   {
   	var sm = document.getElementById(id);
   	sm.style.visibility = "visible";
   }

   
   
   Ich weiß, das mit dem JS ist die einfachste Lösung, ich kann das halt einfach nicht, hab aber zur Zeit sehr viel zu tun, sonst würde ich es lernen!
   
   Grüße, dynamic-search

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

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

3. t****o

   20:10, 22.9.2009

   Also ich meine das geht ganz leicht:
   
   Ich halte den Mauszeiger auf Startseite, der Liste wird visitible auf visible gesetzt. Die Liste ist ja bestimmt mit CSS ausgerichtet. Mach also ne weitere Liste und mach den Mouseover auf einen Link in der eigentlichen Liste. Die Unterliste muss halt richtig ausgerichtet werden.
4. Autor dieses Themas

   d************h

   20:13, 22.9.2009

   Das ist nicht absolut Positioniert, das ist ja das Problem. Ansonsten habe ich den Weg schon probiert => erfolglos. Es ist einfach nix erschienen!
   
   Ich habe aber schonmal irgendwo ein solches Menü gesehen, wo das funktioniert. Also muss ja möglich sein!

5. t****o

   20:18, 22.9.2009

   Du musst es mal auf positon:absolute stellen. Dann kannst du den Abstand von oben mit top:...px; und links mit left:...px; einstellen. Du musst halt für jedes Submenü die CSS verändern.
   
   telelo
6. Autor dieses Themas

   d************h

   20:20, 22.9.2009

   genau das will ich aber nicht. es muss auch mit relativer position gehen. wenn ich es absolut mach dann habe ich das problem mit der fenstergröße, bildschirmauflösung, etc... weil ich das ja in die positionsangabe nicht mit einbeziehen kann

7. maechte-der-elemente

   

   maechte-der-elemente hat kostenlosen Webspace.

   20:46, 22.9.2009

   dynamic-search schrieb:
   genau das will ich aber nicht. es muss auch mit relativer position gehen. wenn ich es absolut mach dann habe ich das problem mit der fenstergröße, bildschirmauflösung, etc... weil ich das ja in die positionsangabe nicht mit einbeziehen kann
   

   
   
   Relative Positionierung????
   
   Wie wäre es damit??
   
   Das einzige was du dann machen müsstest wäre die Höhe als 0px anzugeben, damit die Leerzeile nicht kommt. Sehe ich das jetzt falsch?
   
   Den Inhalt dann mit anderer Höhe (Der die du willst) machen, dann wird die gewünschte Höhe angezeigt, du bist bei einem zentrierten Design nihct von der Bildgröße abhängig....
   
   Ich habs so gemacht (bei meiner letzten seite )

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

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

Dir gefällt dieses Thema?