✔ JavaScript-Menü

Sven Mintel · 12. Januar 2005

Re: Javascript menue

Das ist ja fein, zu Ostern gibt Barchecks für die Moderatoren:suspekt:

LoMo · 24. März 2005

Re: Javascript menue

hi @ all

Hätte mal ne Frage vielleicht weiss jemand ja ne Lösung dafür. ich hab des Menü vom Sven mal genommen und auf meine Seite angepasst. Aber ich hab des Menü in einer php Datei, die den Header meiner Seite bildet. Dann hab ich einen Frame und dann kommt die Inhaltsseite. Wenn ich jetzt des Menü in der Header php Datei integrier dann verschiebt er alles total eigenartig beim mouseover und auch beim normalen Seitenaufbau.

Weiss jemand dafür ne Lösung ?

mfg lomo

Sven Mintel · 25. März 2005

Re: Javascript menue

Habs geändert

Romsl · 26. März 2005

Re: Javascript menue

Hi,

ich verwende das selbe Menu. Nur habe ich das Problem, dass wenn ich dieses Menu nicht ganz nach oben setze (im Quellcode) es bei den verschiedenen Browsern unterschiedlich angezeigt wird.
Gibt es ein Menu das ich auch in der Mitte einer Seite plazieren kann und das bei jedem Browser ungefähr gleich aussieht und sich gleich verhält?

Danke

Romsl · 26. März 2005

Re: Javascript menue

ok ich habs.

Code:

objSub.style.top  = (blnType)
                            ? objCell.offsetTop + (objMenu.offsetTop - objElem.rows[0].cells[0].offsetTop) + intYPadding
                            : objCell.offsetHeight + (objMenu.offsetTop + objElem.rows[0].cells[0].offsetTop)+ intYPadding;

wird zu

Code:

objSub.style.top  = (blnType)
                            ? objCell.offsetTop + (objElem.rows[0].cells[0].offsetTop) + intYPadding
                            : objCell.offsetHeight + (objElem.rows[0].cells[0].offsetTop)+ intYPadding;

Viel Spaß

LoMo · 29. März 2005

Re: Javascript menue

Wenn ich es so ausbessere zeigt er gar kein Untermenü mehr an.

Code:

<script type="text/javascript">
<!-- 
 
//Korrektur der Submenu-Position
intXPadding = 0;
intYPadding = -4;
 
//Zeit bis zum Schliessen(ms)
intTimeout = 50;
 
//hier werden später die Timeouts gespeichert... jeweils separat für jedes Submenu
arrTimeouts = new Array();
 
/**
* liefert beim Initialisieren des Menues zum jeweiligen Hauptmenupunkt 
* die passende Tabbelle
* objMenu=Elternknoten der Hauptmenu-Tabelle
* intSub=Index des Menupunktes
**/
 
function get_sub(objMenu, intSub)
{
intTable =- 1;
 
for(j = 0; j < objMenu.childNodes.length; ++j)
{
	intTable += (objMenu.childNodes[j].tagName=='TABLE') ? 1 : 0;
 
	if(intTable==intSub)
	{
		return(objMenu.childNodes[j]);
	} 
	arrTimeouts.push(false);
}
return false;
}
 
 
 
/**
* Initialisiert das Menu beim ersten mouseover der Hauptmenupunkte-Tabelle
* ansonsten anzeigen/verstecken der jeweiligen Submenu-Tabelle
* objElem = (erster Aufruf)?Hauptmenupunktabelle:Index Menupunkt
* blnEvt = (!erster Aufruf)?(over=1||out=0):nix;
**/
 
 
function menu(objElem, blnEvt)
{
 
//initalisieren de Menues beim ersten Aufruf
if(arrTimeouts.length == 0)
{
	objElem.onmouseover = new Function('f','return false');
	objMenu = objElem.parentNode;
	 
	for(i = 0; i < objElem.rows[0].cells.length; ++i)
	{
		objCell = objElem.rows[0].cells[i];
		objCell.onmouseover = new Function('f', 'menu('+i+', 1)');
		objCell.onmouseout = new Function('f',' menu('+i+', 0)');
		objSub = get_sub(objMenu, i+1);
		objSub.style.position = 'absolute';
		objSub.style.left = intXPadding + 
		(objCell.offsetLeft + (objSub.offsetLeft - objSub.rows[0].cells[0].offsetLeft));
		objSub.style.top  = (blnType)
									? objCell.offsetTop + (objElem.rows[0].cells[0].offsetTop) + intYPadding
									: objCell.offsetHeight + (objElem.rows[0].cells[0].offsetTop)+ intYPadding;
		objSub.id = 'sub'+i;
		objSub.width = 1; //fixt opera-Macke mit Tabellenbreite
		objSub.onclick = new Function('f', 'this.style.visibility = "hidden"');
		objSub.onmouseover = new Function('f', 'menu('+i+', 1)');
		objSub.onmouseout = new Function('f', 'menu('+i+', 0)');
		objSub.className = 'sub';
	}
	return;
	}
	 
	//Zeigen
	if(blnEvt)
	{
		clearTimeout(arrTimeouts[objElem]);
		document.getElementById('sub'+objElem).style.visibility = "visible";
	}
	//Verstecken
	else
	{
		arrTimeouts[objElem] = setTimeout('document.getElementById("sub'+objElem+'").style.visibility="hidden"', intTimeout);
	}
	 
}
//-->
</script>

