如何在不點擊切換按鈕的情況下關閉滑出抽屜（純CSS/html版本）

我希望能夠通過滑出菜單關閉而無需單擊切換按鈕。我已經閱讀了很多類似的其他帖子，但是我還沒有能夠實現任何可行的方法。如何在不點擊切換按鈕的情況下關閉滑出抽屜（純CSS/html版本）

我附上了目前使用的html和css。感謝您的任何幫助！

html { 
 
    background: url(background.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
#menu { 
 
    display:block; 
 
    background-color:#798d64; 
 
    width:256px; 
 
    min-height:100%; 
 
    top:0; 
 
    z-index:9999; 
 
    position:fixed; 
 
    -webkit-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.75); 
 
    -moz-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.75); 
 
    box-shadow:   5px 0px 5px 0px rgba(50, 50, 50, 0.75); 
 
} 
 

 
#menu .toggle { 
 
    top:40px; 
 
    left:256px; 
 
    padding:10px; 
 
    position:absolute; 
 
    background-color:#798d64; 
 
    color:#fff; 
 
    -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); 
 
    -moz-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); 
 
    box-shadow:   4px 4px 5px 0px rgba(50, 50, 50, 0.75); 
 
} 
 

 
#toggle { 
 
    display:none; 
 
} 
 
/*pushing menu off canvas*/ 
 
#menu { 
 
    left:-256px; /*must be same as width*/ 
 
    -webkit-transition:left 1s; 
 
    -moz-transition:left 1s; 
 
    -o-transition:left 1s; 
 
    transition:left 1s; 
 
} 
 
#toggle:checked + #menu { 
 
    left:0; 
 
    -webkit-transition:left 1s; 
 
    -moz-transition:left 1s; 
 
    -o-transition:left 1s; 
 
    transition:left 1s; 
 
} 
 
/*menu content*/ 
 
#menu span { 
 
    display:block; 
 
    font-size:22px; 
 
    margin:20px 10px; 
 
    background-color:#798d64; 
 
    color:#fff; 
 
} 
 
#menu ul { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#menu ul li { 
 
    font-size:19px; 
 
    border-bottom:1px solid #fff; 
 
} 
 
#menu ul li:last-child { 
 
    border-bottom:none; 
 
} 
 
#menu ul li a { 
 
    display:block; 
 
    padding:10px; 
 
    text-decoration:none; 
 
    color:#fff; 
 
    background-color:#798d64; 
 
} 
 
#menu ul ul li { 
 
    background-color:none; 
 
} 
 
#menu ul li a:hover, 
 
#menu ul ul li a { 
 
    padding:10px 10px 10px 30px; 
 
} 
 
#menu ul ul li a:hover { 
 
    padding:10px 10px 10px 60px; 
 
} 
 
#menu ul li a, 
 
#menu ul li a:hover, 
 
#menu ul ul li a, 
 
#menu ul ul li a:hover { 
 
    -webkit-transition:padding 0.5s; 
 
    -moz-transition:padding 0.5s; 
 
    -o-transition:padding 0.5s; 
 
    transition:padding 0.5s; 
 
} 
 
/*hiding checkboxes, labels visible*/ 
 
input[id^="dropdown"], 
 
ul[class^="dropdown"] { 
 
    display:none; 
 
} 
 
