Hallo,
- Pack bitte mal den Inline-Style mit in die CSS, so erstellt man heute keine HTML-Seiten mehr.
- Lege mini- und maximierte Pixelposition des Sidemenu fest.
- Gib dem Image eine eindeutige Kennung, bspw. id="toggle-slidemenu".
- Binde am besten jQuery ein, da Du eh schon davon gesprochen hast.
Jetzt hast Du einigermaßen Vorbereitungen getroffen, um Dein Vorhaben mit Glück zu segnen.
Mit jQuery definierst Du im HEAD des HTML-Dokuments einfach einen Click-EventHandler:
<script type="text/javascript">
$( document ).ready( function() {
$( 'img#toggle-sidebar' ).click( function() {
var _oSideMenu = $( 'div.sidemenu' );
_slideToPos = ( _oSideMenu.Width() == 0 )? -120: 0;
_oSideMenu.stop().animate( { left: _SlideToPos }, 500, function() {} );
});
});
</script>
Alles anzeigen
Ich habe für das kleine Beispiel angenommen, daß der ausgeklappte Zustand des Menü am linken Bildschirmrand andockt und eingefahren etwa 50px stehen bleiben, daher die Werte 0 und -120.
Durch das position:absolute sollte das so in etwas gehen. Es kann aber durchaus sein, daß Du die einzelnen jQuery-Funktionen nochmal selbst nachlesen musst, weil das hier nur aus der Hüfte geschossen war und lediglich eine Hilfestellung anstatt einer fertigen Lösung sein soll.