Horizontales Dropdown Menü

Status
Nicht offen für weitere Antworten.
E

Elmo

Mitglied
Hallo, ich habe schon einiges gegoogelt aber bin leider nicht fündig geworden.

Ich brauche ein Horizontales dropdown menü welches so aussehen soll:

Link 1 (bei mouseover) -> Link 1.1
Link 1.2
Link 1.3
Link 2 (bei mouseover) -> ....

Leider verfüge ich über sogut wie keine Kenntnisse im Bereich Javascript. Könnte mir vielleicht jemand ein Tutorial (deu) oder einen beispiel Code posten?

Ich bin für jede Hilfe sehr dankbar.
 
Habe ich nu genommen scheint auch gut zu funktionieren, habe nur zwei probleme:

HTML: 
      <div class="menu">
 		 <ul>
 			 <li><div id="naj"><a href="#">Command & Conquer 3</a></div>
             <ul>
                <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
                <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
                <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
                <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
			 </ul>
           </li>
         </ul>
        </div>

1. Ich nutzte das Templatessystem Smarty und habe es nun in den Footer eingebaut. Wenn ich nun über den Link gehe, öffnet sich das Menü nach Links aber ich hätte es gerne in richtung Rechts also Contentbereich.

2. Über und unter dem Breich des Links entsteht ein Misteriöser Leerraum... -> Siehe Bild der rote Bereich, der sollte eigentlich nicht da sein.

Könnte mir bitte jemand sagen wie ich dies gefixxt bekomme? :)

Danke im vorraus und gute nacht =D
 

Anhänge

  • prob.jpg
    prob.jpg
    5,4 KB · Aufrufe: 45
Elmo hat gesagt.:
1. Wenn ich nun über den Link gehe, öffnet sich das Menü nach Links aber ich hätte es gerne in richtung Rechts also Contentbereich.
Zum Vergrößern anklicken....
Im Original-Beispiel wird das Submenü doch zur rechten Seite geöffnet, oder willst du es vielleicht in dieser Richtung http://www.cssplay.co.uk/menus/flyout3.html öffnen?

Elmo hat gesagt.:
2. Über und unter dem Breich des Links entsteht ein Misteriöser Leerraum... -> Siehe Bild der rote Bereich, der sollte eigentlich nicht da sein.
Zum Vergrößern anklicken....
Ohne Einblick in den vollständigen HTML- und CSS-Code der Seite lässt sich dazu derzeit nicht viel bis garnichts sagen.
 
Also zu Problem 1:

Ich habe am Code nichts verändert. Als ich es noch nicht in meine Seite eingebunden habe ist es auch noch nach Rechts aufgegangen, nun jedoch nicht mehr. Ich glaube das es daran liegt das ich ja mit header und footer arbeite, smarty halt, und das das script glaube dadurch das die mitte fürs Content reserviert ist, dass es nicht nach rechts aufgeghen kann und deswegen nach links aufgeht.

Zu Problem 2:

Ich kann hier mal den kompletten footer posten:

HTML: 
 </div>
 <div id="l">
 {$login_menu}
  <div id="nbox">
      <div id="nab">Navigation</div>
      <div id="nan"><a href="index.php">News</a></div>
      <div id="nan"><a href="register.php">Registration / Login</a></div>
      <div id="nan"><a href="about.php">About</a></div>
	  <div id="nan"><a href="head_staff.php">Head Staff</a></div>
	  <div id="nan"><a href="vacancies.php">Vacancies</a></div>
	  <div id="nan"><a href="forum.php">Forum</a></div>
	  <div id="nan"><a href="faq.php">FAQ</a></div>
	  <div id="nan"><a href="global_rules.php">Global Rules</a></div>
	  <div id="nan"><a href="contact.php">Contact</a></div>
  </div>
  <div id="nbox">
      <div id="nab">Games</div>
      <div class="menu">
 		 <ul>
 			 <li><div id="naj"><a href="#">Command & Conquer 3</a></div>
             <ul>
                <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
                <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
                <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
                <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
			 </ul>
           </li>
         </ul>
        </div>
  </div>
  <div id="nbox">
      <div id="nab">Misc</div>
      <div id="nan"><a href="">Search</a></div>
      <div id="nan"><a href="">Become a Partner</a></div>
      <div id="nan"><a href="">Advertisement</a></div>
      <div id="nan"><a href="">Impressum</a></div>
  </div>
 </div>
