メニューがリストとして開かない

Question

私はドロップダウンメニューを作成しましたが、私が望むようにリストとして表示されません。代わりに、私のページのトップバナーを横切って表示しています。 CSSを使いこなしてみましたが、無駄にしました。

これをリスト形式で表示する方法については、正しい方向を指摘するだけで済みます。

.menu { 
 
    position: absolute; 
 
    /*top: 100%;*/ /* disabled for the sake of demonstration and user-friendly troubleshooting */ 
 
    right: 0%; 
 
    background: #d2eaf2; 
 
    float: left; 
 
    height: 25px; 
 
    overflow: hidden; 
 
} 
 

 
.menu--open { 
 
    height: auto; 
 
} 
 

 
.menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.menu li { 
 
    border-bottom: 1px solid #575766; 
 
} 
 

 
.menu a { 
 
    color: black; 
 
    display: block; 
 
    padding: 2em 6em; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav class="menu menu-toggle"> 
 
<div>click</div> <!-- Added for user-friendly troubleshooting --> 
 
    <ul> 
 
    <li> 
 
     <a href="#About">About</a> 
 
    </li> 
 
    <li> 
 
     <a href="#TopTips">Top Tips</a> 
 
    </li> 
 
    <li> 
 
     <a href="#GetIntoRunning">Get Into Running</a> 
 
    </li> 
 
    <li> 
 
     <a href="#TryThis">Try This</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 
<div class="menu-toggle"> 
 
    <div class="hamburger"></div> 
 
</div> 
 

 
<script> 
 
    $(document).ready(function() { 
 
    $('.menu-toggle').click(function() { 
 
     $('.menu').toggleClass('menu--open'); 
 
    }) 
 
    }); 
 
</script>

すべてのヘルプは非常に高く評価されるだろう！

Answer 1

.menuのためにあなたは、これはそれを動作させるでしょう、あなたのmenu-toggle.menuの上に持参し、メニューにテキストを追加し、また、それが再配置についてです、floatとright値を指定する必要はありません

$(document).ready(function() { 
 
    $('.menu-toggle').click(function() { 
 
     $('.menu').toggleClass('menu--open'); 
 
    }) 
 
});

.menu { 
 
    position: absolute; 
 
    background: #d2eaf2; 
 
    top: 50px; 
 
    height:0; 
 
    overflow: hidden; 
 
} 
 

 
.menu--open { 
 
    height: auto; 
 
} 
 

 
.menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.menu li { 
 
    border-bottom: 1px solid #575766; 
 
} 
 

 
    .menu a { 
 
     color: black; 
 
     display: block; 
 
     padding: 2em 6em; 
 
     text-transform: uppercase; 
 
     text-decoration: none; 
 
    } 
 

 
.menu a:hover, .menu a:focus { 
 
\t background: #7eadbc; 
 
} 
 
.menu-toggle { 
 
\t padding: 1em; 
 
\t position: absolute; 
 
\t left: 0.5em; 
 
\t top: 0.5em; 
 
\t cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu-toggle"> 
 
    <div class="hamburger">myMenu</div> 
 
</div>  
 
<nav class="menu"> 
 
    <ul> 
 
     <li> 
 
      <a href="#About">About</a> 
 
     </li> 
 
     <li> 
 
      <a href="#TopTips">Top Tips</a> 
 
     </li> 
 
     <li> 
 
      <a href="#GetIntoRunning">Get Into Running</a> 
 
     </li> 
 
     <li> 
 
      <a href="#TryThis">Try This</a> 
 
     </li> 
 
    </ul> 
 
</nav>

これが役に立ちます。

更新

それとも、あなたが.menu-toggleの幅と高さを指定し、それにいくつかのCSSを追加することができ、テキストをしたくない場合は、このスニペットチェック：

$(document).ready(function() { 
 
    $('.menu-toggle').click(function() { 
 
     $('.menu').toggleClass('menu--open'); 
 
    }) 
 
});

.menu { 
 
    position: absolute; 
 
    background: #d2eaf2; 
 
    top: 50px; 
 
    height:0; 
 
    overflow: hidden; 
 
} 
 

 
.menu--open { 
 
    height: auto; 
 
} 
 

 
.menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.menu li { 
 
    border-bottom: 1px solid #575766; 
 
} 
 

 
    .menu a { 
 
     color: black; 
 
     display: block; 
 
     padding: 2em 6em; 
 
     text-transform: uppercase; 
 
     text-decoration: none; 
 
    
 
     } 
 

 
    .menu a:hover, .menu a:focus { 
 
    \t background: #7eadbc; 
 
    } 
 
    .menu-toggle { 
 
    \t padding: 1em; 
 
    \t position: absolute; 
 
    \t left: 0.5em; 
 
    \t top: 0.5em; 
 
    \t cursor: pointer; 
 
border: 1px solid #222; 
 
    } 
 
.menu-toggle:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 8px; 
 
    width: 1em; 
 
    height: 0.15em; 
 
    background: black; 
 
    box-shadow: 0 0.25em 0 0 black, 0 0.5em 0 0 black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu-toggle"> 
 
    <div class="hamburger"></div> 
 
</div>  
 
<nav class="menu"> 
 
    <ul> 
 
     <li> 
 
      <a href="#About">About</a> 
 
     </li> 
 
     <li> 
 
      <a href="#TopTips">Top Tips</a> 
 
     </li> 
 
     <li> 
 
      <a href="#GetIntoRunning">Get Into Running</a> 
 
     </li> 
 
     <li> 
 
      <a href="#TryThis">Try This</a> 
 
     </li> 
 
    </ul> 
 
</nav>

を

Answer 2

.menuクラスのプロパティを編集する必要があります。

$(document).ready(function() { 
 
     $('.menu-toggle').click(function() { 
 
      $('.menu').toggleClass('menu--open'); 
 
     }) 
 
    });

.menu { 
 
    position: absolute; 
 
    right: 0%; 
 
    background: #d2eaf2; 
 
    float: left; 
 
    height: 6px; 
 
    overflow: hidden; 
 
} 
 

 
.menu--open { 
 
    height: auto; 
 
} 
 

 
.menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.menu li { 
 
    border-bottom: 1px solid #575766; 
 
} 
 

 
.menu a { 
 
    color: black; 
 
    display: block; 
 
    padding: 2em 6em; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
} 
 

 
.menu a:hover, .menu a:focus { 
 
    background: #7eadbc; 
 
} 
 
.menu-toggle { 
 
    padding: 1em; 
 
    position: absolute; 
 
    left: 0.5em; 
 
    top: 0.5em; 
 
    cursor: pointer; 
 
    border: 1px solid;/*Just for test*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="menu"> 
 
    <ul> 
 
     <li> 
 
      <a href="#About">About</a> 
 
     </li> 
 
     <li> 
 
      <a href="#TopTips">Top Tips</a> 
 
     </li> 
 
     <li> 
 
      <a href="#GetIntoRunning">Get Into Running</a> 
 
     </li> 
 
     <li> 
 
      <a href="#TryThis">Try This</a> 
 
     </li> 
 
    </ul> 
 
</nav> 
 
<div class="menu-toggle"> 
 
    <div class="hamburger"></div> 
 
</div>