javascript - 图片导航栏

Question

我想借助 html css 制作一个侧面导航菜单栏。问题是我希望在单击位于页面左上角的小图像后打开菜单项。 (图片是我的网页标志。)

谁能告诉我如何做到当单击左上角的小 Logo 时，菜单栏会在其下方滑动并在其中包含菜单项？

Answer 1

如果您不介意使用 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