</div>

<div id="foo">
  <div id="clan" align="center"><center>
    <strong><a href="bug_system.php" target="_blank">Submit Bug</a></strong></div>
  </center>
</div>


</div>

</body>
</html>

Hoffe das hilft.

Danke nochmals zu so später Stunde
 
Kann man sich die Seite mal "live" anschauen, denn mit dem Quellcode-Auszug kann ich nicht viel anfangen.

Was mir aber schon mal beim Überfliegen des Quellcodes auffällt, ist die Tatsache, dass du da IDs mehrfach verwendest, was aber nicht zulässig ist, da eine ID in einem Dokument eindeutig sein muss. In diesem Fall müssten die IDs in Klassen umgewandelt werden.
 
Hi,
Elmo | PN hat gesagt.:
ich möchte nicht das der Link öffentlich wird, noch nicht ... Ich wäre dir auch dankbar wenn du ihn nicht weitergeben würdest

Also hier ist der Link: http://www.***.com/devcon/old/
Zum Vergrößern anklicken....
dass das Submenü derzeit nicht nach rechts, sondern nach unten geöffnet wird, liegt am fehlenden "p" für die Einheit "px" bei der linken Positionsangabe:

Code: 
.menu ul li:hover ul {display:block; position:absolute; top:0; left:165px; width:105px;}
Zum Vergrößern anklicken....
Zudem solltest du für das umschliessende DIV #l die overflow:auto-Deklaration entfernen, da ansonsten das Submenü nicht über der mittleren Spalte, sondern im DIV #l geöffnet und darin der horizontale Scrollbalken angezeigt wird.

Die mysteriöse Lücke vor und nach dem Menü ergibt sich aus der folgenden margin-Deklaration:

Code: 
.menu {font-family: arial, sans-serif; width:140px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
Zum Vergrößern anklicken....
 
Einen schönen guten Morgen wünsche ich,

vielen Dank für die hilfreichen Tips welche das Problem fast gelöst haben. Es gibt nun nurnoch zwei kleine ;) hoffe ich zumindest.

Das Ausklappen zur rechten Seite Funktioniert nun wie ich es wollte. Jedoch leider nur im Internetexplorer und nicht in Firefox. Ich nutze jedoch die css für non iex browser was mich deswegen etwas verwundert.

Das zweite Problem bezüglich des Platzes ist ebenfalls fast gelöst. Nun befindet sich nurnoch ein Freiraum unterhalb des Links.

Ich hoffe ich gehe nicht zu sehr auf die Nerven zur frühen Stunde und sie könnten mir hier nochmal helfen.
 
Ich habe es glaube ich selbst geschafft. Ich habe einfach mehr Unterpunkte gemacht und dadurch verschwand der Leerraum, jedoch verstehe ich nicht warum er überhaupt da war.
 
Elmo hat gesagt.:
Ich habe es glaube ich selbst geschafft. Ich habe einfach mehr Unterpunkte gemacht und dadurch verschwand der Leerraum, jedoch verstehe ich nicht warum er überhaupt da war.
Zum Vergrößern anklicken....
Vermutlich dürfte die Höhenangabe für die Klasse .menu der Grund hierfür sein:
Code: 
.menu {font-family: arial, sans-serif; width:140px; height:150px; position:relative; margin:0; font-size:11px;}
Zum Vergrößern anklicken....
Die Submenüs öffnen sich bei mir im Firefox einwandfrei, nur schliessen sie sich unerwartet, wenn die Maus den "Hauptlink" verlässt, was dann wohl an der linken Positionsangabe (left:175px) liegen dürfte. Einfach mal den Wert um ein oder zwei Pixel verringern.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück