Question

我正在尝试复制此处的菜单：http://www.google.com/makani/（只能在移动设备或平板电脑设备上查看）。

我已经成功复制了静态菜单按钮，但我很难在点击时获取内容。

HTML：

<body>


<div class="header compact" role="banner">
    <div class="menu ">
      <h2> Menu </h2>
      <div class="nav" style="width: 536px; height: 615px;">
        <ul role="navigation" class="nav-main">
          <li class="active">
            <a href="../makani/" data-ga-event="Header,Navigate,Home">Home</a>
          </li>
          <li>
            <a href="../makani/challenge/" data-ga-event="Header,Navigate,The Challenge">The
              Challenge</a>
          </li>
        </ul>
        <ul role="contentinfo" class="nav-aux">
          <li>
            <a href="../makani/faq/" data-ga-event="Footer,Navigate,FAQ">FAQ</a>
          </li>
          <li>
            <a href="../makani/about/" data-ga-event="Footer,Navigate,About Us">About Us</a>
          </li>
        </ul>
      </div>
      <button type="button">Close</button>
    </div>
  </div>
</body>

CSS：

.menu {
    height: 100%;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    transform: skew(45deg);
    transform-origin: right top 0;
    transition: all 0.3s ease-in-out 0s;
    width: 90px;
    z-index: 20;
}

.menu h2 {
    opacity: 1;
    padding: 20px 10px 60px 50px;
    right: 0;
    z-index: 30;
}
.menu h2, .menu button {
    color: #fff;
    cursor: pointer;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out 0s;
}
.menu h2, .menu button, .nav {
    position: absolute;
    top: 0;
    transform: skew(-45deg);
    transform-origin: right top 0;
}

.nav {
    background: none repeat scroll 0 0 #0bb5fd;
    box-sizing: border-box;
    padding: 100px 20px 20px;
    right: 0;
    z-index: 20;
}

.menu h2, .menu button, .nav {
    position: absolute;
    top: 0;
    transform: skew(-45deg);
    transform-origin: right top 0;
}
.header, .nav, .hero, .section {
    transition: all 0.2s ease 0s;
}

.header {
    background-image: linear-gradient(to bottom, rgba(44, 44, 44, 0.2), rgba(39, 39, 39, 0));
    box-sizing: border-box;
    left: 0;
    padding: 20px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}
.header, .nav, .hero, .section {
    transition: all 0.2s ease 0s;
}

JS：

$(function() { 
  $( ".menu" ).click(function() {
    $(this).addClass("active");
  });
});

Plunker：http://plnkr.co/edit/2NrZtw5n5gvvMGf4Wi3m?p=preview

更新：

新的plunker：http://plnkr.co/edit/2NrZtw5n5gvvMGf4Wi3m?p=preview

很多功能都在那里，只是努力调整菜单项。

单击“展开折叠”菜单

0 个答案: