Mouseover menü

Diskutiere Mouseover menü im Programmierung Forum im Bereich Software Forum; Weiß vielleicht jemand von euch wie ich in HTML/DHTML/PHP/JAVASCRIPT ein Menp bastle das bestimmte punkte ausklappt (also bei mouseover) Bsp...
N

~Neo~

Threadstarter
Dabei seit
16.09.2003
Beiträge
127
Alter
33
Weiß vielleicht jemand von euch wie ich in HTML/DHTML/PHP/JAVASCRIPT ein Menp bastle das bestimmte punkte ausklappt (also bei mouseover)
Bsp:
|Menüpunkt 1|
|Menüpunkt 2|---|Submenü1|
|Menüpunkt 3| |Submenü2|
|Menüpunkt 4|

Heißt wenn ich mouseover Menüpunkt 2 mache öffnet sich daneben ein kasten mit nem neuen menü.
Weiß jemand wie man das macht???
 
stpe

stpe

Dabei seit
14.11.2001
Beiträge
2.729
habe ich fuer's firmen-intranet programmiert - kann ich Dir morgen posten
 
N

~Neo~

Threadstarter
Dabei seit
16.09.2003
Beiträge
127
Alter
33
vielen dank wäre echt nett
 
N

~Neo~

Threadstarter
Dabei seit
16.09.2003
Beiträge
127
Alter
33
Fireworks??? wenn du meinst probier ich das aus.
(Hab so oder so Studio MX drauf)
:danke
 
Andy

Andy

Administrator
Team
Dabei seit
16.08.2001
Beiträge
12.601
Alter
45
Ort
Wilder Süden
Wunderbar, dann schau am besten mal in die integrierte Hilfefunktion von Fireworks.
Da sind ein paar Übungen mit dabei, unter anderem solche Dnymaischen Menüs
 
stpe

stpe

Dabei seit
14.11.2001
Beiträge
2.729
so, habe hier mein "menue-source". ist etwas unordentlich, weil das bei uns ueber php automatisch generiert wird. ich habe das ganze auf zwei menue-punkte inkl. untermenue gekuerzt. wird ein menuepunkt angeklickt, wird die zielseite in einem frame namens "inhalt" aufgerufen. Du kannst, um das zu aendern, einfach die javascript-funktion aufrufen() anpassen.

ich habe auch die links auf "taskbar_div.gif" im source gelassen. das ist bei uns eine kleine grafik fuer den hintergrund der menueleiste.

Code:
<html>

