40258


codepenというサイトにあったメニューバーを自分のサイトに追加したいのですが、貼り付けだけではこのようになり  
[![画像の説明をここに入力](https://i.stack.imgur.com/KlOze.png)](https://i.stack.imgur.com/KlOze.png)

うまく行きませんでした。ul部分のcssが効いていないような気がします。  
<https://codepen.io/victorfreire/pen/QywRNM>

htmlはこのようになっていてbootstrapを読み込んでいます。  
詳しい方ご回答よろしくお願いします。

[code]

    @keyframes checked-anim {
      50% {
        width: 3000px;
        height: 3000px;
      }
      100% {
        width: 100%;
        height: 100%;
        border-radius: 0;
      }
    }
    
    @keyframes not-checked-anim {
      0% {
        width: 3000px;
        height: 3000px;
      }
    }
    
    li,
    a {
      /* ここがうまく適用されていないです。*/
      margin: 75px 0 -55px 0;
      color: #03A9F4;
      line-height: 1.8;
      text-decoration: none;
      text-transform: none;
      list-style: none;
      outline: 0;
      display: none;
    }
    
    li {
      width: 230px;
      text-indent: 56px;
    }
    
    a:focus {
      display: block;
      color: #333;
      background-color: #eee;
      transition: all .5s;
    }
    
    #trigger,
    #burger,
    #burger:before,
    #burger:after {
      position: absolute;
      top: 25px;
      left: 25px;
      background: #03A9F4;
      width: 30px;
      height: 5px;
      transition: .2s ease;
      cursor: pointer;
      z-index: 1;
    }
    
    #trigger {
      height: 25px;
      background: none;
    }
    
    #burger:before {
      content: " ";
      top: 10px;
      left: 0;
    }
    
    #burger:after {
      content: " ";
      top: 20px;
      left: 0;
    }
    
    #menu-toggle:checked+#trigger+#burger {
      top: 35px;
      transform: rotate(180deg);
      transition: transform .2s ease;
    }
    
    #menu-toggle:checked+#trigger+#burger:before {
      width: 20px;
      top: -2px;
      left: 18px;
      transform: rotate(45deg) translateX(-5px);
      transition: transform .2s ease;
    }
    
    #menu-toggle:checked+#trigger+#burger:after {
      width: 20px;
      top: 2px;
      left: 18px;
      transform: rotate(-45deg) translateX(-5px);
      transition: transform .2s ease;
    }
    
    #menu {
      position: absolute;
      margin: 0;
      padding: 0;
      width: 110px;
      height: 110px;
      background-color: #fff;
      border-bottom-right-radius: 100%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
      animation: not-checked-anim .2s both;
      transition: .2s;
    }
    
    #menu-toggle:checked+#trigger+#burger+#menu {
      animation: checked-anim 1s ease both;
    }
    
    #menu-toggle:checked+#trigger~#menu>li,
    a {
      display: block;
    }
    
    [type="checkbox"]:not(:checked),
    [type="checkbox"]:checked {
      display: none;
    }
[/code]

[code]

    <body>
      <input type="checkbox" id="menu-toggle" />
      <label id="trigger" for="menu-toggle"></label>
      <label id="burger" for="menu-toggle"></label>
      <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="jumbotron">
        <div class="container">
          <h1>Python検索エンジン</h1>
    
          <form method="post" action="{{url_for('index')}}">
            <!-- ここでもう一度サーバーにアクセスしている -->
            <div class="row">
              <div class="col-xs-10">
                <input type="text" class="form-control" name="keyword" placeholder="キーワードを入力して下さい.">
              </div>
              <div class="col-xs-2">
                <input type="submit" class="btn btn-md btn-block btn-primary" value="検索">
              </div>
            </div>
          </form>
    
          <br>
    
    
        </div>
        <!-- container -->
      </div>
    </body>
[/code]


CC BY-SA 4.0
2017-11-13T00:52:19.213
39531
2019-12-14T21:09:27.913
2019-12-14T21:09:27.913
32986
22565
question
css
ハンバーガーメニューを追加したいけどcssがうまく効かない


codepenをみたところ問題ないようでしたが、質問投稿以降に解決したのでしょうか？


CC BY-SA 3.0
2017-12-14T03:07:03.420
40258
2017-12-14T03:07:03.420
26597
39531
answer


ページを再読み込みしたらうまく動きました (本人による質問文への追記より)。


CC BY-SA 3.0
2017-12-14T03:17:31.980
40259
2017-12-14T03:17:31.980
3060
39531
answer