✔ JavaScript-Menü

rainman80 · 5. November 2007

Also beim IE7 muss man JavaScript aktivieren dann funktioniert es auf jeden Fall bei mir. Welchen Browser benutzt du denn?
Gruß
Robert

KurtKabine · 5. November 2007

Den IE6, glaub ich

Das Untermenü wird nicht genau unter dem Obermenu angezeigt sondern eine Position rechts davon...

rainman80 · 5. November 2007

Ja ich habe bis jetzt nur unter IE7 und Firefox 2 laufen lassen, dass Menü kann ich leider so nicht verwenden :-(, weil wie oben beschrieben das Untermenü über den Rest der Seite eingeblendet werden sollte...

Kannst du mir da irgendwie helfen?

KurtKabine · 5. November 2007

Hmmmm also ich kann Dir nur die folgende Lösung anbieten. Bin aber nicht sicher ob diese bei jedem Explorer funktionieren wird.

Du ersetzt deinen Code durch den untenstehenden.

Dann kopierst Du das ganze Menu, gestaltest deine Seite und fügst das Menu wieder ein...

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Kardex Menü</title>
<style type="text/css">
<!--
div 
{
	font-size: 10px;
	font-weight: bold;	
	font-family: Arial, helvetica;
	font-color: #698aea;
	a-link: #698AEA;
	v-link: #698AEA;
	text-decoration: none;	
}
-->
    </style>
 
<script type="text/javascript">
  
  var subs=new Array('sub1','sub2','sub3');
  var zeit='';
  function tmeout()
  {
	zeit=setTimeout('hideall()',100);
  }
  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>

</head>
<body>
<div style="position: absolute; left: 10; top: 15; width: 914; height: 125">
<div style="width: 100%; float: none;">
	<div onmouseout="tmeout();" style="float: left;"><a href="home.html">
      <img src="images/home.gif" alt="" border="0" width="128" height="19"/></a></div>
	<div style="text-align: center;float: left;">
      <img src="images/spacer.gif" alt="" width="1" height="19"/></div>
	  
	<div onmouseover="display('sub1');" onmouseout="tmeout();" style="float: left;"><a href="home.html">
      <img src="images/about.gif" alt="" border="0" width="128" height="19"/></a></div>
	<div style="text-align: center;float: left;">
      <img src="images/spacer.gif" alt="" width="1" height="19"/></div>
	  
	<div onmouseover="display('sub2');" onmouseout="tmeout();" style="float: left;"><a href="home.html">
      <img src="images/products.gif" alt="" border="0" width="128" height="19"/></a></div>
	<div style="text-align: center;float: left;">
      <img src="images/spacer.gif" alt="" width="1" height="19"/></div>
	  
	<div onmouseout="tmeout();" style="float: left;"><a href="home.html">
      <img src="images/reports.gif" alt="" border="0" width="125" height="19"/></a></div>
	<div style="text-align: center;float: left;">
      <img src="images/spacer.gif" alt="" width="1" height="19"/></div>
	  
	<div onmouseout="tmeout();" style="float: left;"><a href="home.html">
      <img src="images/news.gif" alt="" border="0" width="128" height="19"/></a></div>
	<div style="text-align: center;float: left;">
      <img src="images/spacer.gif" alt="" width="1" height="19"/></div>
	  
	<div onmouseover="display('sub3');" onmouseout="tmeout();" style="float: left;"><a href="home.html">
      <img src="images/contact.gif" alt="" border="0" width="128" height="19"/></a></div>
</div>
<div style="width: 100%; float: left;">
	<div style="float: left; width: 126px; visibility: hidden; margin-left:129px; border: 1px solid #D5D8DF" id="sub1" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onclick="display('h','sub1')">
		<a href="http://www.moschke.info">
        <img src="images/konzern.gif" onmouseover="this.src='images/konzern_sel.gif'" onmouseout="this.src='images/konzern.gif'" alt="" border="0" width="126" height="21"/></a>
		<a href="http://www.hornecker.info">
        <img src="images/warum.gif" onmouseover="this.src='images/warum_sel.gif'" onmouseout="this.src='images/warum.gif'" alt="" border="0" width="126" height="21"/></a>
		<a href="http://www.hornecker.info">
        <img src="images/produktion.gif" onmouseover="this.src='images/produktion_sel.gif'" onmouseout="this.src='images/produktion.gif'" alt="" border="0" width="126" height="21"/></a>
		<a href="http://www.hornecker.info">
        <img src="images/offene.gif" onmouseover="this.src='images/offene_sel.gif'" onmouseout="this.src='images/offene.gif'" alt="" border="0" width="126" height="21"/></a>
				  
	</div>
	<div style="float: left; visibility: hidden; width: 126px; margin-left:1px; border: 1px solid #D5D8DF" id="sub2" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onclick="display('h','sub1')">
		<a href="http://www.hornecker.info">
        <img src="images/lager.gif" onmouseover="this.src='images/lager_sel.gif'" onmouseout="this.src='images/lager.gif'" alt="" border="0" width="126" height="21"/></a>  
		<a href="http://www.hornecker.info">
        <img src="images/office.gif" onmouseover="this.src='images/office_sel.gif'" onmouseout="this.src='images/office.gif'" alt="" border="0" width="126" height="21"/></a>
		<a href="http://www.hornecker.info">
        <img src="images/kunden.gif" onmouseover="this.src='images/kunden_sel.gif'" onmouseout="this.src='images/kunden.gif'" alt="" border="0" width="126" height="21"/></a>
		<a href="http://www.hornecker.info">
        <img src="images/produkt.gif" onmouseover="this.src='images/produkt_sel.gif'" onmouseout="this.src='images/produkt.gif'" alt="" border="0" width="126" height="21"/></a>		  
	</div>
	<div style="float: left; visibility: hidden; width: 126px; margin-left:256px; border: 1px solid #D5D8DF" id="sub3" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onclick="display('h','sub1')">
		<a href="http://www.hornecker.info">
        <img src="images/online.gif" onmouseover="this.src='images/online_sel.gif'" onmouseout="this.src='images/online.gif'" alt="" border="0" width="126" height="21"/></a>
		<a href="http://www.hornecker.info">
        <img src="images/verkauf.gif" onmouseover="this.src='images/verkauf_sel.gif'" onmouseout="this.src='images/verkauf.gif'" alt="" border="0" width="126" height="21"/></a>
		<a href="http://www.hornecker.info">
        <img src="images/kunden.gif" onmouseover="this.src='images/kunden_sel.gif'" onmouseout="this.src='images/kunden.gif'" alt="" border="0" width="126" height="21"/></a>
		<a href="http://www.hornecker.info">
        <img src="images/kardex.gif" onmouseover="this.src='images/kardex_sel.gif'" onmouseout="this.src='images/kardex.gif'" alt="" border="0" width="126" height="21"/></a>
	</div>	
</div>
<div>test</div>
</div>
</body>
</html>

rainman80 · 5. November 2007

hmm Du hast grad noch den a-link und v-link style hinzugefügt und ein neues div hinzugefügt so wie ich das hier sehe, wird bei dir jetzt der Text: "test" gleich unter den grauen Hauptmenübalken angezeigt und somit das aufklappende Menü darüber eingeblendet?
Bei mir nicht :-(

rainman80 · 5. November 2007

Also im Endeffekt soll das Menü genauso wie auf dieser Seite aussehen:

http://www.kardex.ch

Das ist meine Aufgabe....

KurtKabine · 5. November 2007

Darum musst Du ja dann auch das ganze Menu kopieren&löschen, und danach die Seite gestalten und schlussendlich das Menu wieder einfügen. Bei mir klappt das einwandfrei, ob IE, Firefox oder Opera.

Maik · 5. November 2007

Hi,

schau dir mal als Alternative http://www.cssplay.co.uk/menus/basic_dd.html an. Dieses Menü kommt ohne JS aus und funktioniert auch dann, falls der User in seinem Browser JS deaktiviert hat.

Und bitte unterlasse zukünftig das doppelte Posten deiner Problemstellung - siehe hierzu Netiquette (Nr.12). Vielen Dank.

rainman80 · 5. November 2007

Ok muss ich morgen mal ausprobieren, ich verstehe aber nicht genau welchen Unterschied es macht wenn ich jetzt z.B. den ganzen BODY Part schreibe und danach oben quasi den ganzen Code den du da oben verändert hast einfüge...

rainman80 · 5. November 2007

Sorry wegen dem Doppelpost, dachte das Thema wird in diesem alten Thread nicht mehr gefunden und da wollte ich einen neuen aufmachen...

Bin halt noch neu hier und grün hinter den Ohren ;-)

Also nochmal tut mir Leid...

thx für den Tipp, ich kenne diese Seite schon ABER sowie ich das verstehe muss ich da erstmal die Genehmigung einholen und eine kleine Spende wäre angebracht...

soweit ich mit meinen Englischkenntnissen das ganze übersetze...

✔ JavaScript-Menü

rainman80

Grünschnabel

KurtKabine

Mitglied

rainman80

Grünschnabel

KurtKabine

Mitglied

rainman80

Grünschnabel

rainman80

Grünschnabel

KurtKabine

Mitglied

Maik

rainman80

Grünschnabel

rainman80

Grünschnabel

Neue Beiträge