这种类型的导航叫啥？ [关闭]

Posted 2023-02-27

【中文标题】这种类型的导航叫啥？ [关闭]

【英文标题】：What is this type of navigation called? [closed]这种类型的导航叫什么？ [关闭]

【发布时间】：2016-12-10 22:32:51

【问题描述】：

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

我找到了这个Mega-site navigation 代码，我感兴趣的是，当您单击顶部的“服装”时，您可以单击左侧的“豆豆”并滚动导航菜单。

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

【问题讨论】：

从代码来看，他们似乎在使用 jQuery，只是根据点击的内容切换主要和次要侧导航。

我不确定这篇文章是否是关于这个确切的导航（没有阅读它），但它是来自您链接的大型网站的联合创始人的帖子，他只是指它作为“整页介绍和导航” - codyhouse.co/gem/intro-page-full-width-navigation

检查元素> 看代码

【参考方案1】：

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

<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 很相似

【讨论】：

不错的发现！你知道这种导航叫什么吗？

@Casey 我在我的回答中添加了一个插件链接

是的，这正是我要找的！谢谢！