<head>
 <title>Intranet - Menü</title>

 <style type="text/css">
   a:link { font-family:Verdana, Helvetica, Arial, sans-serif; font-size:12px; color:#000000; text-decoration:none }
   a:hover { font-family:Verdana, Helvetica, Arial, sans-serif; font-size:12px; color:#0000000; text-decoration:none }
   a:visited { font-family:Verdana, Helvetica, Arial, sans-serif; font-size:12px; color:#000000; text-decoration:none }
   a:active { font-family:Verdana, Helvetica, Arial, sans-serif; font-size:12px; color:#000000; text-decoration:none }
   p.auswahl a:link { font-family:Verdana, Helvetica, Arial, sans-serif; font-size:12px; color:#000000; text-decoration:none }
   p.auswahl a:hover { font-family:Verdana, Helvetica, Arial, sans-serif; font-size:12px; color:#666666; text-decoration:none }
   p.auswahl a:visited { font-family:Verdana, Helvetica, Arial, sans-serif; font-size:12px; color:#000000; text-decoration:none }
   p.auswahl a:active { font-family:Verdana, Helvetica, Arial, sans-serif; font-size:12px; color:#888888; text-decoration:none }
 </style>

 <style>
  .menue
  {
   position: absolute;
   top:0;
   z-index: 2;
  }
  .untermenue
  {
   position: absolute;
   top: 22;
   z-index: 2;
   visibility: hide;
   visibility: hidden;
  }
 </style>

 <script language="Javascript">
 <!--

  function aufklappen(menue_id)
  {
   if(document.layers)
     document.layers[menue_id].visibility="show";
   else
     document.all[menue_id].style.visibility="visible";
  }

  function zuklappen(menue_id)
  {
   if(document.layers)
     document.layers[menue_id].visibility="hide";
   else
     document.all[menue_id].style.visibility="hidden";
  }

 function aufrufen(inhalt, parameter)
 {
  if (parameter=="target=parent")
    fenster=window.open(inhalt);
  else
  {
    parent.frames.inhalt.location.href=inhalt;
  }
 }
 //-->

</script>

</head>

<body bgcolor=#FFFFFF text=000000 link=#000000 vlink=#000000 alink=#000000>

<font face="tahoma" size=2>

<div style="position:absolute; top:0; left:280;"><img src="grafx/taskbar_div.gif"></div><div id="hm1" class="menue" style="top:1; left:180px; z-index: 200" onmouseover="aufklappen('um1')" onmouseout="zuklappen('um1')"><table cellspacing=0 cellpadding=0 border=0>
      <tr><td>
       <font face="tahoma" size=2>Administration</font>
      </td></tr>
      </table><div id="um1" class="untermenue" style="top:7; left:-3px; z-index: 200">
      <br>
      <table bgcolor=#6699CC bordercolordark=#000000 bordercolorlight=#ffffff cellspacing=0 cellpadding=2 border=1 width=140px>
      <tr><td>
       <p class="auswahl">
         <a href="javascript:aufrufen('administration.html', '')">Datenbank</a><br>
         <a href="javascript:aufrufen('anmelden.php3?d=netzwerk', '')">Netzwerk</a><br>
         <a href="javascript:aufrufen('switches.html', '')">Switches</a><br>
         <a href="javascript:aufrufen('anmelden.php3?d=todoliste', '')">ToDo-Liste</a><br>
         <a href="javascript:aufrufen('http://intranet:10000', '')">Web_Admin</a><br>
         </p></td></tr></table></div></div><div style="position:absolute; top:0; left:370;"><img src="grafx/taskbar_div.gif"></div><div id="hm2" class="menue" style="top:1; left:300px; z-index: 200" onmouseover="aufklappen('um2')" onmouseout="zuklappen('um2')"><table cellspacing=0 cellpadding=0 border=0>
      <tr><td>
       <font face="tahoma" size=2>Auskunft</font>
      </td></tr>
      </table><div id="um2" class="untermenue" style="top:7; left:-3px; z-index: 200">
      <br>
      <table bgcolor=#FFDD88 bordercolordark=#000000 bordercolorlight=#ffffff cellspacing=0 cellpadding=2 border=1 width=140px>
      <tr><td>
       <p class="auswahl">
         <a href="javascript:aufrufen('anmelden.php3?d=adressbuch', '')">Adressbuch</a><br>
         <a href="javascript:aufrufen('http://intranet:8082', '')">Aktenplan</a><br>
        </p></td></tr></table>
        </div></div><div style="position:absolute; top:0; left:455;"><img src="grafx/taskbar_div.gif"></div><div id="hm3" class="menue" style="top:1; left:390px; z-index: 200" onmouseover="aufklappen('um3')" onmouseout="zuklappen('um3')"><table cellspacing=0 cellpadding=0 border=0>
</font>
</body>
</html>
 
N

~Neo~

Threadstarter
Dabei seit
16.09.2003
Beiträge
127
Alter
33
:danke an euch beide.
Jetz muss ich gucken welches ich nehme. Werd mal beides ausprobieren.

MAl ne [email protected]:
Wenn ich die bilder DIVs wegmache is auf einmal der 2te Button nich mehr da also der auskunft
 
stpe

stpe

Dabei seit
14.11.2001
Beiträge
2.729
dann hast Du wohl zu viel herausgeloescht. nimm dies :)
 

Anhänge

M

monsi

Dabei seit
29.06.2002
Beiträge
58
Alter
41
@ stpe:
Ist dir schon mal aufgefallen, das dein Menü nicht mit gecko-browsern (z.B. Netscape oder mozilla) funktioniert?
Beim IE kein Problem, aber bei Netscape steht da nur "Administration" und "Auskunft". Von Submenüs keine Spur!
 
Thema:

Mouseover menü

Mouseover menü - Ähnliche Themen

  • Mouseover-Effekt deaktivieren

    Mouseover-Effekt deaktivieren: Hallo, wie kann man in Windows 10 den Mouseover-Effekt deaktivieren? Wenn ich mit der Maus auf eine Datei oder Ordner im Explorer/Arbeitsplatz...
  • Symbole mit veränderten Mouseover-Effekt

    Symbole mit veränderten Mouseover-Effekt: Hallo Leute, ersuche freundlich um Eure Mithilfe. Kann man die verschobenen Symbole, wie im Bild an der Beschriftung zu erkennen, wieder...
  • Mouseover bei Edge Touch-Eingabe

    Mouseover bei Edge Touch-Eingabe: Ich nutze Edge mit Windows 10 auf einem Dell Venue 11 Pro Tablet. Wenn man bei der Bedienung mit einer Maus auf bestimmte Elemente einer Webseite...
  • Windows 10 - durch Mouseover Fenster aktivieren - so gehts

    Windows 10 - durch Mouseover Fenster aktivieren - so gehts: Auch wenn die Funktion, Fenster durch ein Mouseover zu aktivieren kein neues Feature von Windows 10 darstellt, ist die Einstellung dafür an eine...
  • Ähnliche Themen
  • Mouseover-Effekt deaktivieren

    Mouseover-Effekt deaktivieren: Hallo, wie kann man in Windows 10 den Mouseover-Effekt deaktivieren? Wenn ich mit der Maus auf eine Datei oder Ordner im Explorer/Arbeitsplatz...
  • Symbole mit veränderten Mouseover-Effekt

    Symbole mit veränderten Mouseover-Effekt: Hallo Leute, ersuche freundlich um Eure Mithilfe. Kann man die verschobenen Symbole, wie im Bild an der Beschriftung zu erkennen, wieder...
  • Mouseover bei Edge Touch-Eingabe

    Mouseover bei Edge Touch-Eingabe: Ich nutze Edge mit Windows 10 auf einem Dell Venue 11 Pro Tablet. Wenn man bei der Bedienung mit einer Maus auf bestimmte Elemente einer Webseite...
  • Windows 10 - durch Mouseover Fenster aktivieren - so gehts

    Windows 10 - durch Mouseover Fenster aktivieren - so gehts: Auch wenn die Funktion, Fenster durch ein Mouseover zu aktivieren kein neues Feature von Windows 10 darstellt, ist die Einstellung dafür an eine...
  • Oben