Question

我希望能够在移动设备上将简单的无序列表转换为漂亮的菜单：

       <ul class="jumpToList list-inline">
            <li><a href="#buttons">Buttons</a></li>
            <li><a href="#select">Select</a></li>
            <li><a href="#input">Input</a></li>
            <li><a href="#checkradio">Checkboxes &amp; Radios</a></li>
            <li><a href="#switches">Switches</a></li>
        </ul>

因此，当我在手机上时，上面会变成一个带有3个小节的简单菜单，然后折叠链接。

类似于Bootstrap导航菜单的工作方式，但它并不与此冲突。

理想情况下，我想使用Bootstrap内置的东西，这是我所追求的好例子：

http://ux.mailchimp.com/patterns/forms

如果缩小浏览器，您会看到该列表变为移动设备上的菜单。

由于

Answer 1

对HTML，media-queries和Javascript的一些简单修改应该允许您复制此行为。

我建议您首先创建媒体查询，以根据设备宽度更改应用的样式。

CSS - 移动优先

.list-inline {
  display: none;
  visibility: hidden;
}

.list-inline-active {
  display: block;
  visibility: visible;
}

.list-inline li {
  display: block;
}

@media (min-width: 600px) {
  .list-toggle {
    display: none;
  }

  .list-inline {
    display: block;
    visibility: visible;
  }    

  .list-inline li {
    display: inline-block;
  }
}

HTML - 添加切换按钮/图标

<button class="list-toggle">Show list</button>

<强>使用Javascript / jQuery的

$('.list-toggle').click(function(){
  $('.list-inline').toggleClass('list-inline-active');
});

此方法只使用按钮在无序列表元素上切换类。切换类包含使列表在移动设备上可见的样式。

我创建了一个简单的JSFiddle example来展示这一点。

值得注意的是，如果不使用Javascript，这种行为几乎完全可以复制。它将涉及使用复选框和'：checked'伪选择器。但Bootstrap 3确实使用Javascript。

我希望这会有所帮助。

Bootstrap响应式转弯列表进入移动菜单

1 个答案: