Aufklapp menu per mouse over/klick

Status
Nicht offen für weitere Antworten.
Die ausgebaute Version hilft mir da aber nicht weiter, um der Fehlerursache auf den Grund zu gehen.

Dieser Teil des Quellcodes:

Code: 
<body onload="clickMenu('menu')">
<ul id="menu">
<li class="sub"> INFO
                <ul>
                        <li><a href="#nogo1">PSP FAQ</a></li>
                        <li><a href="#nogo2">NDS FAQ</a></li>
                        <li><a href="#nogo3">Wii FAQ</a></li>
                        <li><a href="#nogo4">XBOX360 FAQ</a></li>
                </ul>
</li>
<li>FILMELISTE</li>
<li>SPIELELISTE</li>
</ul>
muß natürlich im vorhandenen Dokumentkörper <body> ... </body> eingefügt werden.

Ob es eines und welches der apDIVs das ist, lässt sich hier als Außenstehender nicht nachvollziehen, aber das wirst du wohl selber am besten wissen.

Den onload-Eventhandler für das body-Element überträgst du in dein vorhandenes Element, und entfernst das doppelt vorhande <body> wieder aus dem Quellcode, da es darin nur einmal enthalten sein darf.

mfg Maik
 
Hmm, ich versteh nciht so ganz welche Version du genau haben wills


hab mal den
Code: 
<body onload="clickMenu('menu')">
<ul id="menu">
<li class="sub"> INFO
                <ul>
                        <li><a href="#nogo1">PSP FAQ</a></li>
                        <li><a href="#nogo2">NDS FAQ</a></li>
                        <li><a href="#nogo3">Wii FAQ</a></li>
                        <li><a href="#nogo4">XBOX360 FAQ</a></li>
                </ul>
</li>
</ul>
ins apDiv12 reineditiert
... aber es sieht iwie komisch aus :
http://img15.myimg.de/fgxbb63e2.jpg

alles ist verschoben,
kannst du mir bitte erklären wie ich das Bild ("info") bearbeiten kann, so dass man das menu per klick auf die Grafik sich öffnen lässt ?

LG
edit:
so sieht der code aus :

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
clickMenu = function(menu) {
        var getEls = document.getElementById(menu).getElementsByTagName("LI");
        var getAgn = getEls;

        for (var i=0; i<getEls.length; i++) {
                        getEls[i].onclick=function() {
                                for (var x=0; x<getAgn.length; x++) {
                                getAgn[x].className=getAgn[x].className.replace("unclick", "");
                                getAgn[x].className=getAgn[x].className.replace("click", "unclick");
                                }
                        if ((this.className.indexOf('unclick'))!=-1) {
                                this.className=this.className.replace("unclick", "");;
                                }
                                else {
                                this.className+=" click";
                                }
                        }
                }
        }
</script>
<style type="text/css">
#menu li {list-style:none;}
#menu ul {position:absolute;left:-9999px;width:128px;}
#menu li.click ul{left:50px; top:30px;}

#apDiv1 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
	background-attachment: fixed;
	background-image: url(Bilder/pinwand_02.gif);
	background-repeat: repeat-x;
	background-position: left top;
}
#apDiv2 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:2;
	background-image: url(Bilder/pinwand_01.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#apDiv3 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:3;
	background-image: url(Bilder/pinwand_04.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
#apDiv4 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:4;
	background-image: url(Bilder/Bilder/pinwand_07_02.gif);
	background-repeat: no-repeat;
	background-position: center top;
}
#apDiv5 {
	display:block;
	position:absolute;
	left:2%;
	top:42px;
	width:78px;
	height:27px;
	z-index:5;
	background-image: url(Bilder/off/pinwand_11.gif);
	background-repeat: no-repeat;
	page-break-after: auto;
	background-attachment: scroll;
	cursor: default;
}
    #apDiv5:hover { background-image:url(Bilder/on/pinwand2_11.gif); }
#apDiv6 {
	display:block;
	position:absolute;
	right:2%;
	top:42px;
	width:78px;
	height:24px;
	z-index:6;
	background-image: url(Bilder/off/pinwand_14.gif);
	background-repeat: no-repeat;
}
   #apDiv6:hover { background-image:url(Bilder/on/pinwand2_14.gif); }
#apDiv7 {
	position:absolute;
	width:627px;
	height:95px;
	z-index:7;
	background-image: url(Bilder/off/pinwand_07.gif);
	background-repeat: no-repeat;
        top: 35px;
        left: 50%;
        margin-left: -313.5px;
}
    #apDiv7:hover { background-image:url(Bilder/on/pinwand2_07.gif); }
#apDiv8 {
	position:absolute;
	left:50%;
	top:127px;
	width:333px;
	height:35px;
	z-index:8;
	background-image: url(Bilder/off/pinwand_19.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
}
    #apDiv8:hover { background-image:url(Bilder/on/pinwand2_19.gif); }
