JavaScript-Menü

Status
Nicht offen für weitere Antworten.
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
 
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
 
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ß
 
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
 
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!
 
Zuletzt bearbeitet:
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 o.O :)
 
Zuletzt bearbeitet:
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
 
Status
Nicht offen für weitere Antworten.
Zurück