折りたたんでメニューを作っています...うまくいきません。

Question

多分あなたが私を助けることができます。私はMVCプロジェクトのメニューを作ろうとしています。ブートストラップを使用することから得られる機能を最小化すると、ハンバーガーメニューに変わります。

しかし、私はそれが失敗することを試みるたびに、私は必要なブートストラップコードを追加しようとします。しかし、まず第一に、適切に動作しない、第二にすべての私のCSSを削除します。

多分、私はブートストラップをまったく使用しないでください。私が望むのは、私が設定したサイズに合わせてウィンドウを小さくして拡大すると、メニューが崩壊することです。

私はメニューにプロパティを設定しました。だから、今私が望むのは、メニューが小さくなり、メイン・サイズに戻ることだけです。

あなたは私を助けてくれますか？

<header> 
      <div id="navigation"> 
       <div class="arrows"> 
        <span class="ar-left"></span> 
        <span class="ar-right"></span> 
        <span class="ar-left2"></span> 
        <span class="ar-right2"></span> 
       </div> 
       <div class="dark-color"> 
        <div class="light-color"> 
         <a href="#" id="logo" style="font-family: 'Segoe Print'">Test</a> 
         <nav> 
          <ul style="font-family: 'Segoe Print'"> 
           <li><a href="../Home/Index" class="active-menu">Hem</a></li> 
           <li><a href="../One/Start">One</a></li> 
           <li><a href="../Two/Start">Two</a></li> 
           <li><a href="~/Three/Login">Log in</a></li> 
           <li><a href="#">five</a></li> 
          </ul> 
         </nav> 
        </div> 
       </div> 
      </div> 
</header> 

ありがとうございます！

Answer 1

フレックスボックスを使用すると、画面が大きくなるとメニューが連続して表示されます。ブレークポイントにヒットしたら、ハムアイコンを表示します。この例では、JQueryを使用して、そのクリックを一度実行するように実装しました。クリックすると、ul上に設定されたメインメニュークラスにclass activeが追加され、スタイルをflex-direction：columnに変更します。

$(".hamb").click(function(){ 
 
    $(".main-menu").toggleClass("active"); 
 
    $(".spanf ").toggleClass("span1 "); 
 
    $(".spans ").toggleClass("span2 "); 
 
    $(".spant ").toggleClass("span3 "); 
 
});

nav{display: flex; background-color: #000000;} 
 
.hamb { 
 
    background: #000000; 
 
    width: 75px; 
 
    height: 100px; 
 
    position: relative; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
    display:none; 
 
} 
 

 
.hamb span i { 
 
    width: 45px; 
 
    height: 10px; 
 
    background: white; 
 
    position: absolute; 
 
    left: 25%; 
 
} 
 

 
.span1 .span2 .span3 i { 
 
    position: absolute; 
 
} 
 

 
.hamb .spanf:nth-child(1) i { 
 
    top: 20%; 
 
} 
 

 
.hamb .spans:nth-child(2) i { 
 
    top: 40%; 
 
} 
 

 
.hamb .spant:nth-child(3) i { 
 
    top: 60%; 
 
} 
 

 
.span1:nth-child(1) i { 
 
    top: 40% !important; 
 
    transform: rotate(45deg); 
 
} 
 

 
.span2:nth-child(2) i { 
 
    left: 130px; 
 
} 
 

 
.span3:nth-child(3) i { 
 
    top: 40% !important; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.main-menu{ 
 
    padding-left: 0; 
 
    list-style:none; 
 
    display: flex; 
 
    width: 25%; 
 
    justify-content: space-around; 
 
    background-color: #000000; 
 
    animation: fadeIn 0.5s ease-in-out; 
 
    border: 1px solid white; 
 
    margin-left: 20px; 
 
} 
 
@keyframes fadeIn{ 
 
    0%{opacity: 0;} 
 
    100%{opacity:1;} 
 
} 
 

 
.main-menu li {text-align: center; padding: 5px 0;} 
 

 
.main-menu li a{color:white; text-decoration: none;} 
 

 

 
@media (max-width: 768px){ 
 
    .hamb{ 
 
    display:block; 
 
    } 
 
    .main-menu{display:none;} 
 
    .active { 
 
    display:flex; 
 
    flex-direction: column; 
 

 
} 
 
.main-menu li{border-bottom: 1px solid white;} 
 
.main-menu li:nth-last-child(1){border-bottom: none;} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navigation"> 
 
    <div class="arrows"> 
 
     <span class="ar-left"></span> 
 
     <span class="ar-right"></span> 
 
     <span class="ar-left2"></span> 
 
     <span class="ar-right2"></span> 
 
    </div> 
 
    <div class="dark-color"> 
 
     <div class="light-color"> 
 
      <a href="#" id="logo" style="font-family: 'Segoe Print'">Test</a> 
 
      <nav> 
 
<div class="hamb"><span class="spanf"><i></i></span><span class="spans"><i></i></span><span class="spant"><i></i></span></div> 
 
      
 
       <ul style="font-family: 'Segoe Print'" class="main-menu"> 
 
        <li><a href="../Home/Index" class="active-menu">Hem</a></li> 
 
        <li><a href="../One/Start">One</a></li> 
 
        <li><a href="../Two/Start">Two</a></li> 
 
        <li><a href="~/Three/Login">Log in</a></li> 
 
        <li><a href="#">five</a></li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
    </div> 
 
</div>