Casey Casey - 4 months ago 8
Javascript Question

What is this type of navigation called?

I don't know if this question is off-topic, but I am going to try anyway at the risk of getting down-voted. :D

I found this Mega-site navigation code and what I am interested in is when you click on "Clothing" at the top, you can then click on "Beanies" on the left and the navigation menu scrolls.

What is that called? I want to look up a tutorial on how to do it so that I can duplicate it. I want to understand what is happening.

Answer

They just have a bunch of ul's and if it has children then it toggles to that 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>

I think this is plugin is pretty similar

Comments