JavaScript-Menü

Status
Nicht offen für weitere Antworten.
Re: Javascript menue

Hallo flooo,

Hier noch einmal auszugsweise den Quelltext:

Code:
  <script type="text/javascript">
  
  var subs=new Array('sub1','sub2','sub3','sub4','sub5');
   
  function hideall(){
	for(x=0; x<subs.length;x++){
	  document.getElementById(subs[x]).style.visibility='hidden';
	}
  }
	
  function display(mode,ele){
	if(mode=='s'){
	  hideall();
	  document.getElementById(ele).style.visibility='visible';
	  window.setTimeout("hideall()",10000);
	 }else{
	  document.getElementById(ele).style.visibility='hidden';
	}
  }
  </script>

<body>
<div>
  <table border="1" cellspacing="0"cellpadding="0">
	<tr>
	  <td width="150" height="20" onMouseOver="display('s','sub1')">Test</td>
	  <td width="150" height="20" onMouseOver="display('s','sub2')">Test</td>
	  <td width="150" height="20" onMouseOver="display('s','sub3')">Test</td>
	  <td width="150" height="20" onMouseOver="display('s','sub4')">Test</td>
	  <td width="150" height="20" onMouseOver="display('s','sub5')">Test</td>
	</tr>
  </table>
</div>
<div style="visibility:hidden; margin-left:0px; position:absolute; top:35px;" id="sub1" onClick="display('h','sub1')">
  <table height="90" border="1"  cellspacing="0"cellpadding="0">
	<tr><td width="150"><A href=test.html>Test</A></td></tr>
	<tr><td width="150"><A href=test.html>Test</A></td></tr>
Ich verstehe leider nicht, wo ich was eintragen muß. Könntest Du deinen Vorschlag vielleicht so präzisieren, daß ich ihn in diesen Quellcode nur noch eintragen muß. Ist nur ein Teil des Quelltextes, aber zum Erklären, wo ich was eintragen muß, reicht es vollkommen, da ich mich in HTML auskenne. Danke im Voraus und auch für deine jetzt geleistete Hilfe.
 
Re: Javascript menue

so hab nen bisl gebastelt und dat läuft jetzt auf IE und Mozilla
probier es aus
Code:
 <script type="text/javascript">
  
  var subs=new Array('sub1','sub2','sub3','sub4');
  var zeit='';
  function tmeout()
  {
	zeit=setTimeout('hideall()',800);
  }
  function hideall()
  {
	for(x=0; x<subs.length;x++)
	{
	  document.getElementById(subs[x]).style.visibility='hidden';
	}
  }
  function display(ele)
  {
	clearTimeout(zeit);
	for(x=0; x<subs.length;x++)
	{
		if(subs[x]!=ele)
		{
	  		document.getElementById(subs[x]).style.visibility='hidden';
		}
	}
	document.getElementById(ele).style.visibility='visible';
  }
  </script>

<body>
<div style="width: 100%; float: none;">
	  <div onmouseover="display('sub1');" onmouseout="tmeout();" style="text-align: center; background-color: #DDDDDD; width: 150px; height: 20px; float: left;">Test</div>
	  <div onmouseover="display('sub2');" onmouseout="tmeout();" style="text-align: center; background-color: #DDDDDD; width: 150px; height: 20px; float: left;">Test</div>
	  <div onmouseover="display('sub3');" onmouseout="tmeout();" style="text-align: center; background-color: #DDDDDD; width: 150px; height: 20px; float: left;">Test</div>
	  <div onmouseover="display('sub4');" onmouseout="tmeout();" style="text-align: center; background-color: #DDDDDD; width: 150px; height: 20px; float: left;">Test</div>
</div>
<div style="width: 100%; float: left;">
	<div style="float: left; width: 150px; visibility: hidden; margin-left:0px; border: 1px solid #000000" id="sub1" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
		  1
	</div>
	<div style="float: left; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub2" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
		  2
	</div>
	<div style="float: left; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub3" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
		  3
	</div>
	<div style="float: left; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub4" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
		  4
	</div>
