从下往上切换导航栏

html javascript toggle navbar from bottom up

本文关键字：导航      更新时间：2023-09-26

我已经练习了一种从左到右切换侧边栏菜单的方法。下面是代码:

https://jsfiddle.net/2z84zyjz/3/

但是我找不到让它从下往上切换的方法。你们知道吗?

Toggle 

            $("#menu-toggle").click(function(e) {
              e.preventDefault();
              $(".navbar").slideUp();
            });
            $('#menu-toggle').dblclick(function(e) {
              $(".navbar").slideDown();
            });
        #wrapper {
          padding-left: 0;
          -webkit-transition: all 0.5s ease;
          -moz-transition: all 0.5s ease;
          -o-transition: all 0.5s ease;
          transition: all 0.5s ease;
          background-color: aqua;
          height: 400px;
        }
        #wrapper.toggled {
          padding-top: 250px;
        }
        #sidebar-wrapper {
          z-index: 1000;
          position: fixed;
          left: 250px;
          width: 0;
          height: 100%;
          margin-left: -250px;
          overflow-y: auto;
          background: #050545;
          -webkit-transition: all 0.5s ease;
          -moz-transition: all 0.5s ease;
          -o-transition: all 0.5s ease;
          transition: all 0.5s ease;
          box-shadow: inset -10px 0px 10px -7px grey;
        }
        #wrapper.toggled #sidebar-wrapper {
          height: 250px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="wrapper">
  <div id="header" class="container-fluid" style="padding-top:100px;"> <a href="#menu-toggle" id="menu-toggle">Toggle</a>
    <div class="navbar"> <a class="navbar-brand">Heading <span id="counterId"></span></a>
    </div>
  </div>
</div>
<div id="sidebar-wrapper"></div>

使用slideUp()和slideDown()方法来显示/隐藏导航条

jsfiddle

使用以下解决方案:

<div id="wrapper">
    <div id="header" class="container-fluid toggled">
        <div class="navbar"> <a href="#menu-toggle" id="menu-toggle">Toggle</a>  
        <a class="navbar-brand">Heading <span id="counterId"></span></a>
        </div>
    </div>
</div>
CSS

#header {
    padding-top: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background-color:aqua;
    height:400px;
}
#header.toggled {
    padding-top: 100px;
}
JQUERY

    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#header").toggleClass("toggled");
    });

参考此提琴:http://jsfiddle.net/c209beer/1/

我已经得到了'键盘'场景在小提琴上工作。

padding-top和height是这里的关键角色。

你可能需要的任何定制都可以从那里得到解决，因为你的滑动问题已经解决了。

以下是我对OP原始小提琴的修改

HTML

<div id="keyboard">KEYBOARD</div>
CSS

#wrapper {
    height: 200px;
    position: relative;
    overflow: hidden;
}
#header {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding-top: 180px;
    text-align: center;
    width: 100%;
}
#wrapper.toggled #header {
    padding-top: 0px;
}
#keyboard {
    border: 1px solid black;
    height:160px;
    margin: 10px;
}

正如您所看到的，这只是层次结构和操作正确的properties的问题-如本例中的padding-top和height希望它能帮助到其他可能(有一天)有这种特殊问题的人。[编辑:更新的帖子不仅仅是一个"链接"问题的"链接"答案]

在您的示例中更改:

#wrapper.toggled {
            padding-left: 250px;
        }


#wrapper.toggled {
    padding-top: 250px;
 }
相关文章：