• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Horizontales Menü mit Unterpunkten

Nemokiddy

Nemokiddy

Neues Mitglied
Hellüü!

Ich ärgere mich mit diesem Problem jetzt schon eine Weile herum, komme aber selbst auf keine Lösung...

Ich habe dieses Design übernommen, um für meine Mutter eine Homepage zu erstellen, da das ihren Vorstellungen recht nahe kommt und ich noch nicht sooo viel Erfahrung habe.
Allerdings sollen zwei der Menüpunkte Unterpunkte haben, die sich bei mouseover zeigen...

Tja dazu habe ich auf Selfhtml einiges gelesen, die Codes kopiert, aber es funktioniert einfach nicht so, wie es sollte. (Nebenbei: ich hab sie nur kopiert, nicht verstanden! Das ist mir einfach ein bisschen zu hoch... :oops:)

Hab dann selbst noch einiges herumprobiert aber es wird einfach nicht so wie es sein soll... :( (Bei "Schätze" und "Gravuren" sind die Unterlinks, die durch Klick sichtbar werden.)
Was mich stört:
  • Unterlinks erst durch Klicken sichtbar
  • Menü sieht optisch nicht mehr wie im ursprünglichen Design aus
  • "Perlen und Steine" steht nicht in einer Zeile, dafür sind die Abstände so groß (obwohl nirgends im Code etwas ist, wo ich diese Abstände steuern kann...)
Ich hab mittlerweile wohl auch schon ziemlich gepfuscht, sorry XD hab einfach alles mögliche ausprobiert, das mir eingefallen ist

Hat hier jemand Tipps?
Ist vielleicht etwas blöd, aber ich fände es irgendwie angenehm, wenn mir jemand diesen Teil der Arbeit abnehmen könnte... muss aber nicht sein!! Solange man es mir so erklärt, dass ich es selbst richtig machen kann, bin ich happy! :D

Danke schonmal!
lg, Kerry
 
Du kannst "onclick" gegen "onmouseover" ersetzen, dann öffnet sich das Menü beim Drüberfahren.
 
Hellüü!

Sehr tolle Links vielen Dank!
Die Variante vom zweiten Link gefällt mir gut.
Hab die codes kopiert und das fehlende ergänzt, aber Ergebnis im Browser (Firefox, aktuellste Version - heute erst upgedatet) ist bei mir eine völlig unformatierte liste... O.o
Code: 
<html>
<head>
<script type="text/css">
body { margin: 10px; padding: 0; font: 16px Verdana, Arial, Helvetica, sans-serif; }

a { text-decoration: none; }

dt, dl, dd, ul, li { list-style-type: none; margin: 0 10px 0 0; padding: 0; }

dd { margin-top: 4px; }

#menu { position: absolute; left: 50px; top: 20px; height: 40px; width: 90%; border-bottom: 1px solid #000; }
#menu a { background: #fff; color: #000; text-decoration: none; }

#menu a:hover { color: #ff0000; }

#menu dl { float: left; }

#menu li { display: inline; }

#menu li a { color: #ff0000; }

#menu li a:hover { background-color: #f5f5f5; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{ position: absolute; left: 0; font-size: 11px; width: 500px; }
</script>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="#">Eins</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Eins a</a></li>
<li><a href="#">Eins b</a></li>
<li><a href="#">Eins c</a></li>
<li><a href="#">Eins d</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover=”montre(‘smenu2');”><a href=”#”>Zwei</a></dt>
<dd id=”smenu2?>
<ul>
<li><a href=”#”>Zwei a</a></li>
<li><a href=”#”>Zwei b</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover=”montre(‘smenu3');”><a href=”#”>Drei</a></dt>
<dd id=”smenu3?>
<ul>
<li><a href=”#”>Drei a</a></li>
<li><a href=”#”>Drei b</a></li>
<li><a href=”#”>Drei c</a></li>
<li><a href=”#”>Drei d</a></li>
<li><a href=”#”>Drei e</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>

Hab ich auf irgendetwas vergessen? >.<
Ich freue mich auf Hilfe :D

lg, Kerry
 
Es heißt nicht

HTML: 
<script type="text/css">

sondern

HTML: 
<style type="text/css">

Folglich ist auch danach

HTML: 
</script>

zu

HTML: 
</style>

zu ändern.
 
Bäm... :oops:

Echt dumm von mir...
Vielen Dank!!!
Wow es funktioniert endlich! *freu*
(Musste irgendwie noch ein paar anführungszeichen neu eintippen, die vom kopierten code waren stellenweise so komisch kursiv und wurden nicht als Anführungszeichen genommen XD Hat wohl der Schreiber vom Tutorial irgendwie was anderes als Anführungszeichen genommen, kA)

lg, Kerry
 
Das geht auch einfacher und ohne Javascript, reines CSS.

HTML: 
<style type="text/css">

  ul li {
    float: left;
  }

  ul li ul {
    diplay: none;
  }

  ul li:hover ul {
    display: block;
  }

  ul li ul li {
    clear: both;
  }
</style>

<body>
  <ul>
    <li>link 1</li>
    <li>link2 mit untermenü
      <ul>
        <li>unterpunkt 1</li>
        <li>unterpunkt 2</li> <!-- usw. -->
      </ul>
    </li>
    <li>link 3</li>
    <li>link 4 auch mit untermenü
      <ul>
        <li>unterpunkt 3</li>
        <li>unterpunkt 4</li>
      </ul>
    </li>
  </ul>
</body>

Mit weiterem CSS kannst du das Aussehen des Menüs und die Positionen der Untermenüs bestimmen.


lascaux
 
Hellüü!

Diese Variante hatte ich doch schon ganz zu Beginn und sie hat nicht funktioniert...
Habe es mit deinem Code nochmals probiert, hier das Ergebnis:
untermenu.JPG

also ja... meine jetzige Version gefällt mir irgendwie besser XD

lg, Kerry
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben