Suche bestimmtes Popup Menü

Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
ich bin auf der Suche nach einem Menü welches mit horizontale und verticale Popups arbeitet. Also das Suckerfish Menü nur erweitert. Kann sein das die auf der Seite sowas auch anbieten nur finde ich das dann nicht. Wenn jemand hierzu ein Tutorial hatt wäre ich sehr erfreut.
Das Problem welches ich habe ist das ich es nicht hinbekomme es so zu schreiben das beim vertikalen menü die Menüpunkte beim öffnen des Popups alle nach unten rutschen und sich dann noch ein horizontales Menü öffnen läßt.

Gruß
 
Es wird dir wahrscheinlich schon helfen, wenn du mit den richtigen Stichwörtern suchst. Denn „Popup“ bezeichnet im Allgemeinen etwas anderes als siche erweiternde Navigationsmenüs.
 
Also der Begriff Popup Menü wird schon sehr oft, auch hier im Forum verwendet. Aber auch mit dem begriff Submenü oder ähnliches habe ich nicht das gefunden was ich benötige.
Also nochmal ich benötige hin und wieder in diesem Menü 2 Submenüs, meistens jedoch nur eines. Aber wenn 1.Submenü (gelber Bereich im Bild) benötigt wird soll der Rest untendrunter sich einfach :) nach unten zusammenschieben und dann muß ich aus diesem 1. Submenü ein zweites öffnen welches sich jedoch nicht vertikal sondern horizontal öffnet. Das horizontale also das 2. Submenü ist der Normalfall wie das Menü reagiert, aber hin und wieder benötige ich noch ein weiteres Untermenü und deshalb das Problem.

Gruß
 

Anhänge

  • menü.JPG
    menü.JPG
    60,5 KB · Aufrufe: 33
DirtyWorld hat gesagt.:
Also der Begriff Popup Menü wird schon sehr oft, auch hier im Forum verwendet.
Zum Vergrößern anklicken....
Unter PopUps versteht man allgemein nervige JavaScript-Fenster, die unaufgefordert aufploppen und einen vom Arbeiten abhalten.

Such mal nach Dropdown (ist ja irgendwie naheliegend, heisst ja auch »Suckerfish Dropdown«).
 
Also mein Problem ist ja nicht das ich kein Dropdown Menü zum laufen bekomme, sondern mit dem Submenü habe ich Probleme. Deshalb verstehe ich auch nicht warum der Treat ins JS Forum verschoben wurde das Problem liegt ja wohl eher beim CSS.

Das beste ist wohl ich zeig mal auf wo genau ich hänge:
erst mal der Quellcode:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="bueroexit">
<meta name="keywords" lang="de" content="Ferien, Griechenland, Sonnenschein">
<meta name="keywords" lang="en-us" content="vacation, Greece, sunshine">
<meta name="keywords" lang="en" content="holiday, Greece, sunshine">
<meta name="keywords" lang="fr" content="vacances, Grèce, soleil">
<!-- grundlegende Seiteneinstellungen -->
<link rel="stylesheet" type="text/css" href="css/basic.css">
<link rel="stylesheet" type="text/css" href="css/menue.css">
<link rel="stylesheet" type="text/css" href="css/inhalt.css">
<script type="text/javascript" src="js/menuescript.js"></script>
</head>
<body>
<div id="hintergrund">
<!-- Menue -->
<ul id="nav">
  <li class="einseins"><a href="#">Produkte</a>
    <ul class="zweieins">
      <li><a href="#">Doppelrakelhalter</a>
        <ul>
        <li><a href="#">DR-Halter&nbsp;537</a></li>
        </ul>
      </li>
      <li><a href="#">DR-Ersatzrakel</a></li>
      <li><a href="#">Einzelrakel</a></li>
      <li><a href="#">Silikonrakel</a></li>
      <li><a href="#">Handrakel</a></li>
    </ul>
  </li>
  <li class="einszwei"><a href="#">Anleitung</a>
    <ul class="zweizwei">
      <li class="zweizweieins"><a href="#">DR-Halter Spezial</a></li>
    </ul>
  </li>
  <li class="einsdrei"><a href="#">Videos</a>
    <ul class="zweidrei">
      <li class="zweizweieins"><a href="#">Fimat (FI)</a></li>
      <li class="zweizweizwei"><a href="#">Harlacher (HA)</a></li>
      <li class="zweizweidrei"><a href="#">Robustelli (RO)</a></li>
      <li class="zweizweivier"><a href="#">RSE 3210 (RS)</a></li>
      <li class="zweizweifuenf"><a href="#">SCR 75-275 (SC)</a></li>
      <li class="zweizweisechs"><a href="#">J.Zimmer (JZ)</a></li>
    </ul>
  </li>
    <li class="einsvier"><a href="#">Tech. Schriften</a>
    <ul class="zweivier">
      <li class="zweizweieins"><a href="#">Dickschichtachablonen</a></li>
      <li class="zweizweizwei"><a href="#">Beschichtungs-<br>
      	             geschwindigkeiten</a></li>
      <li class="zweizweidrei"><a href="#">Emulsionsempfehlung</a></li>
      <li class="zweizweivier"><a href="#">Beschichtung von <br>
      	             HGP Schablonen</a></li>
    </ul>
    </li>
   <li class="einsfuenf"><a href="#">Tech. Bilder</a></li>
  </ul>
