rakuishi/menu.html

## menu.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">

  <header>
    <div class="menu"><img src="images/menu.png" width="20" height="20"></div>
    <div class="search"><img src="images/search.png" width="20" height="20"></div>
  </header>

  <div class="js-menu"></div>
  <div class="js-search"></div>

</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
  var menu = $("div.js-menu");
  var search = $("div.js-search");
  menu.hide();
  search.hide();
  $("div.menu").on("click", {a: menu, b: search}, slide);
  $("div.search").on("click", {a: search, b: menu}, slide);
  function slide(event) {
    if (event.data.a.css("display") === "none") {
      event.data.a.slideDown(250);
      event.data.b.slideUp(250);
    } else {
      event.data.a.slideUp(250);
    }
  }
});
</script>

</body>
</html>