CSS菜单不适用于手机或平板电脑

我创建了这里找到的plunkr：http：//plnkr.co/edit/gqtfoq4x2onnnn1bfrmi9?p=peview

此菜单在台式机/笔记本电脑上按预期工作。但是它看起来不像桌面上那样。

我想CSS是正确的，但是视图设置有问题？

html：

<body ng-controller="MainCtrl" ng-style="{true: {overflow: 'hidden'}, false: {}}[toggleMenu]">
  <div class="header compact" role="banner">
    <div class="menu" ng-class="{true: 'active', false: ' '}[toggleMenu]" ng-style="{true: {width: menuWidth}, false: {}}[toggleMenu]">
      <h2 ng-click="toggleMenu = true">Menu</h2>
      <div class="nav" ng-style="{ 'width' : winWidth, 'height' : winHeight }">
        <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" ng-click="toggleMenu = false">Close</button>
    </div>
  </div>
</body>

您没有使用CSS中的任何供应商前缀。甚至iOS 8都要求它们在场。因此，除了transform外，还可以-webkit-transform。

请参阅http://caniuse.com/#search=transform

btw：不错的菜单。

相关内容

最新更新

热门标签：