<div id="logo"><a class="logoueber" href="#"><img class="linkkeinrahmen" src="pics/blindes.gif" width="197" height="34" alt="Logo" title="Zur Startseite"></a></div>
<div class="language1 grauerrahmen"><img src="pics/daktiv.gif" width="34" height="24" alt="Deutsche übersetzung"></div>
<div class="language2 grauerrahmen"><a href="#"><img class="linkkeinrahmen" src="pics/einaktiv.gif" width="34" height="24" alt="english" title="English translation"></a></div>
<div class="language3 grauerrahmen"><a href="#"><img class="linkkeinrahmen" src="pics/sinaktiv.gif" width="34" height="24" alt="espaniol" title="Verter el esparto"></a></div>
<div id="inhalt">
<h3>Headline</h3><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <br>
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl <br>
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in <br>
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at <br>
vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis<br>
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi<br>
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut <br>
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate <br>
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <br>
feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet<br>
doming id quod mazim placerat facer possim assum.
</div>
<div class="agb grauerrahmen"><a href="#"><img class="linkkeinrahmen" src="pics/agbna.gif" width="34" height="24" alt="agbs" title="Allgemeine Geschäftsbedingungen (AGB)"></a></div>
<div class="kontakt grauerrahmen"><a href="#"><img class="linkkeinrahmen" src="pics/mailna.gif" width="34" height="24" alt="kontakt" title="Kontakt&nbsp;/&nbsp;Impressum"></a></div>
</div>
</body>

Code: 
body {font: normal 10pt verdana;}

#hintergrund {position:absolute; width:720px; left:50%; margin-left:-360px; /* negative Hälfte von width: 790px */
              height:430px; top:50%; margin-top:-215px; /* negative Hälfte von width: 450px */
              background-image: url(../pics/hintergrund.png); background-repeat:no-repeat;}

#logo {position:absolute; left:200px; top:14px; width:197px; height:34px; background-image: url(../pics/fdzlogona.gif); background-repeat:no-repeat;}
.linkkeinrahmen {border-width:0px;}
#inhalt {position:absolute; height:262px; width:350px; left:360px; top:79px; overflow:auto; margin:5px;}
.language1 { position:absolute; height:24px; width:34px; left:546px; top:20px; padding:0px; margin:0px; }
.language2 { position:absolute; height:24px; width:34px; left:604px; top:20px; padding:0px; margin:0px; }
.language3 { position:absolute; height:24px; width:34px; left:661px; top:20px; padding:0px; margin:0px; }
.agb { position:absolute; height:25px; width:34px; left:604px; top:385px; padding:0px; margin:0px; }
.kontakt { position:absolute; height:25px; width:34px; left:661px; top:385px; padding:0px; margin:0px; }
.grauerrahmen {border:1px solid #d1d2d4;}

a.logoueber:link { background: none; }
a.logoueber:visited { background: none; }
a.logoueber:hover {background: url(../pics/fdzlogoa.gif);}
a.logoueber:active { background:url(../pics/fdzlogoa.gif); }

Code: 
#menuecontainer {position:absolute; height:298px; width:150px; padding:0px; margin:0px; top:83px; left:0px;}
ul {
         margin: 0;
	padding: 0;
	list-style: none;
	width: 300px; /* Width of Menu Items */
         height: 298px;
	}

ul li {
	position:relative;
         	}

ul li.einseins {
         padding-left:65px;
         	}
ul li.einszwei {
         padding-top:33px;
         padding-left:45px;
         	}
ul li.einsdrei {
         padding-top:33px;
         padding-left:35px;
         	}
ul li.einsvier {
         padding-top:33px;
         padding-left:45px;
         	}
ul li.einsfuenf {
         padding-top:33px;
         padding-left:65px;
         	}



/* Styles for 2. Submenü */

li ul.zweieins {
	position:absolute;
	left: 0px; /* Set 1px less than menu width */
	top: 20px;
         display: none;
         font: normal 8pt verdana;
         padding-left:65px;
	}

li ul.zweizwei {
	position:absolute;
	left: 149px; /* Set 1px less than menu width */
	top: -55px;
         display: none;
	}

li ul.zweidrei {
	position:absolute;
	left: 149px; /* Set 1px less than menu width */
	top: -115px;
         display: none;
	}

li ul.zweivier {
	position:absolute;
	left: 149px; /* Set 1px less than menu width */
	top: -175px;
         display: none;
	}

li.zweizweieins {
         padding-left:55px;
         	}
li.zweizweizwei {
         padding-left:35px;
         	}
li.zweizweidrei {
         padding-left:25px;
         	}
li.zweizweivier {
         padding-left:35px;
         	}
li.zweizweifuenf {
         padding-left:55px;
         	}
li.zweizweifuenf {
         padding-left:65px;
         	}


/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777777;
	background: transparent; /* IE6 Bug */
	padding: 5px;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #FF0000; background: transparent; } /* Hover Styles */

li ul li a { padding: 0px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Also die Frage die sich mir stellt ist wie bekomme ich es hin das sich der Menüeintrag „DR-Halte 537“erst darstellt wenn ich über den Menüpunkt „Doppelrakelhalter“ gehe.
Das nächste Problem ist das sich alle Menüpunkte der ersten Ebene auf die angegebene Höhe verteilen, also das Platz für die zweite Menüebene entsteht. Da hab ich bisher auch keine Lösung für gefunden.

Hoffe mir kann jemand helfen

Gruß
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück