Sidemenu per Klick öffnen/schließen

Timowo

Hallo,

ich möchte mein Sidemenu per Klick öffnen und schließen.

Es sieht so aus:

Wenn man nun auf die drei Balken klickt soll es geschlossen werden, sodass es so aussieht:

Leider habe ich kaum Ahnung von JS und jQuery.

HTML:

HTML

<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;
}

Alles anzeigen

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!

Arne Drews

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:

HTML

<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.

Timowo

Vielen Dank erstmal für die Antwort!
Habe soweit alles erledigt, nur was ist mit

Zitat

Lege mini- und maximierte Pixelposition des Sidemenu fest.

gemeint?
Scheint ja relativ wichtig zu sein, da es, ohne dies, nicht funktioniert.

Arne Drews

Naja, ich gehe bei meinem Beispiel davon aus, daß Du einfach den DIV um eine bestimmte Anzahl Pixel ( 120 ) aus dem Bildschirm rausschiebst.
Da ich nicht weiß, wie groß genau Dein Burger-Menu-Image ist und wie Du Dir die Abstände vorstellst, habe ich mich halt auf 120px festgelegt.
Ob das passt, musst Du testen und evtl. anpassen

Timowo

Ja, in meinem Beispiel habe ich bei #sidemenu einfach left: -137px rausgeschoben. Aber wann muss ich das wo so einstellen? Muss ich dafür ein zweites #sidemenu machen, oder wo muss ich das ändern?

Arne Drews

Nein mit Festlegen meine ich das, was Du getan hast. Du hast ermittelt und festgelegt, daß er den DIV um 137px aus dem Bild raus schieben muß.
Man kann das natürlich über Variablen verwalten, ist aber imho nur für diesen zweck nicht zwingend notwendig.

Timowo

Ok, also muss ich da EIGENTLICH nichts mehr ändern...
So sieht mein HTML-Code jetzt aus:

Code

<div class="line-vertical"></div>  <div id="sidemenu">
  <ul>
        <li><h2>HTML<img id="toggle-sidemenu" src="Grafiken/Hide-Show-Icon.png" onClick=" "/><h2></li>
          <li><a class="active" href="HTML.html">HTML – Home</a></li>
          <li><a href="Basics.html">Basics</a></li>
        </ul>
        </div>

Aber was war jetzt eigentlich der Name von der "onClick"-Funktion?

Arne Drews

Das Attribut brauchst Du nicht mehr, das regelt der Event-Handler .click().

Timowo

Ach so, ok. Aber trotzdem funktioniert es nicht. Habe ich vielleicht irgendwo einen Fehler gemacht oder was vergessen?

HTML:

HTML

<div id="sidemenu">  <ul>        <li><h2>HTML<img id="toggle-sidemenu" src="Grafiken/Hide-Show-Icon.png"/><h2></li>          <li><a class="active" href="HTML.html">HTML – Home</a></li>          <li><a href="Basics.html">Basics</a></li>        </ul>
</div>

JS:

Code

<script type="text/javascript">


$( document ).ready( function() {




    $( 'img#toggle-sidemenu' ).click( function() {
        var _oSideMenu = $( 'div.sidemenu' );
        _slideToPos = ( _oSideMenu.Width() == 0 )? -137: 0;




        _oSideMenu.stop().animate( { left: _SlideToPos }, 500, function() {} );




    });




});




</script>

Alles anzeigen

CSS:

Code

#sidemenu {
width: 170px;
max-width: 170px;
height: 2097px;
position: absolute;
left:;
text-align: center;
font-family: Calibri;
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;
}
#toggle-sidemenu {
display: inline-block;
margin-top: 15px; 
padding-left: 70px;
float: right 0;
width: 20px;
height: 15px;
}
#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: 2097px;
  position: absolute;
  border: 1px solid #C4D4DA;
  left: 170px;
}

Alles anzeigen

Arne Drews

Hast Du auch Punkt 4 aus #2 umgesetzt?

Timowo

Zitat von Timowo

Leider habe ich kaum Ahnung von JS und jQuery.

Habe ich es nicht schon eingebunden?

Arne Drews

Das weiß ich nicht, in den von Dir geposteten Abschnitten nicht!
Aber ich habe mich auch an zwei drei Stellen vertan, deshalb sagte ich ja, daß es aus der Hüfte kam.

Damit Du meine Fehler nicht ausbügeln musst, hier mal im Ganzen, wie es funktioniert:

HTML

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" media="screen" href="./test.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script><script type="text/javascript">


$( document ).ready( function() {


    $( 'img#toggle-sidemenu' ).click( function() {


        _oSideMenu = $( 'div#sidemenu' );
        _slideToPos = ( _oSideMenu.position().left >= 0 )? -137: 0;


        _oSideMenu.stop().animate( { left: _slideToPos + 'px' }, 500, function() {} );


    });


});


</script>
</head>


<body>
<div id="sidemenu">
    <ul>
        <li><h2>HTML<img id="toggle-sidemenu" src="Grafiken/Hide-Show-Icon.png"/><h2></li>
        <li><a class="active" href="HTML.html">HTML – Home</a></li>
        <li><a href="Basics.html">Basics</a></li>
    </ul>
</div>
</body>
</html>

Alles anzeigen

Timowo

Tut mir leid, dass ich erst jetzt antworte. Vielen, vielen Dank! Funktioniert super! Nur eine Frage zum Skript: Gehören "_o..." etc zu jQery oder warum hast du das so benannt?

Arne Drews

Hallo,

Nein, Du kannst sie auch anders benennen.
Das ist nur die Art, wie ich Variablenbezeichner benenne, in CamelCase beginnend mit einem Kürzel des Datentyps.
So weiß ich immer, was für ein Datentyp ich dort zu erwarten habe. "o" steht für Object.

Zusätzlich setze ich bei eigenen Variablen in JS noch ein Underscore davor, damit ich die im Fliesstext schneller von Funktions-/Methoden usw. unterscheiden kann.

Wie gesagt, Du kannst es anders machen.

Timowo

Alles klar, dankeschön!

Tags