Question

我正在尝试从右侧创建登录，当它变得响应时（显然在其中与其他标签一起），在汉堡按钮菜单的顶部。我假设我必须编写媒体查询或者是否有办法在该媒体查询中应用不同的类...但我不知道该怎么做。另外，我正在使用bootstrap。这就是我到目前为止所做的：

 <div class="navbar navbar-inverse navbar-fixed-top" id="navbar">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">HEALTHY LIFE FITNESS</a>
    </div>

    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Clubs</a>
                <li><a href="#">Classes</a>
                    <li><a href="#">Training</a>
                        <li><a href="#">Pilates</a>
                             <li><a href="#">Join</a>
            </li>

        </ul>
    <button type="button" id="login" class="btn btn-default navbar-btn pull-right" style="margin:10px 10px 0px 0px;">Log In</button>


        </div>
</div><!--end navbar-->

CSS：

 #navbar{background-color: rgb(18,18,28);}

.navbar-toggle .icon-bar:nth-of-type(2) {
      top: 1px;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
    top: 2px;
}

.navbar-toggle .icon-bar {
      position: relative;
      transition: all 500ms ease-in-out;
}

.navbar-toggle.active .icon-bar:nth-of-type(1) {
      top: 6px;
      transform: rotate(45deg);
}

.navbar-toggle.active .icon-bar:nth-of-type(2) {
      background-color: transparent;
}

.navbar-toggle.active .icon-bar:nth-of-type(3) {
      top: -6px;
      transform: rotate(-45deg);
}

JS：

$(document).ready(function () {
              $(".navbar-toggle").on("click", function () {
                    $(this).toggleClass("active")
              });
        });

汉堡按钮登录到底部

0 个答案: