jQuery.mmenu 第 3 级项目的垂直下拉菜单

Question

将第 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>

当前的移动菜单行为：

Answer 1

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

The classname on a submenu (a nested UL) that should expand below their parent instead of slide in from the right.

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

jQuery.mmenu 第 3 级项目的垂直下拉菜单

jQuery.mmenu vertical dropdowns for 3rd level items

jquery

html

css

mmenu