Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 15

Thema: Sidemenu per Klick öffnen/schließen

  1. #1
    HTML Newbie
    Registriert seit
    21.01.2016
    Beiträge
    8
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Frage Sidemenu per Klick öffnen/schließen

    Hallo,

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

    Es sieht so aus:

    Bildschirmfoto 2016-01-21 um 16.59.09.jpg
    Wenn man nun auf die drei Balken klickt soll es geschlossen werden, sodass es so aussieht:
    Bildschirmfoto 2016-01-21 um 17.09.21.jpg
    Leider habe ich kaum Ahnung von JS und jQuery.

    HTML:
    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!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Timowo (21.01.2016 um 18:48 Uhr) Grund: HTML Code war durcheinander

  2. #2
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.234
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Sidemenu per Klick öffnen/schließen

    Hallo,


    1. Pack bitte mal den Inline-Style mit in die CSS, so erstellt man heute keine HTML-Seiten mehr.
    2. Lege mini- und maximierte Pixelposition des Sidemenu fest.
    3. Gib dem Image eine eindeutige Kennung, bspw. id="toggle-slidemenu".
    4. 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-Code:
    <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>
    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.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    21.01.2016
    Beiträge
    8
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Sidemenu per Klick öffnen/schließen

    Vielen Dank erstmal für die Antwort!
    Habe soweit alles erledigt, nur was ist mit
    Lege mini- und maximierte Pixelposition des Sidemenu fest.
    gemeint?
    Scheint ja relativ wichtig zu sein, da es, ohne dies, nicht funktioniert.

  4. #4
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.234
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Sidemenu per Klick öffnen/schließen

    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

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    21.01.2016
    Beiträge
    8
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Sidemenu per Klick öffnen/schließen

    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?

  6. #6
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.234
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Sidemenu per Klick öffnen/schließen

    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.

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    21.01.2016
    Beiträge
    8
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Sidemenu per Klick öffnen/schließen

    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?

  8. #8
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.234
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Sidemenu per Klick öffnen/schließen

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

  9. #9
    HTML Newbie
    Themenstarter

    Registriert seit
    21.01.2016
    Beiträge
    8
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Sidemenu per Klick öffnen/schließen

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

    HTML:
    HTML-Code:
      <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>
    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;
    }

  10. #10
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.234
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Sidemenu per Klick öffnen/schließen

    Hast Du auch Punkt 4 aus #2 umgesetzt?

Ähnliche Themen

  1. VBS: CD Laufwerk öffnen/schließen
    Von Ericfischer im Forum Tutorials, Workshops und Anleitungen
    Antworten: 3
    Letzter Beitrag: 01.06.2010, 14:02
  2. Slidemenu bei klick schließen
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 28.02.2010, 13:42
  3. Onmouseover/out Seite in iframe öffnen / schließen
    Von Starfighter im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 01.03.2009, 20:14
  4. [JS] Zuvor geöffnetes Fenster bei Klick schließen
    Von Dark_Dog im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 11.03.2008, 01:46
  5. pop-ups mit klick wieder schließen
    Von Dennis im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 18.10.2005, 10:14

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •