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

"Winkel-Dropdown"

Status
Für weitere Antworten geschlossen.
F

Fio

Neues Mitglied
Hallo.
Ich versuche gerade ein Dropdown Menue nebeneinander zu erstellen und finde im www nichts passendes, daher richte ich mich an euch.

Ich habe eine Bildvorlage (siehe Anhang) wo ihr seht was ich meine.

Ich habe die Hauptpunkte und die Unterpunkte mit Hilfe von '<a></a>'-Tags eingefügt. Mir fehlt nur noch der Zusammenhang, dass sich die Unterpunkte zusammen mit den Hauptpunkten öffen (bei hover).

Ich hoffe ihr könnt mir helfen. :D
Gruß Fio

PS: Wenn möglich nur mit Hilfe von CSS und HTML. JavaScript nur im Notfall ^^
 

Anhänge

  • screen.JPG
    screen.JPG
    5,6 KB · Aufrufe: 12
Also eine JS-Loesung haette ich parat:

Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/html1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de" style="height:100%;">
<head>
<title>test</title>
<script type="text/javascript">
function rollout(obj){
    obj.firstChild.nextSibling.style.display = "block";
    obj.style.borderRightWidth = "0px";
    obj.style.width = "105px";
    obj.style.fontWeight = "bold";
}
function rollin(obj){
    obj.firstChild.nextSibling.style.display = "none";
    obj.style.borderRightWidth = "1px";
    obj.style.width = "100px";
    obj.style.fontWeight = "normal";
}
</script>
<style type="text/css">
.menu{
  background-color: orange;
  height: 40px;
  width: 100px;
  text-align: center;
  vertical-align: middle;
  cursor: default;
  position: relative;
  border: 1px solid black;
  margin: 1px;
  z-index: 1;
}
.rollout{
  background-color: orange;
  border: 1px solid black;
  width: 95px;
  text-align: left;
  padding-left: 5px;
  cursor: auto;
  display: none;
  position: absolute;
  top: -1px;
  left: 105px;
  z-index: 2;
  font-weight: normal;
}
.rollout a{
  text-decoration: none;
  color: black;
  line-height: 1.5em;
}
.rollout a:hover{
  color: grey;
}
</style>
</head>
<body>
<div style="position:absolute; left:0px; top:10px;">

  <div class="menu" onmouseover="rollout(this)" onmouseout="rollin(this)">Allgemein
    <div class="rollout">
      <a href="http://www.giga.de">giga.de</a><br />
      <a href="http://www.html.de">html.de</a><br />
      <a href="http://de.selfhtml.org">selfhtml</a><br />
      <a href="http://www.css4you.de">css4you</a>
    </div>
  </div>


  <div class="menu" onmouseover="rollout(this)" onmouseout="rollin(this)">Programmieren
    <div class="rollout">
      Link1<br />
      Link2
    </div>
  </div>


  <div class="menu" onmouseover="rollout(this)" onmouseout="rollin(this)">Sport
    <div class="rollout">
      Link1<br />
      Link2<br />
      Link3<br />
      Link4<br />
      Link5<br />
      Link6<br />
      Link7<br />
      Link8<br />
      Link9<br />
      Link10
    </div>
  </div>


  <div class="menu" onmouseover="rollout(this)" onmouseout="rollin(this)">Science
    <div class="rollout">
      Link1<br />
      Link2<br />
      Link3
    </div>
  </div>


  <div class="menu" onmouseover="rollout(this)" onmouseout="rollin(this)">Fernsehen
    <div class="rollout">
      Link1<br />
      Link2<br />
      Link3<br />
      Link4<br />
      Link5<br />
      Link6
    </div>
  </div>


  <div class="menu" onmouseover="rollout(this)" onmouseout="rollin(this)">Games
    <div class="rollout">
      Link1<br />
      Link2<br />
      Link3<br />
      Link4
    </div>
  </div>

</div>
</body>
</html>

Die Styles entsprechend zu aendern schaffst du bestimmt ;)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben