サブメニューを作成する方法

Question

サブメニューの表示を切り替える方法、トップメニューをクリックして開く方法、相対的に配置してアニメーションが開いたときにコンテンツをプッシュダウンする方法、また、ブラウザのフルサイズになります。これはトップレベルのメニューを損なわないようにしなければなりません。これは私が実装するのが難しいことです。チェックの修正以下

jQuery("#nav > li").click(function(e) { 
 
    e.preventDefault(); 
 

 
    jQuery(this).find('ul').slideToggle("slow"); 
 
});

.header-container { 
 
    position: relative; 
 
} 
 
.main-nav #nav { 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 
.main-nav #nav > li { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 
.main-nav #nav > li ul { 
 
    display: none; 
 
    background: blue; 
 
} 
 
.wrapper { 
 
    background: red; 
 
    min-height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="header-container"> 
 
    <header class="main-header"> 
 
    <nav role="navigation" class="main-nav"> 
 
     <ul id="nav"> 
 
     <li> 
 
      <a href="#">Link 1</a> 
 
      <ul> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div> 
 
<div class="wrapper"> 
 
</div>

Answer 1

まあ、それは少しトリッキーですがいますが、画面の幅をカバーするためにposition: absoluteで:before擬似要素を使用することができます。

このソリューションを使用するには、がありません。には、position: relativeと設定してください。このようにして、:before要素は全幅になります。

jQuery("#nav > li").click(function(e) { 
 
    e.preventDefault(); 
 

 
    jQuery(this).find('ul').slideToggle("slow"); 
 
});

.header-container { 
 
    position: relative; 
 
} 
 
.main-nav #nav { 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 
.main-nav #nav > li { 
 
    display: inline-block; 
 
    list-style: none; 
 
    vertical-align: top; 
 
} 
 
.main-nav #nav > li ul { 
 
    display: none; 
 
    background: blue; 
 
} 
 

 
.main-nav #nav > li ul:before { 
 
    content:""; 
 
    position:absolute; 
 
    left: 0; 
 
    right: 0; 
 
    background: blue; 
 
    height: 100%; 
 
    z-index: -1; 
 
} 
 

 
.wrapper { 
 
    background: red; 
 
    min-height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="header-container"> 
 
    <header class="main-header"> 
 
    <nav role="navigation" class="main-nav"> 
 
     <ul id="nav"> 
 
     <li> 
 
      <a href="#">Link 1</a> 
 
      <ul> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div> 
 
<div class="wrapper"> 
 
</div>

Answer 2

：ここでは、ここで私の試みです。

jQuery("#nav > li").click(function(e) { 
 
    e.preventDefault(); 
 

 
    jQuery('#subMenu').slideToggle("slow"); 
 
});

.header-container { 
 
    position: relative; 
 
    margin: 0; 
 
} 
 
.main-nav #nav { 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 
.main-nav #nav > li { 
 
    display: inline-block; 
 
    list-style: none; 
 
    vertical-align: text-top; 
 
    max-width: 100px; 
 
} 
 
#subMenu { 
 
    display: none; 
 
    background: blue; 
 
    position: relative; 
 
    top: 50; 
 
    left: 0; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 
#subMenu > ul { 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    background: red; 
 
    min-height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="header-container"> 
 
    <header class="main-header"> 
 
    <nav role="navigation" class="main-nav"> 
 
     <ul id="nav"> 
 
     <li> 
 
      <a href="#">Link 1</a> 
 
      
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div> 
 
<div id="subMenu"> 
 
    <ul> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      </ul> 
 
</div> 
 
<div class="wrapper"> 
 
</div>

変更されたコードを確認してください。今

Answer 3

あなたはフレキシボックスを使用することができます：

jQuery("#nav > li").click(function(e) { 
 
    e.preventDefault(); 
 

 
    jQuery(this).find('ul').slideToggle("slow"); 
 
});

.header-container { 
 
    position: relative; 
 
} 
 
.main-nav #nav { 
 
    display: flex; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    justify-content: center; 
 
} 
 
.main-nav #nav > li { 
 
    list-style: none; 
 
    flex: 1; 
 
} 
 
.main-nav #nav > li ul { 
 
    display: none; 
 
    background: blue; 
 
} 
 
.wrapper { 
 
    background: red; 
 
    min-height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="header-container"> 
 
    <header class="main-header"> 
 
    <nav role="navigation" class="main-nav"> 
 
     <ul id="nav"> 
 
     <li> 
 
      <a href="#">Link 1</a> 
 
      <ul> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div> 
 
<div class="wrapper"> 
 
</div>