Question

响应式菜单问题。

当您在800px以下查看菜单并按下灰色btn时，会出现一个下拉菜单。

你应该能够看到我的“登录和加入”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;
                            }

                    }

Answer 1

将display:none添加到#nav li而不是#nav，然后使用以下更新的jQuery ..

jsFiddle example - 它有效！

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

执行此操作不需要更改HTML，因此它仍可用于其他响应式媒体查询！

Answer 2

将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，使连接/登录链接再次看起来正确，但它们始终位于上方角落的上角。

如何防止响应式菜单关闭我的所有导航？

2 个答案: