1

响应式菜单问题。

当您查看低于 800 像素的菜单并按下灰色按钮时，您会看到一个下拉菜单。

您应该能够看到我的“登录和加入”btns 绝对位于右上角。

关闭导航后会出现问题，它也会关闭右上角的 btns。我希望这些 btns 留在原地。！

这是我的工作小提琴。会喜欢帮助！ 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到#nav li而不是#nav，然后使用以下更新的 jQuery ..

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 回答