这种导航叫什么？

Question

我不知道这个问题是否离题，但无论如何我都会尝试，冒着被否决的风险。 :D

我找到了这段 Mega-site navigation 代码，我感兴趣的是当您单击顶部的 "Clothing" 时，您可以单击左侧的 "Beanies" 和导航菜单滚动。

那叫什么？我想查找有关如何操作的教程，以便我可以复制它。我想了解发生了什么。

Answer 1

他们只有一堆 ul，如果它有 children 那么它会切换到那个 child。

<ul class="cd-secondary-nav">
                <li class="go-back"><a href="#0">Menu</a></li>
                <li class="see-all"><a href="http://codyhouse.co/?p=409">All Clothing</a></li>
                <li class="has-children">
                    <a href="http://codyhouse.co/?p=409" class="">Accessories</a>

                    <ul class="is-hidden">
                        <li class="go-back"><a href="#0">Clothing</a></li>
                        <li class="see-all"><a href="http://codyhouse.co/?p=409">All Accessories</a></li>
                        <li class="has-children">
                            <a href="#0">Beanies</a>

                            <ul class="is-hidden">
                                <li class="go-back"><a href="#0">Accessories</a></li>
                                <li class="see-all"><a href="http://codyhouse.co/?p=409">All Benies</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Caps &amp; Hats</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Gifts</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Scarves &amp; Snoods</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#0">Caps &amp; Hats</a>

                            <ul class="is-hidden">
                                <li class="go-back"><a href="#0">Accessories</a></li>
                                <li class="see-all"><a href="http://codyhouse.co/?p=409">All Caps &amp; Hats</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Beanies</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Caps</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Hats</a></li>
                            </ul>
                        </li>
                        <li><a href="http://codyhouse.co/?p=409">Glasses</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Gloves</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Jewellery</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Scarves</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Wallets</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Watches</a></li>
                    </ul>
                </li>

                <li class="has-children">
                    <a href="http://codyhouse.co/?p=409">Bottoms</a>

                    <ul class="is-hidden">
                        <li class="go-back"><a href="#0">Clothing</a></li>
                        <li class="see-all"><a href="http://codyhouse.co/?p=409">All Bottoms</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Casual Trousers</a></li>
                        <li class="has-children">
                            <a href="#0">Jeans</a>

                            <ul class="is-hidden">
                                <li class="go-back"><a href="#0">Bottoms</a></li>
                                <li class="see-all"><a href="http://codyhouse.co/?p=409">All Jeans</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Ripped</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Skinny</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Slim</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Straight</a></li>
                            </ul>
                        </li>
                        <li><a href="#0">Leggings</a></li>
                        <li><a href="#0">Shorts</a></li>
                    </ul>
                </li>

                <li class="has-children">
                    <a href="http://codyhouse.co/?p=409">Jackets</a>

                    <ul class="is-hidden">
                        <li class="go-back"><a href="#0">Clothing</a></li>
                        <li class="see-all"><a href="http://codyhouse.co/?p=409">All Jackets</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Blazers</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Bomber jackets</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Denim Jackets</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Duffle Coats</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Leather Jackets</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Parkas</a></li>
                    </ul>
                </li>

                <li class="has-children">
                    <a href="http://codyhouse.co/?p=409">Tops</a>

                    <ul class="is-hidden">
                        <li class="go-back"><a href="#0">Clothing</a></li>
                        <li class="see-all"><a href="http://codyhouse.co/?p=409">All Tops</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Cardigans</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Coats</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Hoodies &amp; Sweatshirts</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Jumpers</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Polo Shirts</a></li>
                        <li><a href="http://codyhouse.co/?p=409">Shirts</a></li>
                        <li class="has-children">
                            <a href="#0">T-Shirts</a>

                            <ul class="is-hidden">
                                <li class="go-back"><a href="#0">Tops</a></li>
                                <li class="see-all"><a href="http://codyhouse.co/?p=409">All T-shirts</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Plain</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Print</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Striped</a></li>
                                <li><a href="http://codyhouse.co/?p=409">Long sleeved</a></li>
                            </ul>
                        </li>
                        <li><a href="http://codyhouse.co/?p=409">Vests</a></li>
                    </ul>
                </li>
            </ul>

我认为这是 plugin 非常相似

这种导航叫什么？

What is this type of navigation called?

javascript

css

navigation

jquery

terminology