無法讓引導程序導航欄向下滑動選項選擇

當單擊登錄按鈕時，我想讓導航欄向下滑動 - 類似於以下網站：https://getroxi.com/（點擊註冊按鈕時）。這是我當前能夠得到的結果：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; 
    }

說明會讚賞:)

來源

2015-10-13 Shashank

我用上面的代碼創建了一個jsfiddle（http://jsfiddle.net/4hhgpyhv），但它不能很好地顯示這個問題，因爲它也使用moo-tools javascript – Shashank

如何像這樣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; 
}

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

當然，你會被你的需求和代碼修改這一點，但你的想法

來源

2015-10-13 15:29:59

無法讓引導程序導航欄向下滑動選項選擇

回答

相關問題