圖片導航欄

Question

我想借助html css製作一個側面導航菜單欄。問題是我想要點擊位於頁面左上角的小圖片後打開菜單項。 （該圖片是我的網頁標誌。）

誰能告訴我如何製作它，以便當點擊左上角的小徽標時，菜單欄會在其下方滑動並在其中包含菜單項？

Answer 1

<a id="simple-menu" href="#sidr"><img src="image.gif" alt="image" 
style="border:none;" /></a> 

<div id="sidr"> 
<div class="logo"> 
    <img src="https://placehold.it/300x100" alt=""> 

</div> 
<ul> 
<li><a href="#">List 1</a></li> 
<li class="active"><a href="#">List 2</a></li> 
<li><a href="#">List 3</a></li> 

和jQuery代碼：

$(document).ready(function() { 
    $('#simple-menu').sidr(); 
}); 

Answer 2

如果你不介意使用jQuery插件看看sidr，它使用起來非常簡單。

<a id="simple-menu" href="#sidr">Toggle menu</a> 
<div id="sidr"> 
    <div class="logo"> 
     <img src="https://placehold.it/300x100" alt="">   
    </div> 
    <ul> 
    <li><a href="#">List 1</a></li> 
    <li class="active"><a href="#">List 2</a></li> 
    <li><a href="#">List 3</a></li> 
    </ul> 
</div> 

$(document).ready(function() { 
    $('#simple-menu').sidr(); 
}); 

Live Demo