Hallo,
ich möchte mein Sidemenu per Klick öffnen und schließen.
Es sieht so aus:
[Blockierte Grafik: http://thumbs.picr.de/24352759gt.jpg][Blockierte Grafik: http://thumbs.picr.de/24352916zr.jpg]
Wenn man nun auf die drei Balken klickt soll es geschlossen werden, sodass es so aussieht:
[Blockierte Grafik: http://thumbs.picr.de/24352783vc.jpg]
Leider habe ich kaum Ahnung von JS und jQuery.
HTML-Code:
<div id="sidemenu">
<ul>
<li><h2>HTML<img style="display: inline-block;margin-top: 15px; padding-left: 70px;float: right 0;width: 20px;height: 15px;" src="Grafiken/Hide-Show-Icon.png" onClick="HideMenuBar"/><h2></li>
<li><a class="active" href="HTML.html">HTML – Home</a></li>
<li><a href="Basics.html">Basics</a></li>
</ul>
</div>
CSS-Code:
#sidemenu {width: 170px;
max-width: 170px;
height: 1908px;
position: absolute;
left:;
text-align: center;
font-family: Futura;
background-color: #efefef;
font-size: 0.9em;
text-align: center;
text-decoration: none;
border-bottom: 2px solid #bdcfd6;
}
#sidemenu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#sidemenu a {
color: #4C4A4A;
display:block;
text-decoration:none;
font-family: Calibri, 'PT Sans', sans-serif;
}
#sidemenu a:hover {
background-color: #d9d9d9;
}
#sidemenu a.active {
background-color: #bdcfd6;
}
#sidemenu a:hover:not(.active) {
background-color: #bdcfd6;
}
#sidemenu h2 {
font-size: 20px;
text-align: left;
margin-left: 20px;
text-decoration: underline;
}
.line-vertical {
content: '';
width: 0;
height: 1905px;
position: absolute;
border: 1px solid #C4D4DA;
left: 170px;
}
Die Werte, wie das Sidemenu verschoben wird habe ich.
Ich brauche nur eine Funktion, die per Klick auf das Bild mit den drei Balken das Sidemenu so einklappen lässt.
Vielen Dank im Voraus!