Kann mir jemand helfen ?

mfg lomo

Pharao2k · 7. August 2005

Re: Javascript menue

Kann es sein dass innerhalb von Tabellen das ganze nicht mehr funktioniert?

http://cms-dev.v490.vanager.de/test.htm

Im Firefox sind die Menüpunkte auf der X-Achse verschoben, im IE auf der Y-Achse.

Hat jemand ne Ahnung was ich ändern muss damit das wieder ?

Sturmrider · 27. März 2006

Es gibt keine Erweiterung von Sven Mintels Menü-Script oder?

(Erweiterung mit Subkats der Subkats :-( )

Achso, ich vergaß x___x tschuldige! Vielen Dank für die schon geposteten Scripts hier von allen Das hat mich schon einen großen Schritt weiter zu meiner PHP-Homepage gebracht!

Biergamasda · 28. März 2006

Hi

Du musst es so machen, wie Andreas sagte. Nur ist es nicht notwendig, das Tiemout auf 5 Sekunden zu setzen

also, im mouseout schreibst

Javascript:

timer = setTimeout('hideall()',100);

timer sollte eine globale Variable sein, hoffe das sagt dir was

desweiteren musst du, sofern du bei mouseover des 1. untermenüpunktes folgendes schreiben

Javascript:

clearTimeout(timer);

Nun zur Erläuterung.
Mal ganz abstakt betrachtet ist die Variable timer jetzt der Counter den du mit setTimeout anlegst. Wenn du jetzt im untermenüpunkt bei einem mouseover durch killTimer(timer) den Timer, der in "timer" steckt löscht, wird dieser logischerweise nicht mehr aufgerufen, da der countdown mehr oder weniger gestoppt ist.

hoffe das hilft dir weiter

lg Masda

//edit
sry, hab die letzten 2 Seiten übersehen

Sturmrider · 28. März 2006

Ich meinte aber eigentlich den Code von Sven Mintel :-(
und wie ich dort noch Submenüs der Submenüs erstellen kann. Das gleiche Prob. wie LoMo es hat/hatte. So wie ers da hat funktioniert es nämlich tatsächlich nicht

(und um ganz erlich zu sein...ich habe wirklich so gut wie keine Ahnung von JS...ich müsste mich da unbedingt mal bei gelegenheit reinarbeiten...da ich bereits PHP und Delphi kann, geht das bestimmt recht flott...aber ich habe leider nicht viel Zeit

Ich würde mich daher SEHR, über eure/deine Hilfe freuen :$ (mit dem was du geschrieben hast, kann ich leider nicht wirklich viel anfangen :-( )

Nochmal der Code von Sven Mintel, wo das mit den Subkats der Subkats eingebaut werden soll:

Code:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--    
    
    //Korrektur der Submenu-Position
    intXPadding = 0;
    intYPadding = -4;
    
    //Zeit bis zum Schliessen(ms)
    intTimeout = 50;
    
    //hier werden später die Timeouts gespeichert... jeweils separat für jedes Submenu
    arrTimeouts = new Array();

    /**
      *  liefert beim Initialisieren des Menues zum jeweiligen Hauptmenupunkt 
      *  die passende Tabbelle
      *  objMenu=Elternknoten der Hauptmenu-Tabelle
      *  intSub=Index des Menupunktes
      **/
      
      function get_sub(objMenu, intSub)
      {
            intTable =- 1;
            
            for(j = 0; j < objMenu.childNodes.length; ++j)
                {
                    intTable += (objMenu.childNodes[j].tagName=='TABLE') ? 1 : 0;
                    
                    if(intTable==intSub)
                        {
                            return(objMenu.childNodes[j]);
                        }  
                    arrTimeouts.push(false);
                }
        return false;
        }



        /**
          *  Initialisiert das Menu beim ersten mouseover der Hauptmenupunkte-Tabelle
          *  ansonsten anzeigen/verstecken der jeweiligen Submenu-Tabelle
          *  objElem = (erster Aufruf)?Hauptmenupunktabelle:Index Menupunkt
          *  blnEvt = (!erster Aufruf)?(over=1||out=0):nix;
          **/
          
          
          function menu(objElem, blnEvt)
          {
          
            //initalisieren de Menues beim ersten Aufruf
            if(arrTimeouts.length == 0)
                {
                    objElem.onmouseover = new Function('f','return false');
                    objMenu = objElem.parentNode;
                    
                    for(i = 0; i < objElem.rows[0].cells.length; ++i)
                        {
                            objCell = objElem.rows[0].cells[i];
                            objCell.onmouseover = new Function('f', 'menu('+i+', 1)');
                            objCell.onmouseout  = new Function('f',' menu('+i+', 0)');
                            objSub = get_sub(objMenu, i+1);
                            objSub.style.position = 'absolute';
                            objSub.style.left = intXPadding + 
                                                (objCell.offsetLeft + (objSub.offsetLeft - objSub.rows[0].cells[0].offsetLeft));
                            objSub.style.top  = intYPadding +
                                                objCell.offsetHeight +
                                                (objCell.offsetTop + (objSub.offsetTop - objSub.rows[0].cells[0].offsetHeight));
                            objSub.id = 'sub'+i;
                            objSub.width = 1;  //fixt opera-Macke mit Tabellenbreite
                            objSub.onclick = new Function('f', 'this.style.visibility = "hidden"');
                            objSub.onmouseover = new Function('f', 'menu('+i+', 1)');
                            objSub.onmouseout  = new Function('f', 'menu('+i+', 0)');
                            objSub.className = 'sub';
                        }
                    return;
                }
                
              //Zeigen
              if(blnEvt)
                    {
                        clearTimeout(arrTimeouts[objElem]);
                        document.getElementById('sub'+objElem).style.visibility = "visible";
                    }
              //Verstecken
              else
                    {
                        arrTimeouts[objElem] = setTimeout('document.getElementById("sub'+objElem+'").style.visibility="hidden"', intTimeout);
                    }
    
          }
//-->
</script>
<body>
<!-- 
    *alle Menutabellen(und nur diese) in einem div verpacken 
    *erste Tabelle für Hauptmenupunkt
    *für jeden Hauptmenupunkt eine weitere Tabelle mit Submenu
    *für leeren Hauptmenupunkt siehe 4. Tabelle
    *in erste Tabelle [onmouseover="menu(this)"]
    *andere Tabellen [style="visibility:hidden"]
    *der Klassenname des div's ist nur für Gestaltung per CSS von Interesse
    *die Submenue-Tabellen erhalten vom Skript den Klassennamen "sub"(auch zwecks Gestaltung) 
-->
 <div class="menu">
  <table onmouseover="menu(this)">
	<tr>
	  <td><a href="#">Main#1</a></td>
	  <td><a href="#">Main#2</a></td>
	  <td><a href="#">Main#3(leer)</a></td>
	  <td><a href="#">Main#4</a></td>
	</tr>
  </table>
  <table style="visibility:hidden">
	<tr><td><a href="#">Sub#1_1</a></td></tr>
	<tr><td><a href="#">Sub#1_2</a></td></tr>
	<tr><td><a href="#">Sub#1_3</a></td></tr>
	<tr><td><a href="#">Sub#1_4</a></td></tr>
  </table>
  <table style="visibility:hidden">
	<tr><td><a href="#">Sub#2_1</a></td></tr>
	<tr><td><a href="#">Sub#2_2</a></td></tr>
	<tr><td><a href="#">Sub#2_3</a></td></tr>
  </table>
  <table style="display:none">
    <tr><td></td></tr>
  </table>
  <table style="visibility:hidden">
	<tr><td><a href="#">Sub#4_1</a></td></tr>
	<tr><td><a href="#">Sub#4_2</a></td></tr>
	<tr><td><a href="#">Sub#4_3</a></td></tr>
	<tr><td><a href="#">Sub#4_4</a></td></tr>
	<tr><td><a href="#">Sub#4_5</a></td></tr>
	<tr><td><a href="#">Sub#4_6</a></td></tr>
  </table>
 </div>
</body>
</html>

-----------------
Gruß Sturmrider

✔ JavaScript-Menü

Sven Mintel

Mitglied

LoMo

Erfahrenes Mitglied

Sven Mintel

Mitglied

Romsl

Erfahrenes Mitglied

Romsl

Erfahrenes Mitglied

LoMo

Erfahrenes Mitglied

Pharao2k

Grünschnabel

Sturmrider

Erfahrenes Mitglied

Biergamasda

Erfahrenes Mitglied

Sturmrider

Erfahrenes Mitglied

Neue Beiträge