WIe bekomme ich das hin?

[Moby]

Hallo an alle User,

ein Herzliches Grüßgott. Ich habe was gefunden was mir sehr gefällt, weis aber nicht wie ich es hinbekomme.

Im Test1 File sieht man den Zustand vor dem Klicken.

Im Test4 File sieht man das nach Klicken ein Text wie bei einem Accordion rauskommt.

Im Test2 File sieht man wie es dann aussieht nach dem Klick, die Schrift hat eine andere Farbe.

Wie bekommt man soetwas hin, auch wenn man mehrere Überschriften hätte sodass man das nächste anklickt sich die eine schliest und die ander öffnet und die geschlossene auch den Zustand von Test2 hat!

Bitte um Hilfe! Bin ANfänger und finde das sehr gut gemacht!

Vielen Dank für eure Unterstützung, danke!

mfg Moby

 

[html001]

für mich sieht es so aus als ob du ein drop down menu machen wilst.
mit javascript würde das so aussehen

<script language="JavaScript" type="text/javascript">
function move1(){
document.getElementById("box2").style.top = "90px";
document.getElementById("p1").style.visibility = "visible";
document.getElementById("p2").style.visibility = "visible";
}

function move2(){
document.getElementById("box2").style.top = "50px";
document.getElementById("p1").style.visibility = "hidden";
document.getElementById("p2").style.visibility = "hidden";
}
</script>
<script language="JavaScript" type="text/javascript">
var m1;
m1=0;

function move1(){


if(m1==0){
document.getElementById("box2").style.top = "90px";
document.getElementById("p1").style.visibility = "visible";
document.getElementById("p2").style.visibility = "visible";
m1=1;
}
else{
m1=0;
document.getElementById("box2").style.top = "50px";
document.getElementById("p1").style.visibility = "hidden";
document.getElementById("p2").style.visibility = "hidden";
}
}

 

function move2(){
m1=0;
document.getElementById("box2").style.top = "50px";
document.getElementById("p1").style.visibility = "hidden";
document.getElementById("p2").style.visibility = "hidden";
}
</script>
<style type="text/css">
  #link1{ font-family:Arial; }
 a:link { color:#000000; text-decoration:none; font-weight:bold; }
 a:visited { color:#81C426; text-decoration:none; font-weight:bold; }
 a:focus { color:#81C426; text-decoration:none; font-weight:bold; }
 a:hover { color:#81C426; text-decoration:underline; font-weight:bold; }
 a:active { color:#81C426; text-decoration:none; font-weight:bold; } 
</style>
<style type="text/css">
<!--
#box1 {
position:absolute;left:500px;top:50px;
top:30px;
left:20px;
z-index:4;
}
#box2 {
position:absolute;left:500px;top:50px;
top:50px;
left:20px;
z-index:3;
}

#p1 {
position:absolute;left:500px;top:50px;
left:20px;
top:50px;
z-index:2;
visibility: hidden;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
#p2 {
position:absolute;left:500px;top:50px;
left:20px;
top:70px;
z-index:1;
visibility: hidden;
}

.d1 {
position:absolute;left:500px;top:50px;
width:130px;
height:20px;
color: #000000;
background-color: #0073BB;
border: 1px solid #000000;
text-indent: 3px;
padding-top: 2px;
}

.d3 {
position:absolute;left:500px;top:50px;
width:130px;
height:0px;
color: #000000;
background-color: #0073BB;
border: 0px solid #660000;
text-indent: 3px;
padding-top: 2px;
}

.d2 {
position:absolute;left:500px;top:50px;
width:130px;
height:20px;
color: #000000;
background-color: #0073BB;
text-indent: 10px;
border-bottom: 1px dotted #000000;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-top-width: 1px;
border-top-color: #000000;
margin-top: 2px;
line-height: 15pt;
}

.d4 {
position:absolute;left:500px;top:50px;
width:130px;
height:20px;
color: #000000;
background-color: #0073BB;
text-indent: 10px;
border-bottom: 1px solid #000000;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-top-width: 1px;
border-top-color: #000000;
margin-top: 2px;
line-height: 15pt;
}
-->
</style>

<div id="box1" class="d1"><a href="javascript:;" onclick="move1()">Kontakt</a>  </div>
<div id="box2" class="d3"><a href="javascript:;" onclick="move2()"></a></div>
<div id="p1" class="d2"><a href="" id="link1">Impressum</a></div>
<div id="p2" class="d4"><a href="" id="link1" >Kontakt</a></div>

must nur noch farbliche und positionänderungen vornehmen

ich würde allerdings css empfehlen

<style type="text/css">

* {
margin: 0;
padding: 0;
}

#menu {
width: 100%;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}

#menu {
width: 140px;
height: 600px;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}

