Navigation ändern

son gohan

son gohan

Erfahrenes Mitglied
Hallo,

ich habe ein Menü bei dem sich rechts neben den Links kleine Untermenüs öffnen, wenn man mit der Maus über den Link fährt.

Die Links sind alle in einer Liste und mit CSS formatiert.

Jetzt habe ich das Problem das ich die Technik auf weitere Links zuornen will, aber die Technik wird durch Javascript gesteuert. Es wüurde so programmiert das eine id für eine Liste gegeben ist, und da ich aber jetzt weitere Listen habe, welche ich in der Seite verteilen will, funktioniert es nicht mehr. Weil man ja nur einmal eine id vergeben darf.

Der Javascript Code ist nicht so lang, kann mal jemand bitte schauen wie ich das hinbekommen könnte. Ich will also kurz gesagt die Technik auf beliebige Listen anwenden können, ein Beispiel mit zwei vier von mir bereits eingebauten Listen wäre echt hilfreich.

HTML: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Test</title>
 <style type="text/css">
<!--
body {
		font: normal 11px verdana;
		}
ul {
		margin: 0;
		padding: 0;
		list-style: none;
		width: 150px; /* Width of Menu Items */
		border-bottom: 1px solid #ccc;
		}
ul li {
		position: relative;
		}
li ul {
		position: absolute;
		left: 149px; /* Set 1px less than menu width */
		top: 0;
		display: none;
		}
/* Styles for Menu Items */
ul li a {
		display: block;
		text-decoration: none;
		color: #777;
		background: #fff; /* IE6 Bug */
		padding: 5px;
		border: 1px solid #ccc; /* IE6 Bug */
		border-bottom: 0;
		}
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { display: block; } /* The magic */
-->
</style>
<script language="JavaScript">
<!--
// JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
//-->
</script>
</head>
<body>
<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a>
		  <ul>
				<li><a href="#">History</a></li>
				<li><a href="#">Team</a></li>
		  </ul>
		</li>
		<li><a href="#">Services</a>
		  <ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">Internet Marketing</a></li>
				<li><a href="#">Hosting</a></li>
				<li><a href="#">Domain Names</a></li>
				<li><a href="#">Broadband</a></li>
		  </ul>
		</li>
		<li><a href="#">Contact Us</a>
		  <ul>
				<li><a href="#">United Kingdom</a></li>
				<li><a href="#">France</a></li>
				<li><a href="#">USA</a></li>
				<li><a href="#">Australia</a></li>
		  </ul>
		</li>
  </ul>
 <p>&nbsp;</p>
 
<div style="width:635px;border:1px solid #007F00;"><!--b1-->
<div style="float : left;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;margin:0px;">A</div>
<div style="float : right;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;margin:0px;">B</div>
<div style="float : left;
width : 240px;
border : 1px solid #007f00;
font-size : 14px;
text-align : left;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;margin:0px;">
<dl  style="margin:5px;">
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
</dl>
</div>
<div style="float : right;
width : 240px;
border : 1px solid #007f00;
text-align : left;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;margin:0px;">
<dl style="margin:5px;">
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
</dl>
</div>
<br style="clear:both;">
<p>&nbsp;</p>
<div style="float : left;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;margin:0px;">A</div>
<div style="float : right;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;margin:0px;">B</div>
<div style="float : left;
width : 240px;
border : 1px solid #007f00;
font-size : 14px;
text-align : left;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;margin:0px;">
<dl  style="margin:5px;">
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
</dl>
</div>
<div style="float : right;
width : 240px;
border : 1px solid #007f00;
text-align : left;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;margin:0px;">
<dl style="margin:5px;">
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
</dl>
</div>
<br style="clear:both;">
</div>

</body>
</html>

gruß
feh
 
Hallo,

ich entnehme deinem Beitrag das es möglicherweise geht so wie ich es gerne hätte?

