jQuery.mmenu 三级项目的垂直下拉菜单答案

【问题标题】：jQuery.mmenu vertical dropdowns for 3rd level itemsjQuery.mmenu 三级项目的垂直下拉菜单
【发布时间】：2017-02-01 08:35:58
【问题描述】：

将 3 级导航项从水平（滑动）更改为在单击的菜单项正下方垂直打开的最佳方法是什么？

移动菜单 HTML 结构：

<div id="mobile-menu">
    <ul>
        <li><span>Telefoni &amp; naprave</span>
            <ul>
                <li><span>Telefoni</span>
                    <ul>
                        <li><a href="#">NOVO:iPhone 7</a></li>
                        <li><a href="#">Android telefoni</a></li>
                        <li><a href="#">Windows telefoni</a></li>
                        <li><a href="#">LTE telefoni</a></li>
                        <li><a href="#">iPhone</a></li>
                        <li><a href="#">Sony Xperia X</a></li>
                        <li><a href="#">Samsung Galaxy S7</a></li>
                        <li><a href="#">ORTO DIL</a></li>
                    </ul>
                </li>
                <li><span>Naprave za internet</span>
                    <ul>
                        <li><a href="#">Wi-Fi naprave</a></li>
                        <li><a href="#">Naprave za domači internet</a></li>
                    </ul>
                </li>
                <li><span>Tablični računalniki</span>
                    <ul>
                        <li><a href="#">LTE tablični računalniki</a></li>
                        <li><a href="#">iPad Air 16GB</a></li>
                        <li><a href="#">Alcatel One Touch POP 10</a></li>
                    </ul>
                </li>
                <li><span>Dodatki za telefone</span>
                    <ul>
                        <li><a href="#">Bluetooth slušalke</a></li>
                        <li><a href="#">Ovitki, etuiji, zaščita</a></li>
                        <li><a href="#">Avto oprema</a></li>
                        <li><a href="#">Baterije in polnilci</a></li>
                        <li><a href="#">Spominske kartice</a></li>
                        <li><a href="#">Zvočniki in ostali dodatki</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Omrežje</a>
                </li>
            </ul>
        </li>
        <li><span>Paketi &amp; storitve</span>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">The team</a></li>
                <li><a href="#">Our address</a></li>
            </ul>
        </li>
        <li><span>Internet &amp; omrežje</span>
            <ul>
                <li><span>Mobilni internet za računalnik in tablico</span>
                    <ul>
                        <li><a href="#">Napravo že imam</a></li>
                        <li><a href="#">Kupiti želim novo napravo</a></li>
                        <li><a href="#">Paket 2. SIM</a></li>
                    </ul>
                </li>
                <li><span>Mobilni internet za telefon</span>
                    <ul>
                        <li><a href="#">Z naročnino</a></li>
                        <li><a href="#">Brez naročnino</a></li>
                    </ul>
                </li>
                <li><span>Domači internet</span></li>
                <li><span>Vikend internet</span></li>
                <li><span>Neskončni internet</span></li>
                <li><span>Predplačniški SIMPLnet</span></li>
                <li><span>Akcije in uporabne informacije</span></li>
                <li><span>Omrežje</span></li>
            </ul>
        </li>
        <li><span>Pomoč &amp; informacije</span></li>
        <li><span>Moj A1 (Neprijavljen)</span></li>
    </ul>
</div>

当前的移动菜单行为：

【问题讨论】：

标签： jquery html css mmenu

【解决方案1】：

最好的解决方案是简单地将一个类 Vertical 添加到要为其显示下拉菜单而不是滑动菜单的父 ul。

应该在下面展开的子菜单（嵌套的 UL）上的类名他们的父母，而不是从右边滑入。

参考http://mmenu.frebsite.nl/documentation/options/configuration.html

【讨论】：