#menu ul {
width: 140px;
list-style-type: none;
} 

#menu h3 {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}

#menu a {
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #ff9224;
color: #003366;
}

#menu a:hover {
color: #ff9224;
background: #003366;
}


#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
top: 0;
left: 140px;
z-index: 2;
display: none;
} 

#menu ul li:hover ul {
display: block;
}

* html #menu ul li{
float: left;
width: 100%;
}

*+ html #menu ul li {
float: left;
width: 100%;
}

*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}

*html #menu ul li a {
height: 1%;
}


#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}


#menu a.direkt:hover {
color: #ff9224;
background: #003366;
border: 1px solid #ccc;
}

  #link1{ font-family:Arial; font-size:8pt; }
 a:link { color:#000000; text-decoration:none; font-weight:bold; }
 a:visited { color:#AFAEAE; text-decoration:none; font-weight:bold; }
 a:focus { color:#AFAEAE; text-decoration:none; font-weight:bold; }
 a:hover { color:#AFAEAE; text-decoration:underline; font-weight:bold; }
 a:active { color:#AFAEAE; text-decoration:none; font-weight:bold; } 
</style>

<ul>

<li>

<h3><a href="#">Thema1</a></h3>
<ul>
<li><a href="" Thema 1.1</a></li>
<li><a href="#">Thema 1.2</a></li>
<li><a href="" >Thema 1.3</a></li>
</ul>
</li>
</ul>

weiß leider nicht ob ich jetzt das geposted hab was du haben wilst(hab aus irgendwelchen gründen deinen anhang nicht lesen können)

Gruß html001

 

[Moby]

Vielen Dank, danke,

habe es nun soweit hinbekommen das ein Accordion funktioniert. Nun habe ich noch das Proplem, das ich es nicht in meine Webseite bekomme.

Das sind die Zeilen die ich im Html habe (Auszug):

<h8 class="service_title">XELAK</h8>
<div class="service_info">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>

Mein Javascript:

$ (document).ready (function()
	{
		$ ("div.service_info").hide();
		$ ("h8.service_title").click(function()
	{
		$("div.service_info").slideUp("slow");
		$(this).next("div.service_info:hidden").slideDown("slow");
	});
});

Nun möchte ich es hier einfügen:

<div class="oe_wrapper">
			<div id="oe_overlay" class="oe_overlay"></div>
			<ul id="oe_menu" class="oe_menu">
				<li><a href="">Willkommen</a>
					<div>
						<ul>
							<li class="oe_heading">XELAK GmbH</li>
							<li><a href="#">Wer ist die XELAK GmbH</a></li>
							<li><a href="#">Was macht die XELAK GmbH</a></li>
							<li><a href="#">XELAK GmbH und die Umwelt</a></li>
						</ul>
					</div>

Wie kann iche es schaffen dass ich die HTML Zeilen unter "Wer ist XELAK GmbH", "Was macht die XELAK GmbH" einfügen!

Bitte um Hilfe!

Danke akrenn

Ps: so sieht das Beispiel aus: http://tympanus.net/Tutorials/OverlayEffectMenu
Meines sieht ähnlich aus nur das halt die Untermenü anders sind!