Leider habe ich deine Antwort nicht so recht verstanden weil ich noch ein ziemlcier Anfänger bin in der Technik und bei Javascript sowieso. Kannst du mir daher nicht ein Beispiel in die gefloateten Listen machen, mit dem ich dan weiterarbeiten kann?

Wenn jemand über die Links in den Listen fährt soll sich halt so ein Submenü öffnen. In dem Fall sind die Links ja lauter p Buchstaben.

gruß
feh
 
Hallo,

kann man nicht irgendwie bei meinem Javascript den Code so ändern das ein Submenü beliebig eingesetzt werden kann durch ein class Attribut anstelle des einmaligen id Attributes?

HTML: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Test</title>
 <style type="text/css">
<!--
body {
  font: normal 11px verdana;
  }
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px; /* Width of Menu Items */
  border-bottom: 1px solid #ccc;
  }
ul li {
  position: relative;
  }
li ul {
  position: absolute;
  left: 149px; /* Set 1px less than menu width */
  top: 0;
  display: none;
  }
/* Styles for Menu Items */
ul li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff; /* IE6 Bug */
  padding: 5px;
  border: 1px solid #ccc; /* IE6 Bug */
  border-bottom: 0;
  }
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { display: block; } /* The magic */
-->
</style>
<script language="JavaScript">
<!--
// JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
//-->
</script>
</head>
<body>
 <p>&nbsp;</p>
<div style="width:635px;border:1px solid #007F00;"><!--b1-->
<div style="float : left;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;margin:0px;">A | mouseover-effekt</div>
<div style="float : right;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;margin:0px;">B</div>
<div style="float : left;
width : 240px;
border : 1px solid #007f00;
font-size : 14px;
text-align : left;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;margin:0px;">
<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
	<ul>
	<li><a href="#">History</a></li>
	<li><a href="#">Team</a></li>
	</ul>
  </li>
  <li><a href="#">Services</a>
	<ul>
	<li><a href="#">Web Design</a></li>
	<li><a href="#">Internet Marketing</a></li>
	<li><a href="#">Hosting</a></li>
	<li><a href="#">Domain Names</a></li>
	<li><a href="#">Broadband</a></li>
	</ul>
  </li>
  <li><a href="#">Contact Us</a>
	<ul>
	<li><a href="#">United Kingdom</a></li>
	<li><a href="#">France</a></li>
	<li><a href="#">USA</a></li>
	<li><a href="#">Australia</a></li>
	</ul>
  </li>
  </ul>
</div>
<div style="float : right;
width : 240px;
border : 1px solid #007f00;
text-align : left;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;margin:0px;">
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
	<ul>
	<li><a href="#">History</a></li>
	<li><a href="#">Team</a></li>
	</ul>
  </li>
  <li><a href="#">Services</a>
	<ul>
	<li><a href="#">Web Design</a></li>
	<li><a href="#">Internet Marketing</a></li>
	<li><a href="#">Hosting</a></li>
	<li><a href="#">Domain Names</a></li>
	<li><a href="#">Broadband</a></li>
	</ul>
  </li>
  <li><a href="#">Contact Us</a>
	<ul>
	<li><a href="#">United Kingdom</a></li>
	<li><a href="#">France</a></li>
	<li><a href="#">USA</a></li>
	<li><a href="#">Australia</a></li>
	</ul>
  </li>
  </ul>
</div>
<br style="clear:both;">
<p>&nbsp;</p>
<div style="float : left;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;margin:0px;">A</div>
<div style="float : right;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;margin:0px;">B</div>
<div style="float : left;
width : 240px;
border : 1px solid #007f00;
font-size : 14px;
text-align : left;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;margin:0px;">
<dl  style="margin:5px;">
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
</dl>
</div>
<div style="float : right;
width : 240px;
border : 1px solid #007f00;
text-align : left;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;margin:0px;">
<dl style="margin:5px;">
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
</dl>
</div>
<br style="clear:both;">
</div>
</body>
</html>
 
Hallo Sven,

du kannst dir ja bestimmt vorstellen was ich machen will.

