nicht angemeldet
Hilfe bei der Umsetzung von js bei Navigation
Hallo!
Ich bin totaler js-Neuling, daher: Habt bitte etwas Verständnis.
Bin gerade dabei eine HOmepage zu erstellen. Ich möchte eine Bildergalerie erstellen. Dabei möchte ich die Bilder nach Jahreszahlen geordnet anzeigen lassen,bzw. eine Navigation erstellen, die es ermöglicht, nach Jahren zu sortieren.
Nun habe ich bereits ein js gefunden, das mir wirklich gut gefällt.
Hier mein HTML Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../css/css.css">
<link rel="shortcut icon" href="../../images/favicon.ico">
<link rel="stylesheet" href="../../css/lightbox.css" type="text/css" media="screen" />
<!-- js für Bilder Zoom-->
<script type="text/javascript" src="../../js/prototype.js"></script>
<script type="text/javascript" src="../../js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../../js/lightbox.js"></script>
<!-- Ende-->
<!-- js für Menue-->
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/slider.js"></script>
<!-- Ende-->
</head>
<body>
<div id="weisserhintergrund">
<div id="blauerhintergrund" style="background: url(../../images/hintergrund2.jpg)">
<!-- Menue -->
<div id="boxrechts">
<div id="button">
<img src="../../images/button1.png" width="184" height="32" class="menu\_class" />
<ul class="the\_menu1">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>
</div>
<div id="button">
<img src="../../images/button1.png" width="184" height="32" class="menu\_class" />
<ul class="the\_menu1">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>
</div>
</div>
<!-- Menue Ende -->
<div id="Titel">
Diercke Ballon Team
</div>
<div id="navigationlinks">
<a class="navilinks" href="../../html/index.html">Ballonfahrt</a><br/>
<a class="navilinks" href="....">Startorte</a><br/>
<a class="navilinks" href="....">Preise</a><br/>
<a class="navilinks" href="../../html/events/events.html">Events</a><br/>
<a class="navilinks" href="../html/galerie/galerie.html" style="color: rgb(157, 193, 005)"><strong>Galerie</strong></a><br/>
<a class="navilinks" href="....">Team</a><br/>
<a class="navilinks" href="....">Kontakt</a> <br />
</div>
<div id="inhalthintergrund">
<div id="inhaltsbox">
<a href="../../images/image-1.jpg" rel="lightbox"><img src="../../images/thumb-1.jpg" width="100" height="40" alt="" /></a>
<a href="../../images/image-1.jpg" rel="lightbox[plants]" title="Roll over and click right side of image to move forward."><img src="../../images/thumb-1.jpg" width="100" height="40" alt="Plants: image 1 0f 4 thumb" /></a>
<a href="../../images/image-1.jpg" rel="lightbox[plants]" title="Alternatively you can press the right arrow key." ><img src="../../images/thumb-1.jpg" width="100" height="40" alt="Plants: image 2 0f 4 thumb" /></a>
Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vi
tae, justo. Nullam dictum felis eu pe
de mollis pretium. Integer tincidunt.
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies
</div>
</div>
<div id="mininavi">
<img src="../../images/mininavi.gif">
<div id="zahlinmininavi1">
1
</div>
<img src="../../images/mininavi.gif">
<div id="zahlinmininavi2">
2
</div>
<img src="../../images/mininavi.gif">
<div id="zahlinmininavi3">
3
</div>
</div>
</div>
</div>
</body>
Es geht nun um das js für das Menü. Dies befindet sich in einer ausgelagerten jd-Datei:
$(document).ready(function () {
$('img.menu_class').click(function () {
$('ul.the_menu1').slideToggle('medium');
});
});
und in der CSS datei:
#button {
height: 32px;
width: 184px;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
.menu_class {
border:0px #1c1c1c;
}
.the_menu1 {
display:none;
width:184px;
border: 0px;
}
.the_menu1 li {
background-color: #43689c;
}
.the_menu1 li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.the_menu1 li a:hover {
padding:10px;
font-weight:bold;
color: #111f60;
Wenn man nun die Seite aufruft, öffnen sich bei beiden Button gleichzeitig die Untermenüs.....Ich möchte aber, dass es für jedes Jahr (2010,2009,2008) einen Button gibt, der sich nur öffnet, wenn man drauf clickt....
Kann mir hier jemand helfen? Bin schon langsam am Verzweifeln...
Grüße