</div>
flooo
 
Re: Javascript menue

Weil Weihnachten ist, mal was zum Copy&Pasten
santa.gif


Das Skript ist etwas länger... dafür werden die Positionierung der Submenues und die ganzen Funktionsaufrufe gespart.


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>

Das Skript muss nicht weiter angepasst werden... bei Bedarf können aber intTimeout, intXPadding und intYPadding geändert werden.

So siehts dann aus
 
Re: Javascript menue

Hallo flooo & Sven,

Das ist genau das was ich gesucht habe. Eure beiden Entwürfe sind Spitze. Ich habe schon beide Varianten ausprobiert und kann mich gleich daran machen, Sie in unsere Homepage einzubauen.

Vielen Herzlichen Dank für Eure Hilfe und für Eure Geduld mit einem Laien wie mir. Ich wünsche Euch Schöne Weihnachtsfeiertage und einen guten Rutsch ins neue Jahr.
 
Re: Javascript menue

Hallo floo & Sven,

Habe heute das neue Menü, welches ich dank Eurer Hilfe nun programmieren (für unser Design adaptieren) konnte, Online gestellt und es funktioniert ausgezeichnet. Danke noch einmal für Eure Hilfe. Eine Frage hat sich für mich bei der ganzen Bastelei noch aufgetan, die sicher viele andere User auch interessieren wird, wenn sie so ein Menü haben wollen und einen ähnlichen Wissensstand wie ich haben. Eure beiden Beispiele haben ein horizontales Hauptmenü und jeweils dazu ein vertikales Untermenü. Könnte man mit Euren Bespielen (mit wenigen Änderungen) auch ein vertikales Menü bedienen, d.h. das die Untermenüs z.B. rechts vom Hauptmenü aufgehen (so wie die Navigation hier im Forum + daneben überlappt die Untermenüs). Ich spreche aber jetzt nicht vom Hauptmenü in einer HTML-Tabelle, sondern wirklich nur von dem JavaScript-Teil, damit dann die Untermenüs neben den Links und nicht unter den Links aufgehen. Vielleicht ist das ja ohne viel Aufwand möglich. Danke
 
Re: Javascript menue

ist machbar:
Code:
<script type="text/javascript">
<!--    
    
    //Korrektur der Submenu-Position
    intXPadding = 1;
    intYPadding = 0;
    
    //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;
                    blnType = (objElem.rows.length > 1) ? 1 : 0;
                    intItems=(blnType)? objElem.rows.length: objElem.rows[0].cells.length
                    
                    for(i = 0; i < intItems; ++i)
                        {   
                            objCell = (blnType)? objElem.rows[i].cells[0] : 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 = (blnType)
                                                    ? (objCell.offsetLeft + (objMenu.offsetLeft - objSub.rows[0].cells[0].offsetLeft) + objCell.offsetWidth) + intXPadding
                                                    : (objCell.offsetLeft + (objSub.offsetLeft - objSub.rows[0].cells[0].offsetLeft)) + intXPadding;
                            
                            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;
                                       
                                                       
                            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>
 
Re: Javascript menue

Hallo Sven,

Ich sage nur Wow, in weniger als 2 Minuten geändert und man kann das Menü auch von der Seite bedienen. Sven, Du bist der Größte. Danke.
 
Re: Javascript menue

Sven Mintel hat gesagt.:
Weil Weihnachten ist, mal was zum Copy&Pasten
santa.gif


Das Skript ist etwas länger... dafür werden die Positionierung der Submenues und die ganzen Funktionsaufrufe gespart.


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>

Das Skript muss nicht weiter angepasst werden... bei Bedarf können aber intTimeout, intXPadding und intYPadding geändert werden.

So siehts dann aus


Könnte mir vielleicht noch jemand sagen wie ich z.B. bei Unterpunkt 1_3 ein weiteres Untermenü hinbekomme, das nach rechts hinausgeht?
 
Status
Nicht offen für weitere Antworten.
Zurück