zeigen Sidebar von Hover auf Schaltfläche klicken

Question

So habe ich die Sidebar versteckt, die angezeigt wird, wenn die Maus auf Hover es.

dies HTML-Code:

<div id="mySidenav" class="sidenav"> 
    <img class="logo1" src="../img/logo1.png"><br><br> 
    <a href="#">Home</a> 
    <a href="#">About</a> 
    <a href="#">Contact</a> 
</div> 

und der CSS-Code:

.sidenav { 
    height: 100%; 
    width: 100px; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #111; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.8s; 
} 

.sidenav:hover{ 
    width: 250px; 
} 

meine Frage ist, wie ich die Hover ändern sich die Sidebar werden Schaltfläche klicken zu zeigen. Es wird für die mobile Version verwendet. Wenn das Web in einem kleinen Gerät geöffnet ist, wird die Breite der Seitenleiste automatisch auf Null gesetzt und es erscheint eine Menüschaltfläche. Das Beispiel ist wie in diesem Link: http://bootsnipp.com/snippets/featured/sidebar-responsive aber meins ist verwenden Sie Hover zuerst und ich nicht jquery. es ist möglich? Danke

Answer 1

Sie können dies mit CSS nur erreichen, indem Sie :target statt :hover verwenden.

.sidenav:target { 
    width: 250px; 
} 

Jetzt benötigen Sie nur einen Ankerlink, um den Fokus auf das Zielelement zu setzen.

<a href="#mySidenav">Click</a> 

Nachteil ist, dass, weil Sie Ihre Links auch leer Anker-Links (die #) enthalten, wird die Sidebar Fokus verlieren, wenn sie angeklickt werden und wird Größe nach unten zu seiner ursprünglichen Breite ist.

Hier ist ein Beispiel basierend auf Ihrem Code.
https://jsfiddle.net/PaulvdDool/rkxeyf1g/

Answer 2

Dieses css:

.sidenav a{ float:left; width:100%;} 
.mobiletoggle img{ width:25px; height:25px; float:right;} 
.mobiletoggle{ float:right; width:50px; cursor:pointer;} 
@media screen and (min-width:768px){.mobiletoggle{ display:none;}} 
@media screen and (max-width:767px){.sidenav{ width:0px; }.sidenav.open{ width:100px; }} 

Fügen Sie diese js:

$(document).ready(function() { 


$('.mobiletoggle').on("click", function(e) { 
$('.sidenav').toggleClass("open"); 

});

}); 

Fügen Sie diesen HTML mit ur-Code

<div class="mobiletoggle"><img src="../favicon.ico"></div> 

Es läuft wie wie Sie die ref gegeben. Arbeite einfach daran, lass mich die Kommentare wissen.