es werden keine icons angezeigt in meinem menü

[ralf45_nrw]

hallo leute,

ich bin neu hier und habe eine frage, hoffe das sie hier passt.

sitze seit stunden an einer sache und finde nicht den fehler, bin bestimmt zu blond dafür.

habe im netz für mich ein passendes menü gefunden, habe soweit alles nach anleitung gemacht aber irgendwas mache ich falsch.

es ist ein vertikalmenü mit icons das sich nach links verschiebt wen man auf die icons geht. bestimmt kennt einer das schon (siehe bild) aber bei mir werden die icons nicht angzeigt.

und nach der anleitung ist es einfach.
habe die dateien die man braucht geladen BySlideMenu.js und Mootools.js in den beiden wird ja nichts geändert.

das bild habe ich auch und die benennung des bildes stimmt auch nur werden keine icons angezeigt.

html

      <ul id="textmenu">
      <li class="bg1 icon1">Element 1</li>
      <li class="bg2 icon2">Element 2</li>
      <li class="bg1 icon3">Element 3</li>
      <li class="bg2 icon4">Element 4</li>
      <li class="bg1 icon5">Element 5</li>
      <li class="bg2 icon6">Element 6</li>
      <li class="bg1 icon7">Element 7</li>
      <li class="bg2 icon8">Element 8</li>
      <li class="bg1 icon9">Element 9</li>
      </ul>

javascript

      var textmenu = new BySlideMenu('textmenu', {
      defaultIndex: 1,
      elementHeight: 30,
      elementWidth: 175
      });

gruß ralf

 

[XHelp]

Also du bist im falschen Forum, da es sich um Javascript handelt.
Zeig mal die css und deine Dateienstruktur. Vermutlich sind einfach nur die Pfadangabe falsch.

 

[ralf45_nrw]

hallo,

das tut mir leit das ich im falschen forum bin, bin leider anfänger.

#verticaltextmenu,
ul.bsm{
	margin: 0px auto;
	border:1px solid #B0B0B0;
	list-style-type: none;
}

ul.bsm li{
	border-left:2px solid #FFFFFF;
}
ul.bsm li.first,
#verticaltextmenu div.first{
	border-style: none;
}
ul.vertical li,
div.vertical div{
	border-top: 2px solid #ffffff;
	border-left-style: none;
}

#textmenu,
#fullwidthmenu{
	font-size:12pt;
	font-weight:bold;
}
#textmenu li,
#fullwidthmenu li{
	background-image:slidemenu.png;
	background-repeat:no-repeat;
	padding:1px 0 0 40px;
}
#textmenu li.icon1, #fullwidthmenu li.icon1{ background-position: 5px 1px; }
#textmenu li.icon2, #fullwidthmenu li.icon2{ background-position: 5px -22px; }
#textmenu li.icon3, #fullwidthmenu li.icon3{ background-position: 5px -48px; }
#textmenu li.icon4, #fullwidthmenu li.icon4{ background-position: 5px -66px; }
#textmenu li.icon5, #fullwidthmenu li.icon5{ background-position: 5px -88px; }
#textmenu li.icon6, #fullwidthmenu li.icon6{ background-position: 5px -110px; }
#textmenu li.icon7, #fullwidthmenu li.icon7{ background-position: 5px -132px; }
#textmenu li.icon8, #fullwidthmenu li.icon8{ background-position: 5px -156px; }

.bg1{ background-color: #F3F3F3; }
.bg2{ background-color: #E5E5E5; }

#verticaltextmenu h5{
	font-size:12pt;
	margin:1px 0 0;
	text-align:center;
}
#verticaltextmenu p{
	font-size:12pt;
	margin:0px;
	padding:2px;
	text-align:justify;
}

alle dateien befinden sich in einem ordner die html die .css und die beiden .js und das bild slidemenu.png

oder kennt einer so ein menü was evt. einfacher ist.

gruss ralf

 

[XHelp]

Wo weißt du denn die Icons zu? Ich sehe da nix.

 

[ralf45_nrw]

hallo,

das wird doch hier gemacht:

#textmenu li.icon1, #fullwidthmenu li.icon1{ background-position: 5px 1px; }
#textmenu li.icon2, #fullwidthmenu li.icon2{ background-position: 5px -22px; }
#textmenu li.icon3, #fullwidthmenu li.icon3{ background-position: 5px -48px; }
#textmenu li.icon4, #fullwidthmenu li.icon4{ background-position: 5px -66px; }
#textmenu li.icon5, #fullwidthmenu li.icon5{ background-position: 5px -88px; }
#textmenu li.icon6, #fullwidthmenu li.icon6{ background-position: 5px -110px; }
#textmenu li.icon7, #fullwidthmenu li.icon7{ background-position: 5px -132px; }
#textmenu li.icon8, #fullwidthmenu li.icon8{ background-position: 5px -156px; }

so wie ich das sehe.

im netz geht das nur nicht bei mir und ich habe soweit alles gemacht was man machen soll.

gruß ralf

 

[SleepProgger]

Wenn ich das richtig verstehe willst du nur das sich der Eintrag in der Navigation wo die Maus drüber ist ein wenig nach links bewegt, oder verstehe ich da was falsch?

Falls du wirklich nur das brauchst benötigst du kein Javascript.
Das geht auch einfach mit html und css.
Ich schreibe dir gleich nen kleines Beispiel.


Des weiteren sehe ich auch nicht wo du dort die Bilder zuweist.
Schreibe doch einfach mal "<li class="bg1 icon1">Element 1</li>" um in "<li class="bg1 icon1"><img src="adresseDeinesBildes" /></li>" und so weiter.
"


edit:
Hier eine einfache Lösung ohne Javascript.

<html>
	<head>
		<style type="text/css">
		<!--
		.naviUl{
			list-style-type:none;
			padding:0px;
			margin:0px;
		}
		.naviItem{
			padding:0px;
			padding-left:5px;
			margin:0px;
		}

		.naviItem:hover{
			margin:0px;
			padding-left:0px;
		}
		--> 
		</style>  
	</head>
	<body>
		<ul class="naviUl">
			<li class="naviItem"><a href="http://www.wolframalpha.com/" class="naviItem"><img src="Blue.gif" /></a></li>
			<li class="naviItem"><a href="http://www.wolframalpha.com/" class="naviItem"><img src="Green.gif" /></a></li>
			<li class="naviItem"><a href="http://www.wolframalpha.com/" class="naviItem"><img src="Yellow.gif" /></a></li>
			<li class="naviItem"><a href="http://www.wolframalpha.com/" class="naviItem"><img src="Red.gif" /></a></li>
		</ul>

	</body>
</html>

Hier anschauen

 

[MarderFahrer]

Natürlich geht das auch ohne JavaScript. Aber mit der MooTools Lib hat man es eben etwas komfortabler. Mit Transitions/Animations usw. Sieht dann gleich shick aus und man muss nicht alle selbst von Null an schreiben und anpassen etc.

Ich persönlich stehe ja etwas mehr auf jQuery. Habe mir MooTools aber auch noch nicht näher angeguckt.

Zum Problem:
Wenn wirklich alles auf einer Ebene im Dateisystem liegt, sollte es eigentlich funktionieren. In der CSS wird das Bild ohne Pfadangabe zugewiesen. Das passt also schon mal.
Interessant wäre einmal, was die Konsole zu sagen hat, wenn die Bilder nicht angezeigt werden. Also mittels FireBug in FireFox oder die eingebauten Konsolen von Chrome oder Safari.