Question

我正在为客户构建响应式导航菜单。除了我在移动设备上遇到的问题，其中大部分工作都是有效的，其中菜单列表从页面中被切断。

这个想法是链接属于内联列表，随着视口变小，它们被隐藏，并显示一个菜单按钮。点击菜单按钮将在其下方显示常规（垂直）列表，方法是添加类＆＃34;打开＆＃34;。

以下是一些代码：

＆＃13;

/* Incomplete code, but basically fixes the header to the top of the page */
if(window.orientation === '0') {
  if(!header.hasClass('scrolling')) {
    header.addClass('scrolling scroll-fixed');
  }
} else if(window.orientation === '90' || window.orientation === '-90') {
  if($(window).scrollTop() > 0) {
    header.removeClass('scroll-fixed');
  } else {
    header.removeClass('scrolling scroll-fixed');
  }
}

＆＃13;

/* This is how it will display when toggled */
ul#navigation-links.open {
  display:  block;
  padding:  0 1em;

  background-color: $white;
  box-shadow:       1px 1px 4px #919191;

  list-style-type:  none;
  text-transform:   uppercase;
  font-size:        10pt;

  border:                     1px solid #e5e5e5;
  border-bottom-left-radius:  5px;
  border-bottom-right-radius: 5px;

  li {
    @include headline-stack;

    margin: 0;

    display: block;

    width: 100%;

    a, a:visited {
      margin:  0;
      padding: 0;
      color: $cobalt;
      text-shadow: 2px 1px 3px #f1f1f1;
    }

    a:hover {
      text-decoration: none;
      color: $cobalt;
      text-shadow: 2px 2px 4px #f1f1f1;
    }
  }
}

＆＃13;

<nav>
  <a role="button" class="toggle-navigation-links">
    <span>
      Menu &nbsp; <i class="fa fa-bars fa-inverse"></i>
    </span>
  </a>

  <ul id="navigation-links">
    <li><a href="/progress/index">Home</a></li>
    <li><a href="/progress/about-us">About Us</a></li>
    <li><a href="/progress/team">Our Team</a></li>
    <li><a href="/progress/services">Services</a></li>
    <li><a href="/progress/listings">Listings</a></li>
    <li><a href="/progress/community">Community Links</a></li>
    <li><a href="/progress/property">Retail</a></li>
    <li><a href="/progress/contact">Contact Us</a></li>
  </ul>
</nav>

＆＃13;

我不确定这是否足够，但如果有人就如何保持当前功能提出建议，但解决了这个问题，那就太棒了。

我尝试设置一个固定的高度并使其可滚动，但我的项目经理想要避免这种情况，因此这不是我可以使用的解决方案。

下拉菜单在某些分辨率下被切断

0 个答案: