Beiträge von Timowo

Timowo

Alles klar, dankeschön!

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?

Timowo

Zitat von Timowo

Leider habe ich kaum Ahnung von JS und jQuery.

Habe ich es nicht schon eingebunden?

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

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?

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?

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.

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!

Beiträge von Timowo

Sidemenu per Klick öffnen/schließen

Sidemenu per Klick öffnen/schließen

Sidemenu per Klick öffnen/schließen

Sidemenu per Klick öffnen/schließen

Sidemenu per Klick öffnen/schließen

Sidemenu per Klick öffnen/schließen

Sidemenu per Klick öffnen/schließen

Sidemenu per Klick öffnen/schließen