图像导航栏

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>

    and the jquery code:

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

Answer 2

如果您不介意使用jQuery插件，请看一下西德尔，它的使用非常简单。

<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();
});

现场演示