show up sidebar from hover to button click

Question

So, I have hidden sidebar that will show up when mouse on hover it.

this is 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>

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

my question is, how do I change the hover to become click button to show up the sidebar. It will be used for mobile version, so when the web is open in small device it will automatically change the sidebar width to zero and appear a 'menu button'. the example is like in this link: http://bootsnipp.com/snippets/featured/sidebar-responsive but mine is use hover first and I dont used jquery. it is possible? thanks

Answer 1

You can achieve this with CSS only by using :target instead of :hover .

.sidenav:target {
    width: 250px;
}

Now you only need an anchor link to set focus on the targeted element.

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

Downside is that because your links also contain empty anchor links (the # ), the sidebar will loose focus when they are clicked and will size down to it's original width.

Here's an example based on your code.
https://jsfiddle.net/PaulvdDool/rkxeyf1g/

Answer 2

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

Add this js:

$(document).ready(function() {


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

});

});

Add this html with ur code

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

It is running as like you given the ref. Just work to it let me know the comments.