このタイプのナビゲーションとは何ですか？

Question

この質問が話題にならないかどうかわかりませんが、とにかくダウン投票になる危険があります。 ：

私はこれがMega-site navigationコードを見つけました。私が興味を持っているのは、上の "Clothing"をクリックすると、左の "Beanies"をクリックしてナビゲーションメニューのスクロールができることです。

これは何と呼ばれていますか？私はそれを複製できるようにする方法についてのチュートリアルを参照したいと思います。私は何が起こっているのか理解したい。

Answer 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だと思うが、彼らはjQueryのを使用して、ちょうどクリックされた内容に基づいてプライマリおよびセカンダリ側のNAVをトグルしているように見えるのコードを見てから