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
Mitglied seit
16.09.2003
Beiträge
127
Alter
32
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

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

~Neo~

Threadstarter
Mitglied seit
16.09.2003
Beiträge
127
Alter
32
vielen dank wäre echt nett
 
N

~Neo~

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

Andy

Administrator
Team
Mitglied seit
16.08.2001
Beiträge
12.370
Alter
44
Standort
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

Mitglied 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
Mitglied seit
16.09.2003
Beiträge
127
Alter
32
:danke an euch beide.
Jetz muss ich gucken welches ich nehme. Werd mal beides ausprobieren.

MAl ne frage@stpe:
Wenn ich die bilder DIVs wegmache is auf einmal der 2te Button nich mehr da also der auskunft
 
stpe

stpe

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

Anhänge

M

monsi

Mitglied seit
29.06.2002
Beiträge
58
Alter
40
@ 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 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...
  • GELÖST Suche: Mouseover mit html für Anfänger

    GELÖST Suche: Mouseover mit html für Anfänger: Ich brauche dringend ein Script, oder was man eben dazu braucht um 2 Bilder mit Mouseover zu erstellen. Ich habe folgendes: - 2 Bilder - Homepage...
  • MouseOver - Fenster Aktivität

    MouseOver - Fenster Aktivität: Hallo Liebe Gangbang freunde, ;) Nun hab ich die Neue WindowsXp SP 3 Installiert, funktioniert alles wunderbaum :D bis auf kleine...
  • Mouseover-Infos gehen nicht mehr

    Mouseover-Infos gehen nicht mehr: Hallo, Scheinbar ohne Grund funktionieren die Mouseover-Infos nicht mehr. Ihr kennt das ja, irgendwo mit dem Mousezeiger auf einen Link oder...
  • Ähnliche Themen

    • 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...
    • GELÖST Suche: Mouseover mit html für Anfänger

      GELÖST Suche: Mouseover mit html für Anfänger: Ich brauche dringend ein Script, oder was man eben dazu braucht um 2 Bilder mit Mouseover zu erstellen. Ich habe folgendes: - 2 Bilder - Homepage...
    • MouseOver - Fenster Aktivität

      MouseOver - Fenster Aktivität: Hallo Liebe Gangbang freunde, ;) Nun hab ich die Neue WindowsXp SP 3 Installiert, funktioniert alles wunderbaum :D bis auf kleine...
    • Mouseover-Infos gehen nicht mehr

      Mouseover-Infos gehen nicht mehr: Hallo, Scheinbar ohne Grund funktionieren die Mouseover-Infos nicht mehr. Ihr kennt das ja, irgendwo mit dem Mousezeiger auf einen Link oder...
    Oben