input[id^="dropdown"]:checked + ul[class^="dropdown"] { 
 
    height:auto; 
 
    display:block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     
 
     <title>GLI Nav</title> 
 
     <link rel="stylesheet" href="glinav.css" type="text/css" /> 
 
     <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css" /> 
 
    </head>  
 
    <body> 
 
     <!-- Checkbox to show/hide the navigation menu --> 
 
     <input type="checkbox" name="menu" value="toggle" id="toggle"> 
 
     
 
     <!-- navigation menu container --> 
 
     <section id="menu"> 
 
     
 
      <!-- Lable for #showmenu to hide the menu/uncheck the checkbox --> 
 
      <label class="toggle" for="toggle"><i class="fa fa-2x fa-bars"></i></label> 
 
      
 
      <!-- Menu content --> 
 
      <nav class="menuContent"> 
 
       <span>Navigation Links</span> 
 
       <ul> 
 
        <li><a href="#" class="fa fa-home"> Home</a></li> 
 
        <li><label for="dropdown-1" class="dropdown-1"><a><i class="fa fa-picture-o"></i> Be Inspired<i style="float:right" class="fa fa-plus"></i></a></label> 
 
         <input type="checkbox" name="menu" id="dropdown-1" /> 
 
          <ul class="dropdown-1"> 
 
          <li><a href="#"> Bel Marin Keys</a></li> 
 
          <li><a href="#"> Belvedere<i style="float:right" class="fa fa-plus"></i></a></li> 
 
          <li><a href="#"> Piedmont</a></li> 
 
          <li><a href="#"> San Francisco</a></li> 
 
          <li><a href="#"> San Rafael<i style="float:right" class="fa fa-plus"></i></a></li> 
 
          <li><a href="#"> Tiburon</a></li> 
 
          <li><a href="#"> Windsor</a></li> 
 
          </ul> 
 
        <li><a href="#" class="fa fa-tree"> Services</a></li> 
 
        <li><a href="#" class="fa fa-newspaper-o"> Advice & News</a></li> 
 
        <li><a href="#" class="fa fa-users"> About</a></li> 
 
        <li><a href="#" class="fa fa-envelope-o"> Contact</a></li> 
 
       </ul> 
 
      </nav> 
 
    
 
     </section> <!-- /#menu --> 
 
    </body> 
 
</html>

來源

2015-08-26 mmurphy

更改此：

#toggle:checked + #menu { 
    left:0; 
    -webkit-transition:left 1s; 
    -moz-transition:left 1s; 
    -o-transition:left 1s; 
    transition:left 1s; 
}

這樣：

#toggle + #menu:hover { 
    left:0; 
    -webkit-transition:left 1s; 
    -moz-transition:left 1s; 
    -o-transition:left 1s; 
    transition:left 1s; 
}

Here is the JSFiddle demo

它不需要點擊元素，只需將其懸停以使菜單顯示，並且在不自動懸停時CSS將完成隱藏:)

使用JQuery：

更改此：

#toggle:checked + #menu { 
    left:0; 
    -webkit-transition:left 1s; 
    -moz-transition:left 1s; 
    -o-transition:left 1s; 
    transition:left 1s; 
}

這樣：

#toggle + #menu { 
    -webkit-transition:left 1s; 
    -moz-transition:left 1s; 
    -o-transition:left 1s; 
    transition:left 1s; 
}

這是JQuery的部分：

$('html').click(function() { 
    $("#toggle + #menu").css("left", "-256px"); 
}); 
$('#toggle + #menu').click(function(event){ 
    $(this).css("left", "0"); 
    event.stopPropagation(); 
    return false; 
}); 

$("label > a").click(function(){ 
    $(this).parent().siblings("ul[class^='dropdown']").slideToggle(); 
});

Here is the JSFiddle demo with JQuery

來源

2015-08-26 06:31:57

我想用做出這樣的轉變的問題是，它不會被點擊移動友好？（因爲你不能懸停）我可能錯過了什麼？ – mmurphy

@mmurphy我同意。但是，在移動設備上，您如何期望頁面知道何時使用菜單並且需要再次關閉菜單，而無需再次點擊？ :)（可以很容易地用js/jquery修復，而不是直接用純html + css：P） –

我覺得jquery對於這個是必要的，並且很樂意將它添加進來 - 這就是我被抓到的地方 - 我的jquery的寫作技巧還是很差;） – mmurphy

如何在不點擊切換按鈕的情況下關閉滑出抽屜（純CSS/html版本）

回答

相關問題