#apDiv9 {
	position:absolute;
	left:50%;
	top:162px;
	width:333px;
	height:35px;
	z-index:9;
	background-image: url(Bilder/off/pinwand_22.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv9:hover { background-image:url(Bilder/on/pinwand2_22.gif); }
#apDiv10 {
	position:absolute;
	left:50%;
	top:197px;
	width:333px;
	height:35px;
	z-index:10;
	background-image: url(Bilder/off/pinwand_25.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv10:hover { background-image:url(Bilder/on/pinwand2_25.gif); }
#apDiv11 {
	position:absolute;
	left:50%;
	top:338px;
	width:333px;
	height:35px;
	z-index:11;
	background-image: url(Bilder/off/pinwand_41.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv11:hover { background-image:url(Bilder/on/pinwand2_41.gif); }
#apDiv12 {
	position:absolute;
	left:50%;
	top:250px;
	width:333px;
	height:24px;
	z-index:12;
	background-image: url(Bilder/off/pinwand_29.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv12:hover { background-image:url(Bilder/on/pinwand2_29.gif); }
#apDiv13 {
	position:absolute;
	left:50%;
	top:278px;
	width:333px;
	height:24px;
	z-index:13;
	background-image: url(Bilder/off/pinwand_33.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv13:hover { background-image:url(Bilder/on/pinwand2_33.gif); }
#apDiv14 {
	position:absolute;
	left:50%;
	top:305px;
	width:333px;
	height:24px;
	z-index:14;
	background-image: url(Bilder/off/pinwand_37.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv14:hover { background-image:url(Bilder/on/pinwand2_37.gif); }

</style>
</head>
<body>

<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5" onclick="window.location.href='http://www.skype.com/intl/en/share/publicchats/join/?skypename=laruna92&topic=SvN+Chat&blob=4ZaAWmT10ZbrbivT4rWDWJQ50ZINtNj3n0ANVClXYfalH0_Kzyrky4EBLSSzZFZWtqyCGDiGroFxZLmXZAiMECG1ayXmtQICAq6pJ_-vfhOMfrS7hvUsz1hXCG-kKA'"></div>
<div id="apDiv6" onclick="window.location.href='http://www.psp-versus-nds.net/external.php?&lastpost=1'"></div>
<div id="apDiv7" onclick="window.location.href='http://piost.pi.ohost.de/Files/root/pinwand/info.html'"></div>
<div id="apDiv8" onclick="window.location.href='http://www.psp-versus-nds.net/showthread.php?t=30704'"></div>
<div id="apDiv9" onclick="window.location.href='http://www.psp-versus-nds.net/releases.php?'"></div>
<div id="apDiv10" onclick="window.location.href='http://www.psp-versus-nds.net/showthread.php?t=35340'"></div>
<div id="apDiv11" onclick="window.location.href='http://www.psp-versus-nds.net/showgroups.php'"></div>
<div id="apDiv12" 
<body onload="clickMenu('menu')">

<ul id="menu">
<li class="sub"> INFO
                <ul>
                        <li><a href="#nogo1">PSP FAQ</a></li>
                        <li><a href="#nogo2">NDS FAQ</a></li>
                        <li><a href="#nogo3">Wii FAQ</a></li>
                        <li><a href="#nogo4">XBOX360 FAQ</a></li>
                </ul>
</li>
</ul></div>
<div id="apDiv13" onclick="window.location.href='http://google.de'"></div>
<div id="apDiv14" onclick="window.location.href='http://google.de'"></div>
</body>
</html>
 
Zuletzt bearbeitet:
Tja, dann wirst du das Hintergrundbild für #apDIV12 in weitere Teile zerschneiden müssen, um daraus die grafische Umsetzung der Menüpunkte "Info" usw. im eigentlichen Menü verwenden zu können.

mfg Maik
 
Ergeben die Hintergrundbilder der einzelnen DIVs kein Gesamtbild des Seitendesigns? Und wurde dieses etwa nicht in diese Einzelteile zerschnitten, Stichwort "Slice-Images"?

Denn so, wie sich dein Screenshot nach dem Einfügen des Menüs im #apDiv12 darstellt, muß eben der Bereich für das Menü aus dem Hintergrundbild herausgenommen werden, um ihn in dem Menü einzusetzen.

Und wie ich vorhin darauf hingewiesen hatte, darf ein HTML-Dokument nur einen <body>-Tag besitzen.

mfg Maik
 
Kann man so sagen :p

Wie ein Menü in HTML ausgezeichnet wird, hab ich dir anhand des Beispiels von Stu Nicholls gezeigt, denn ein Link wird mit dem dafür vorgesehenen a-Element ausgezeichnet, und benötigt dann auch kein Javascript, um das Verweisziel im Fenster zu öffnen.

Falls der Seitenbesucher nämlich in seinem Browser Javascript deaktiviert hat, war es das dann mit der Navigation.

Oder willst du etwa in der Seite jeden Schnipsel in ein div-Element packen?

Beschäftige dich also erstmal mit den Grundlagen der Auszeichnungssprache HTML, und dem semantischen Markup, bevor du in die Formatierungssprache CSS einsteigst, und dich an der DIV-Suppe verschluckst.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück