1

レスポンシブ メニューの問題。

メニューを 800px 未満で表示して灰色のボタンを押すと、ドロップダウン メニューが表示されます。

「ログインと参加」ボタンが完全に右上に配置されていることがわかるはずです。

ナビを閉じると問題が発生し、右上のボタンも閉じます。これらのボタンをそのままにしておきたいです。!

これが私の作業フィドルです。助けていただければ幸いです!!! http://jsfiddle.net/y5N6S/2/

li{
list-style: none;
}
a:link, a:visited{
color: #4083a9;
outline: none;
text-decoration: none;
font-size: 13px;
}
a:hover{
text-decoration: none;
color: #205f82;
}
ul, ol, h1, h2, h3, h4, p{
padding: 0px;
margin: 0px;;
}
p{
line-height: 22px;
font-size: 13px;
}

.clearfix{
  clear: both;
}
img:hover{
  opacity: .7;
}
/* =============================================================================
   HEADER
   ========================================================================== */

#header{
      width: 100%;
      height: 67px;
      background: white;
      z-index: 9997;
      position: fixed;
      top: 0px;
    }
      #header-inner{
        position: relative;
        margin: 0 auto;
        padding: 0 12px;
        max-width: 970px;
      }
        #logo{
          float: left;
          padding: 0px 20px 0 0;
        }
          #logo a{
            display: block;
            width: 107px;
            height: 50px;
            background-repeat: no-repeat;
            background-position: 0 50%;
            background-image: url(../img/home/oh-holla.png);
            -webkit-transition: opacity 0.2s ease;
            -moz-transition: opacity 0.2s ease;
            -o-transition: opacity 0.2s ease;
            transition: opacity 0.2s ease;
            }

             #logo img{
              height: 0;
             }

              #logo a:hover{
               opacity: .6;
             }

              #nav{
                margin: 1px 0px 0 0px;
                color: #777;
                padding:0px;
                float:right;
                display:block;
              }
                #nav>li{
                  float: right;
                  font-size: 1.25em;
                  line-height: 1;
                  margin-left: 30px;
                }
                  #nav>li>a{
                      display: block;
                      height: 66px;
                      line-height: 66px;
                      text-decoration: none;
                      color: #333;
                      font-weight: bold;
                  }

                    #toggle-nav{
                      display: none;
                    }




 /* =============================================================================
  NAVIGATION MEDIA MAX 800PX
   ========================================================================== */
                    @media screen and (max-width: 800px){

                    #header{
                        position: fixed;
                        height: 57px;
                    }

                      #toggle-nav{
                          position: absolute;
                          top: 0;
                          left: 0px;
                          display:block;
                          width: 48px;
                          height: 40px;
                          text-indent: -9999px;
                          background-repeat: no-repeat;
                          background-position: 15px 50%;
                          opacity: .5;
                            background:black;
                        }

                        #logo a{
                          display: block;
                          height: 40px;
                          margin: 0 auto 0 auto;
                        }

                          #logo{
                            float: none;
                            padding-right: 0;
                            text-align: left;
                          }
                            #nav{
                            float: left;
                            width: 100%;
                            margin: 0 0 10px 0;
                            text-align: left;
                            display:none;

                            }
                            #nav li{
                              position: relative;
                              float: none;
                              margin-right: 0;
                              text-align: left;
                              font-size: 12px;
                              background: #323232;
                              margin-left: 0px;
                            }
                            #nav li:hover{
                              background: #2e2e2e;
                            }
                            #header-inner{
                                width: auto;
                                padding: 0;
                            }
                            #nav li a{
                              height: auto;
                              padding: 15px;
                              font-size: 14px;
                              font-weight: bold;
                              line-height: 1;
                              border-top: 1px solid black;
                              background: white;
                            }
                            #wrap-inner{
                              padding-top: 60px;

                            }
                            li#join{
                              display: block;
                              float: none;
                              position: absolute;
                              top: 0;
                              right: 0;
                              background: none;
                            }
                            li#signin{
                              display: block;
                              float: none;
                              position: absolute;
                              top: 0;
                              right: 70px;
                              background: none;
                            }

                    }
4

2 に答える 2

1

ではなく に追加display:noneしてから、次の更新された jQuery を使用します。#nav li#nav

jsFiddle の例- 動作します!

$("#toggle-nav").click(function () {
    $("#nav li:not(#signin):not(#join)").slideToggle('slow');
});

これを行うのに HTML の変更は必要ないため、他のレスポンシブ メディア クエリでも機能します。

于 2013-11-14T20:02:42.680 に答える
0

html を次のように切り替えます。

<div id="header">
    <ul>
            <li id="join"><a href="#">Join</a></li>
            <li id="signin"><a href="#">Sign in</a></li>
    </ul>
      <div id="header-inner">
        <div id="logo">
          <a href="#"><img src="img/home/oh-holla.png" alt="Chartego Logo"/></a>
        </div>
        <a href="#toggle-nav" id="toggle-nav">Toggle navigation</a>

        <ul id="nav">
            <li id="discover"><a href="#">Discover</a></li>
            <li id="charts"><a href="#">Charts</a></li>
            <li id="livefeed"><a href="#">Livefeed</a></li>
        </ul>
    </div>
</div><!--end of header-->

http://jsfiddle.net/y5N6S/4/

参加/サインイン リンクを再び正しく表示するには、CSS を少し修正する必要がありますが、上記のフィドルでは常に上隅にあります。

于 2013-11-14T20:01:25.473 に答える