如何在 MaterializeCSS 下拉菜单中创建子菜单?

Posted

技术标签:

【中文标题】如何在 MaterializeCSS 下拉菜单中创建子菜单?【英文标题】:How can I make the submenu in the MaterializeCSS dropdown? 【发布时间】:2016-06-29 02:27:28 【问题描述】:

我正在尝试使用 MaterializeCSS 框架在下拉菜单中创建一个子菜单下拉菜单。我尝试了以下代码,但没有成功。

<!-- this the main dropdown -->
<ul id="MainDropDown" class="dropdown-content">
    <li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrain data-gutter="30" data-alignment="right" data-activates="drop1">Dropdown1<span class="right caret">&#9658;</span></a></li>
    <li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrain data-gutter="30" data-alignment="right" data-activates="drop2">Dropdown2<span class="right caret">&#9658;</span></a></li>
    <li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrain data-gutter="30" data-alignment="right" data-activates="drop3">Dropdown3<span class="right scaret">&#9658;</span></a></li>   
</ul>
<ul id="drop1" class="dropdown-content">
    <li><a href="#">Create</a></li>
</ul>
<ul id="drop2" class="dropdown-content">
    <li><a href="#">Create</a></li>
    <li><a href="#">Update</a></li>
</ul>
<ul id="drop3" class="dropdown-content">
    <li><a href="#">Create</a></li>
</ul>

【问题讨论】:

如果有人关注这个我得到这个参考***.com/questions/32738599/… 现在可以用了吗? 没有,没有得到任何参考,所以我继续调查 【参考方案1】:

我在这里尝试过,但我在下拉菜单中的同一行上对齐,然后它成功了:

.dropdown-content 
   overflow-y: visible;


.dropdown-content .dropdown-content 
   margin-left: 100%;

【讨论】:

【参考方案2】:

我自己也有同样的问题。 原来它就像嵌套另一个下拉链接一样简单, 设置适当的排水沟,并确保溢出 dropdown-content 设置为 visible

这是Nested dropdowns in materialize中链接的修改后的jsfiddle的链接

https://jsfiddle.net/fb0c6b5b/

$('.dropdown-button2').dropdown(
      inDuration: 300,
      outDuration: 225,
      constrain_width: false, // Does not change width of dropdown to that of the activator
      hover: true, // Activate on hover
      gutter: ($('.dropdown-content').width()*3)/2.5 + 5, // Spacing from edge
      belowOrigin: false, // Displays dropdown below the button
      alignment: 'left' // Displays dropdown with edge aligned to the left of button
    
  );
.dropdown-content
    overflow: visible !important;
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
    <li><a class='dropdown-button2 d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

【讨论】:

以上是关于如何在 MaterializeCSS 下拉菜单中创建子菜单?的主要内容,如果未能解决你的问题,请参考以下文章

带有 Ionic 的 MaterializeCSS 下拉菜单不起作用

从angularjs初始化materializecss下拉列表时出错

如何始终在触发器下方显示下拉菜单

实现下拉列表(以编程方式打开下拉列表)

如何在 React-native 中创建下拉菜单?

如何在基于 sysdig 指标标签的 grafana 仪表板中创建下拉菜单