• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Problem mit Akkordionmenüs

A

Astroth

Neues Mitglied
Hallo Leute,

ich habe vor ein paar Tagen begonnen ein Akkordion-Menü in meine Website einzubauen. Man klickt also auf ein Bild, dann klappt ein weiteres Bild oder Inhalt aus und mit einem weiterem klick auf das Bild schließt sich das ganze wieder, sodass ich mehrere Menüpunkte übersichtlich öffnen und schließen kann. Hat auch alles geklappt.
Sobald ich aber mehr Inhalt habe als mein Browserfenster groß ist, muss ich natürlich skrollen. Skrolle ich zu einem unteren Menüpunkt und öffne ihn per klick, öffnet sich zwar das menü, allerdings springt alles wieder an den anfang der seite und ich muss zum lesen des Inhaltes oder zu schließen wieder ganz nach unten skrollen, was nervt!
Ich meine schonmal ein ähnliches Problem gelst zu haben, kann mich aber nicht mehr genau erinnern.

Falls ihr den Quelltext braucht sagt bescheid.

Ich danke euch für jeden Tipp und Hilfe :)
 
Die Seite ist noch nicht online, aber ich kann gerne den Quelltext zeigen, wenn dir das weiter hilft:

<!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" />

<script src="http://stellatest.de/js/prototype.js" type="text/javascript"></script>
<script src="http://stellatest.de/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="http://stellatest.de/js/lightbox.js" type="text/javascript"></script>
<link href="http://stellatest.de/css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("dt").click(function(){ // trigger
$(this).next("dd").slideToggle("fast"); // blendet beim Klick auf "dt" die nächste "dd" ein.
$(this).children("a").toggleClass("closed open"); // wechselt beim Klick auf "dt" die Klasse des enthaltenen a-Tags von "closed" zu "open".
});
});

</script>


<title>Lukartoons-Welcome!</title>


<style type:"text/css">

dd { display:none; }
.closed { background:none;}
.open { background:none; }

.new { display:block; z-index:005; width: 920px; height: 650px; position:absolute; top: 250px;
border-left-width:36px;
border-left-style:solid;
padding-left:0px;
border-color: transparent;
}

.liveinfo { z-index:005; position: absolute; width: 500px; top: 150px;
border-left-width:240px;
border-left-style:solid;
padding-left:25px;
border-color: transparent;}


</style>

<link rel="stylesheet" type="text/css" href="seitenlayout.css">

</head>

<body>

<div id="wrap">

<iframe class="fb-button" src="http://www.facebook.com/plugins/lik...show_faces=false&amp;share=true&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:100px;" allowTransparency="true"></iframe>

<p><img class="hintergrund" src="bg.jpg" /></p>
<p><img class="hb" src="headerblock.png"/></p>
<p><img class="shine" src="water_shine.png"/></p>
<p><img class="fire" src="water.png"/></p>
<p><img class="newwork" src="new.png"/></p>
<p><img class="head" src="head.png"/></p>
<p><img class="bb" src="but_block.png"/></p>
<p><img class="liveinfo" src="live_info.png"/></p>

<div class="new">

<!-------------- E V E N T S ---------------->

<dl>

<dt><a href="#" class="closed"><img src="events/storchenfest_001_t.png" /></a></dt>
<dd><img src="events/storchenfest_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/konfirmation_001_t.png" /></a></dt>
<dd><img src="events/konfirmation_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/landfrauen_001_t.png" /></a></dt>
<dd><img src="events/landfrauen_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/bauhaus_001_t.png" /></a></dt>
<dd><img src="events/bauhaus_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/karstadt_001_t.png" /></a></dt>
<dd><img src="events/karstadt_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/vorort_001_t.png" /></a></dt>
<dd><img src="events/vorort_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/herbstmarkt_001_t.png" /></a></dt>
<dd><img src="events/herbstmarkt_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/hochzeit_001_t.png" /></a></dt>
<dd><img src="events/hochzeit_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/dwg_001_t.png" /></a></dt>
<dd><img src="events/dwg_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/frankreich_001_t.png" /></a></dt>
<dd><img src="events/frankreich_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/geburtstag_001_t.png" /></a></dt>
<dd><img src="events/geburtstag_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/tohst_001_t.png" /></a></dt>
<dd><img src="events/tohst_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/campusfest_001_t.png" /></a></dt>
<dd><img src="events/campusfest_001.png" /></dd>
<dt><a href="#" class="closed"><img src="events/fetemusiqe_001_t.png" /></a></dt>
<dd><img src="events/fetemusiqe_001.png" /></dd>

</dl>
</div>

<!------------- B U T T O N S ------------------>

<a href="impressum.html"onmouseover="document.sub_but6.src='impressum4.png'" onmouseout="document.sub_but6.src='impressum3.png'">
<img class="impressum" src="impressum3.png" name="sub_but6"/></a>

<a href="caricature.html"onmouseover="document.sub_but1.src='button_caricatures2.png'" onmouseout="document.sub_but1.src='button_caricatures.png'">
<img class="button_caricatures" src="button_caricatures.png" name="sub_but1"/></a>

<a href="illustration.html"onmouseover="document.sub_but2.src='button_illustration2.png'" onmouseout="document.sub_but2.src='button_illustration.png'">
<img class="button_illustration" src="button_illustration.png" name="sub_but2"/></a>

<a href="about.html"onmouseover="document.sub_but3.src='button_about2.png'" onmouseout="document.sub_but3.src='button_about.png'">
<img class="button_about" src="button_about.png" name="sub_but3"/></a>

<a href="contact.html"onmouseover="document.sub_but4.src='button_contact2.png'" onmouseout="document.sub_but4.src='button_contact.png'">
<img class="button_contact" src="button_contact.png" name="sub_but4"/></a>

<a href="index.html"onmouseover="document.sub_but5.src='button_home2.png'" onmouseout="document.sub_but5.src='button_home.png'">
<img class="button_home" src="button_home.png" name="sub_but5"/></a>

</div>

<p>Lukartoons Karikatur Caricature Live Zeichnen Auftritt Design Illustration Cartoon Comic Lukas Liebhold Dessau HS Anhalt Skizze Bild Event malen artist of the week auftrag facebook service
</p>

</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben