Hallo,
ich habe an sich nur ein kleines Problem, jedoch komme ich ums Verrecken auf keine Lösung:
Ich habe ein simples Accordion Menü erstellt, funktioniert auch soweit, wie gewünscht. Jedoch! Wenn ich auf einen Button klicke, bei dem Unterpunkte aufgleiten sollen, "scrollt" es immer bis zu dem Punkt runter wo sich der Button befindet. Ich möchte aber, dass alleine die Unterpunkte aufgleiten, ohne dass es herunterscrollt. Der "Standpunkt", an dem die Seite war, soll also bleiben.
Hier mal der simple Aufbau (ich hab Dinge über und unter das Menü gesetzt, um es zu veranschaulichen):
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="website">
<div id="teaser">
<img src="" alt="bild" id="teaser" height="200px"/>
</div>
<div id="inhalt">
<div id="wrapper">
<div id="nav">
<ul>
<li id = "home">
<span id="onsite">Home</span>
</li>
<li id = "angebot">
<a href="#angebot">Angebotsformen</a>
<ul>
<li><a href="kleinkinderbetreuung.html">Kleinkinderbetreuung</a></li>
<li><a href="kitabetreuer.html">Kitabetreuer</a></li>
<li><a href="anmelden.html">Anmelden</a></li>
</ul>
</li>
<li id = "leistungen">
<a href="#leistungen">Spiel & Spaß</a>
<ul>
<li><a href="konzeption.html">Konzeption</a></li>
<li><a href="tagesablauf.html">So sieht ein Tag aus</a></li>
<li><a href="projekte.html">Projekte</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="main">
<span class="willkommen"><span style="font-weight:bold;font-size:23px;"><br /><br />Überschrift</span><br /><br />Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.<br /><br />Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.<br /><br />Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.<br /><br /></span>
</div>
</div>
</div>
</body>
</html>
Alles anzeigen
...und das zugehörige CSS...
CSS
#nav {
width: 200px;
}
#nav ul {
padding: 0px;
margin: 0px;
}
#nav ul li {
list-style: none;
background: #96cf34 !important;
margin-bottom:4px;
margin-top:4px;
}
#nav ul li a {
text-decoration: none;
display: block;
color: #333;
padding: 8px 10px;
font-size: 17px;
font-weight:bold;
}
#nav ul li:target > a {
color: gray;
background: #dbff80 !important;
}
#nav ul li:target > ul {
max-height: 200px;
}
#nav ul li ul{
display: block;
position: relative;
padding: 0px;
border: none;
box-shadow: none;
max-height: 0px;
overflow: hidden;
-webkit-transition: max-height 0.3s ease-out;
-moz-transition: max-height 0.3s ease-out;
-o-transition: max-height 0.3s ease-out;
-ms-transition: max-height 0.3s ease-out;
transition: max-height 0.3s ease-out;
}
#nav ul li ul li{
float: none;
display: block;
border: none;
}
#nav ul li ul li a {
padding-left: 10px;
}
#nav ul li ul li a:hover{
color:white;
background: #96cf34 !important;
}
#nav ul li a:hover{
color:white;
background: #96cf34 !important;
}
#onsite {
width:180px;
background: #dbff80 !important;
display: block;
padding: 8px 10px;
color: gray;
text-decoration: none;
font-size: 17px;
font-weight: bold;
}
Alles anzeigen
Vielen Dank, schonmal im Vorraus