material design lite 的菜单分隔符

Question

我正在使用 material design lite 编写菜单，我需要在该菜单中的两类项目之间使用分隔符。

我在这里重新创建了一个更简单的示例： http://codepen.io/anon/pen/jbJXQP

在这个例子中，我想用一些东西来分隔两个不同的类别。在示例中 "Trip planner" 和 "Layers" 是一些与地图相关的小部件，而 "Help" 和 "Send feedback" 是更多信息相关的。

具体在这里：

<li class="mdl-menu__item" 
  <i class="material-icons" >layers</i>  
     Layers</li>
<li class="mdl-menu__item" 
    onClick="javascript:webapp.infoWidgets['otp-infoWidget-0'].show();" >
    Help</li>

我对网络开发还很陌生（几个月），所以我真的不知道什么是好的解决方案。对于分隔符，它需要引人注目但不会对用户造成干扰。我在想中间只有一条直线黑线，但我不知道这是否可能。

Answer 1

你可以像你说的那样单独设置一行。 <hr> 标签定义了 HTML 页面中的主题中断（例如主题转换）。试试这个：

HTML

<li class="mdl-menu__item"> 
  <i class="material-icons" >layers</i>  
     Layers</li>
<li><hr></li>
<li class="mdl-menu__item" 
    onClick="javascript:webapp.infoWidgets['otp-infoWidget-0'].show();" >
    Help</li>

DEMO HERE

注意：您可以通过 CSS <hr> - https://css-tricks.com/examples/hrs/

设置样式

Answer 2

一个额外的 MDL class（我不熟悉 MDL，但确定必须有一个，如果没有，就创建一个）用于第一个每个特殊类型的菜单项，然后可以有一个顶部边界将是最合乎逻辑的。

因此，我们假设每个信息列表项的第一个 class 为 info：

那我们可以做。

.mdl-menu__item.info {
  border-top:1px solid lightgrey;
}

Codepen Demo

选择要应用边框的列表项有多种方法。

material design lite 的菜单分隔符

Menu separator with material design lite

html

css

menu

material-design-lite