我已经将 Foundation Off-Canvas Menu 实现为 Multilevel Menu。当我使用文档中的原始代码示例时,我遇到了问题,即子菜单不起作用。它已显示但未格式化(未隐藏子级别),并且打开子菜单的单击事件也未触发。
对我来说,尽管我编译了整个基础框架,而不仅仅是特定的模块,但似乎有些部分没有编译。
有人知道我可以从哪里开始搜索吗?菜单的其他部分效果很好。
这是HTML代码:
<aside class="left-off-canvas-menu" aria-hidden="true">
<ul class="off-canvas-list">
<li><label>Navigationsmenü</label></li>
<li><a href="#"><i class="fa fa-shopping-cart"></i> Mein Warenkorb</a></li>
<li><a href="#"><i class="fa fa-arrow-right"></i> Zur Kasse</a></li>
<li><label>Mein Konto</label></li>
<li class="my-account">
<div class="avatar">
<img src="<?php echo "http://www.gravatar.com/avatar/" . md5( strtolower( trim( 'mail@mail.com' ) ) ) . "?s=100";?>" class="avatar" alt="Avatar" />
</div>
<div class="user">
<span class="title">John Doe</span>
<span class="email">email@email.com</span>
</div>
<div class="clearfix"></div>
<a href="#" class="mtm button primary tiny"><i class="fa fa-user"></i> Meine Daten ändern</a>
</li>
<li><a href="#"><i class="fa fa-home"></i> Adressbuch bearbeiten</a></li>
<li><a href="#"><i class="fa fa-truck"></i> Meine Bestellungen</a></li>
<li><a href="#"><i class="fa fa-lock"></i> Passwort ändern</a></li>
<li><a href="#"><i class="fa fa-envelope"></i> E-Mail Adresse ändern</a></li>
<li><a href="#"><i class="fa fa-power-off"></i> Ausloggen</a></li>
<li><label>Produktkategorien</label></li>
<li class="has-submenu"><a href="#">Aktionen</a>
<ul class="left-submenu">
<li class="back"><a href="#">Zurück</a></li>
<li><label>Level 1</label></li>
<li><a href="#">Sonderangebote der Woche</a></li>
<li><a href="#">Monatsaktionen</a></li>
<li><a href="#">Spezialaktionen</a>
<li><a href="#">Maximal sparen</a></li>
</ul>
</li>
<li><a href="#">Gutscheine</a></li>
<li class="has-submenu"><a href="#">Ernährung</a>
<ul class="left-submenu">
<li class="back"><a href="#">Zurück</a></li>
<li><label>Level 1</label></li>
<li><a href="#">Nahrungsergänzungsmittel</a></li>
<li><a href="#">Vitamine & Mineralstoffe</a></li>
<li><a href="#">Spezialnahrung</a>
<li><a href="#">Gesund abnehmen</a></li>
<li><a href="#">Sportlernahrung</a></li>
</ul>
</li>
</ul>
</aside>
这就是 SCSS 文件(app.scss):
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "settings";
@import "foundation";
谢谢,迈克尔