DevTrain Startseite Advanced Developers Conference vom 14.-15. Februar 2011  
  
  
SUCHEN:  
ARTIKEL ONLINE: 525   

Kategorien
.NET
Datenbanken
Web
XML

Allgemein
Camp
Foren
Events
Persönliche Einstellungen
Registrieren
Prämien Shop
Kontakt
Impressum
Über DevTrain

Autoren


   Autor: Bernhard Elbl Artikel Drucken
        
POPUP-Menü´s - schnell und leicht gemacht

POP-Menü´s sparen Platz am Bildschirm und sehen gut aus. Das sind zwei Gründe für solche Menü´s. Ausserdem ist es nicht schwierig so ein Menü selber zu machen. Das ganze ist mit relativ wenig Javascript und ein bischen CSS möglich.

1. Umsetzung des HTML-Parts
Wichtig ist hier das CSS, das die Visibility-Eigenschaft der DIV-Tags auf "hidden" setzt. So werden alle Elemente innerhalb der Tags unsichtbar. In den obersten Menü-Punkten werden über das onmouseover- und onmouseout-Event Javascript-Funktionen ausgelöst. Diese setzen die Visibility-Eigenschaft der DIV-Tags auf "visible" oder "hidden".
Das onclick-Event der einzelnen Menu-Items löst die "l"-Javascript-Funktion aus. Hier wird der Link, der zu der verlinkten Seite, führt übergeben.
<table width="100%" class="menu"><tr><td align="center">
<table valign="TOP" cellpadding=0 cellspacing=0 class="menu">
 <tr>
  <td onmouseover="javascript:sichtbar(0);" onmouseout="unsichtbar(0)" valign="TOP" width=130>
   <table cellspacing=0 cellpadding=0 width="100%"><tr><td onclick="l('/software/');" align="center" class="mnuHead">&nbsp;Software Produkte</td></tr></table>
   <div id=mnu>
    <table width="130" cellpadding=0 cellspacing=0>
     <tr><td class="mi" onclick="l('/software/index.html');" style="BORDER-TOP: black 1px solid;">&nbsp;Überblick</td></tr>
     <tr><td class="mi" onclick="l('/haendler/index.html');">&nbsp;Dealers Only</td></tr>
     <tr><td class="mi" onclick="l('/webcam/index.htm');" style="BORDER-BOTTOM: black 1px solid;">&nbsp;Webcam</td></t>
    </table>
   </div>
  </td>
  <td onmouseover="javascript:sichtbar(1);" onmouseout="unsichtbar(1)" valign="TOP" width=130>
   <table cellspacing=0 cellpadding=0 width="100%"><tr><td class="mnuHead" onclick="l('/support/');" align="center">&nbsp;Service & Support</td></tr></table>
   <div id=mnu>
    <table width="130" cellpadding=0 cellspacing=0>
     <tr><td class="mi" onclick="l('/asp/index.htm');" style="BORDER-TOP: black 1px solid;">&nbsp;ASP Know How</td></tr>
     <tr><td class="mi" onclick="l('/asp/seitee.htm');">&nbsp;aspmail</td></tr>
     <tr><td class="mi" onclick="l('/webcam/index.htm');" style="BORDER-BOTTOM: black 1px solid;">&nbsp;Webcam</td></t>
   </table>
   </div>
  </td>
 </tr>
</table>
</td></tr></table>

2. Der Javascript-Part
Die Document-Events "onmouseover" und "onmouseout" starten die Funktion ItemHandler. Diese verändert die Hintergrund-Farbe der einzelnen Menü-Items.
Über die Function sichtbar bzw. unsichtbar werden die Menü-Items ein-aus geblendet.
<SCRIPT LANGUAGE=javascript>
<!--
 document.onmouseover=ItemHandler;
 document.onmouseout=ItemHandler;
 function ItemHandler()  {
  if(!document.all) return;
   var sCls= event.srcElement.className;<BR>   if(sCls=="mi"||sCls=="mnuHead")
   {
    switch (event.type) {
    case "mouseover" : event.srcElement.style.background='#9b9dff';
    break;
    case "mouseout" : event.srcElement.style.background='#1855A5'; }
   }
 }
 function sichtbar(i)  {
  document.all.mnu[i].style.visibility="visible";  }
 function unsichtbar(i)  {
  document.all.mnu[i].style.visibility="hidden";  }
 function l(a) { location.href=a }
//-->
</SCRIPT>

Das ganze jetzt noch mit CSS schön gemacht und fertig.
Hier ist das komplette HTM-File mit CSS zu downloaden oder anschauen.


DevTrain Camp - Schneller zum .NET 3.5 Developer
 
Verwandte Artikel      Verlinkte Dokumente
    Keine verknüpften Dokumente

  Erfasst am: 24.10.2001
  Gültig bis: 23.11.2001
6 Ratings
Bewertung: 76,7%
schlecht    sehr gut  

 
© Copyright 2007 ppedv AG