Aufklapp menu per mouse over/klick

R-M-D · 7. September 2008

HI,

sry wenn ich ech auf die Nerven gehe aber kaum ist das eine gelöst kommt schon das nächste Problem ^^"

und zwar : Ich würde zu dem einen Button gerne einen Aufklapp-Menu hinzufügen dass sobalt man mit der Maus rüberfährt oder per one-klick sich ein unter-Menu öffnet.
Müsste man dass ganze mit JS lösen oder geht das ganze auch per CSS ?

Habe es schon bei selfhtml.org versucht aber ist nicht wirklich was draus geworden ...

Es soll so in etwa ausschauen

-Grafik
.....|_menu 1
.....|
.....|_menu 2
.....|
.....|_menu 3

Hoffe ihr könnt mir hierbei wieder helfen ...

LG

Maik · 7. September 2008

Hi,

Stu Nicholls' Demo CSS only vertical sliding menu funktioniert beim Überfahren des Links mit CSS, und Simple click menu (in einer horizontalen Menü-Variante) beim Klick des Links mit JS.

mfg Maik

R-M-D · 7. September 2008

erstmal danke für deine antwort,
aber wie soll ich dass ganze anpssen ?

http://img15.myimg.de/testd4b6f.jpg (Maus über dem Info button und das menu erscheint)
So soll es aussehen, nur kommt bei diesen Script immer wieder werben sobalt man draufklickt...

Kann ich dass ganze auch in Dreamveawer erstellen und somit einiges vereinfachen ?

LG

R-M-D · 7. September 2008

Hab hier ein Demo gefunden :
http://www.stunicholls.com/menu/click_through.html#nogo
Könnte man dies evtl nachbasteln und demnach anpassen ?

LG
edit: sry fürs Doppelposting, hatte vergessen zu editieren ...

Maik · 7. September 2008

R-M-D hat gesagt.:
erstmal danke für deine antwort,
aber wie soll ich dass ganze anpssen ?

http://img15.myimg.de/testd4b6f.jpg (Maus über dem Info button und das menu erscheint)
So soll es aussehen, nur kommt bei diesen Script immer wieder werben sobalt man draufklickt...

Wie du das Anpassen sollst, kann ich dir derzeit nicht sagen, da ich den Quellcode deiner Seite, insbesondere das Markup des Menüs nicht kenne.

Und bei welchem Script erscheint bei dir Werbung?

Bei meiner Empfehlung auf jeden Fall schon mal nicht, die ich dir hier der besseren Übersicht wegen auf die wesentlichen Komponenten abgespeckt, und das Menü auf einen Menüpunkt mit Submenü reduziert habe:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_R-M-D</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;}
</style>

</head>
<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>

</body>
</html>

Wie ich vorhin anmerkte, demonstriert der Autor mit diesem JS-Code ein horizontal ausgerichtetes Menü, das sich aber genau so in vertikaler Ausrichtung nutzen lässt.

Bei deiner gefundenen Variante müsste der JS-Code komplett überarbeitet werden, da laut deinem Screenshot die Sublinks überhaupt keine weiteren Submenüs enthalten.

mfg Maik

R-M-D · 7. September 2008

danke,
aber sobalt ich es versuche einzubauen verwindet das ganze

Weißt du vllt woran das liegen könnte ?

LG

Maik · 7. September 2008

R-M-D hat gesagt.:
aber sobalt ich es versuche einzubauen verwindet das ganze

Weißt du vllt woran das liegen könnte ?

Solange du hier keinen Quellcode zeigst, oder den Link zu deiner Seite nennst, kann ich dazu auch nichts sagen.

mfg Maik

R-M-D · 7. September 2008

hier der gesamte Code :

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>
<style type="text/css">

#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" onclick="window.location.href='http://google.de'"></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>

Maik · 7. September 2008

Und weiter?

Ich kann nämlich darin die erforderlichen "Komponenten" des Menüs oder meines Beispiels nirgends finden.

mfg Maik

R-M-D · 7. September 2008

Ja, weil ich es wieder ausgebaut hatte...

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 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>

<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" onclick="window.location.href='http://google.de'"></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>

LG

Aufklapp menu per mouse over/klick

R-M-D

Mitglied

Maik

R-M-D

Mitglied

R-M-D

Mitglied

Maik

R-M-D

Mitglied

Maik

R-M-D

Mitglied

Maik

R-M-D

Mitglied

Neue Beiträge