показать боковую панель от наведения до кнопки нажмите

Question

Итак, у меня есть скрытая боковая панель, которая появится, когда мышь наведет ее.

это HTML-код:

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

и код CSS:

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

мой вопрос, как я могу изменить парить стать нажмите кнопку, чтобы показать боковую панель. Он будет использоваться для мобильной версии, поэтому, когда сеть открыта на маленьком устройстве, она автоматически изменит ширину боковой панели до нуля и появится «кнопка меню». пример похож на эту ссылку: http://bootsnipp.com/snippets/featured/sidebar-responsive, но мой - сначала наведите курсор, и я не использовал jquery. возможно? спасибо

Answer 1

Вы можете добиться этого с помощью CSS только с помощью :target вместо :hover.

.sidenav:target { 
    width: 250px; 
} 

Теперь вам нужна только привязка для привязки к целевому элементу.

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

Даунсайд является то, что, потому что ваши ссылки также содержат пустые якорные ссылки (#), боковая панель будет терять фокус, когда они щелкают и размер будет вплоть до его оригинальной ширины.

Вот пример, основанный на вашем коде.
https://jsfiddle.net/PaulvdDool/rkxeyf1g/

Answer 2

Добавить 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; }} 

Добавить это Js:

$(document).ready(function() { 


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

});

}); 

Добавить этот HTML код с Уре

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

Он работает, как, как вы дали реф. Просто работайте над этим, дайте мне знать комментарии.