Kannst du mir sagen ob das den überhaupt möglich ist. Du solltest allerdings wissen, das ich kaum die Fachbegriffe verstehe. Erklär es mir bitte daher ganz einfach.

Ich weis nicht ob du dir mein Beispiel mal angesehen hast im Browser, aber mein Prblem ist das ich nur einmal im code eine id vergeben kann, da ich aber beliebige Submenüs aufstellen will müsste ich beliebige id vergeben können oder so wie beim css einfach eine class bilden.
 
Die Antwort auf deine Frage hab ich bereits ein paar Postings vorher gegeben.

Versuche mal, deine Problemstellungen anhand der gelieferten Informationen selbst zu lösen, anstatt solange nachzubohren, bis jemand entnervt die Lösung serviert.

Wenn du nicht weisst, wie eine Sprache funktioniert, beginne sie zu verstehen lernen... durch vorgekauten Code lernst du nix.
 
Hallo Sven,

schade das du mir mit Vorurteilen in deinen Beiträge antwortest, anstatt mir korrekte Antworten zu geben. Wieso soll ich den jetzt anfangen Javascript zu studieren um zu erfahren ob es geht oder nicht, wieso wurde dieses Forum aufgestellt?

Wieso soll jemand entnervft mir antworten, ist den jemand gezwungen mir zu antworten?

Habe ich den keine Nerven genug gescheut, als ich das Thema eröffnet habe?

Ich lese öffter und immer Sachen durch um etwas zu verstehen, aber da ich viele Schlechte Erfahrungen gemacht habe, dadurch das ich eine Menge nicht verstehe weil mir Fachwissen fehlt Frage ich lieber hier nach und hole mir nur die Information die ich brauche.

Ich hoffe du kannst das respektieren und regst dich demnächst nicht mehr darüber auf.

Zitat: "Die Antwort auf deine Frage hab ich bereits ein paar Postings vorher gegeben."

Dann habe ich deine Antwort nicht verstanden weil Sie in Fachbegriffen war versteckt, bitte dies zu entschuldigen.
 
Die Antwort habe ich dir bereits gegeben:
Übergebe der Funktion die ID als Parameter... damit kannst du drinnen dann auf beliebige Elemente zugreifen.
Zum Vergrößern anklicken....
... du musst also nur lesen. Wenn diese Antwort zu viele Fachbegriffe enthalten sollte, dann möcht ich mal wissen, was du bisher alles in Sachen JS gelesen hast:confused:

Wieso soll ich den jetzt anfangen Javascript zu studieren um zu erfahren ob es geht oder nicht
Zum Vergrößern anklicken....
.....Warum muss man Architektur studieren, wenn man ein Haus bauen will?
Muss man nicht.... man kann auch jemanden engagieren, der Architektur studiert hat, wenn man sich damit nicht selbst befassen will.
 
Wieso wird ein Forum wie Tutorials bereitgestellt wenn man auch genausogut alles in einem Buch oder sonst nachlesen und studieren kann?

Ich habe von Javascript so viel Ahnung das ich fertige funktionierende Script einbauen kann soweit sie nicht allzu aufwendig sind.

Was ein Parameter weis ich nicht genau aber ich denke mal so was wie ein Befehl, Code.

Übergebe der Funktion die ID als Parameter...
Sagt mir leider nicht viel, deshalb habe ich auch um einen Beispiel gebeten, das würde mir reichen für mein Projekt. Ich denke mal es gibt genug Sachen von denen du auch keine Ahnung hast und darauf gerne eine unkomplizierte Antwort bekommen willst oder ein Beispiel, wenn du jemanden danach frägst. Beispiele sind noch am besten zum lernen.

Das man alles selber lernen kann ist schon klar, aber wofür ist dann noch ein Forum da, und eine so einfache Frage ist es ja denke ich mal auch nicht.

Also klarer ausgedrückt ich habe deine Anweisung net verstanden, kannst du mir ein Beispiel geben.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück