Question

我希望在单击“登录”按钮时向下滑动导航栏 - 类似于此网站：https://getroxi.com/（单击“SignUp”按钮时）。这就是我目前能够获得的：https://gyazo.com/cd1d3a23fd41229deb673c3f25076c22

我能做的一件事就是让它向下滑动，但应该出现在上面的部分目前位于导航栏后面。我通过添加内联css position: relative来完成此操作。但我希望导航栏是透明的，登录div只出现在选项单击上。

以下是导航栏的HTML：

<nav class="navbar" data-spy="affix" style="position: relative;">
        <div class="container-fluid">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!--<a class="navbar-brand" href="/"><img src="images/deloitte.png"></a>-->
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a id="toggleLogin" href="#">Sign in</a><li>
                        <li><a href="#">Our Network</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

这是我正在使用的Javascript：

/* FX.Slide */
/* toggle window for the login section */
/* Works with mootools-release-1.2 */
/* more info at http://demos.mootools.net/Fx.Slide */

window.addEvent('domready', function(){

    $('login').setStyle('height','auto');
    var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state  

    $('toggleLogin').addEvent('click', function(e){
        e = new Event(e);
        mySlide.toggle();
        e.stop();
    });

    $('closeLogin').addEvent('click', function(e){
        e = new Event(e);
        mySlide.slideOut();
        e.stop();
    });

});

这是CSS：

nav.navbar {
  margin: 0;
  left: 0;
  right: 0;
  position: fixed;
  top: -100%;
  border-radius: 0;
  transition: 300ms;
  -webkit-transition: 300ms;
  border: none; }
  @media screen and (max-width: 767px) {
    nav.navbar {
      position: static;
      top: 0; 
      } }
  nav.navbar div.container-fluid {
     background-color: rgba(96, 96, 96, 0.2);; }
  nav.navbar button.navbar-toggle span.icon-bar {
    color: #002776;
    border-color: #002776;
    background-color: #002776; }
  nav.navbar a.navbar-brand {
    color: #002776;
    font-weight: 700;
    font-size: 22px;
    padding-top: 20px;
    padding-bottom: 20px; }
    nav.navbar a.navbar-brand img {
      width: 125px; }
    @media screen and (max-width: 767px) {
      nav.navbar a.navbar-brand {
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: 16px; } }
  nav.navbar ul.nav li a {
    color: #FFFFFF;
    transition: 300ms;
    -webkit-transition: 300ms;
    line-height: 24px;
    font-size: 22px;
    padding-top: 25px;
    padding-bottom: 25px; }
    nav.navbar ul.nav li a:hover {
      color: ;
      background-color: #000; }
  @media screen and (min-width: 768px) {
    nav.navbar.affix {
      position: fixed;
      top: 0;
      z-index: 100; } }

   nav.navbar div.container-fluid.top-nav-collapse {
        padding: 0;
        border-bottom: 1px solid rgba(255,255,255,.3);
        background: #000;
    }

  @media (min-width:769px) {
    .dropdown:hover .dropdown-menu {
      display: block;
      }
    }

    ul.nav > li:hover {
      background:#000;
  }

帮助将不胜感激：）

Answer 1

这样的事情https://jsfiddle.net/koeqLmcL/

怎么样？

HTML

<div class="navigation text-center">
  <h3>This is navigation</h3>
</div>

<div class="content">
  <button class="show-nav">Nav</button>
  <h3>This is content</h3>
</div>

CSS

    body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; 
    position: relative;
}

.navigation {
    z-index: 1;
    width: 100%;
    padding: 15px 0;
    background: black;
    color: white;
    position: absolute;
}

.content {
    z-index: 10;
    background: green;
    height: 100vw;
    padding: 20px 50px 100px;
    width: 100%;
    color: white;
    transition: all 0.4s ease-in;
    position: absolute;
}

.margin-top {
    margin-top: 90px;
    transition: all 0.4s ease-in;
}

JS

$('.show-nav').click(function() {
    $('.content').toggleClass('margin-top');
})

当然，您可以根据自己的需求和代码对其进行修改，但是您会明白

无法在选项选择时使引导导航栏向下滑动

1 个答案: