如何在導航欄上切換動畫身體？

這裏的新手試圖學習我自己的代碼..我遇到了一個問題，我的Navbar崩潰現在重疊了我的頁面內容，這次它是一個問題，因爲我想要導航欄的崩潰背景有背景：透明; ..我的jquery很爛，但我認爲它可能需要在這裏使用..它也需要考慮下拉菜單..因爲他們可能需要推動頁面的主體以及..我的代碼：如何在導航欄上切換動畫身體？

<body> 

    <!-- Start Navbar --> 
    <nav class="navbar navbar-default" role="navigation" id="myNavbar"> 
     <div class="container"> 

      <!-- Brand and Toggle get grouped --> 
      <div class="navbar-header"> 
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target ="#navbar-responsive-collapse"> 
        <span>Tap me!</span> 
       </button> 
       <a href="#"><img src="images/pencil-logo-80x80.png" class="navbar-brand" alt="Our Brand: Folio"></a> 
       <a href="#" id="navLogo" class="navbar-brand">Folio</a> 
      </div><!-- end navbar-header --> 

      <div class="collapse navbar-collapse" id="navbar-responsive-collapse"> 
       <ul class="nav navbar-nav navbar-right"> 

        <li class="active"><a href="#">Home</a></li> 

        <li class="dropdown hidden-sm"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services</a> 
         <ul class="dropdown-menu" role="menu"> 
          <li id="borderTop"><a href="#">Services</a></li> 
          <li><a href="#">Services Small</a></li> 
         </ul><!-- end menu --> 
        </li> 

        <!-- delete class="dropdown-toggle" data-toggle="dropdown" to make the dropdown only open on hover --> 
        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Portfolio</a> 
         <ul class="dropdown-menu" role="menu"> 
          <li id="borderTop"><a href="#">Portfolio 2 Column</a></li> 
          <li><a href="#">Portfolio 3 Column</a></li> 
          <li><a href="#">Portfolio 4 Column</a></li> 
          <li><a href="#">Single Column</a></li> 
         </ul><!-- end menu --> 
        </li> 

        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Pages</a> 
         <ul class="dropdown-menu" role="menu"> 
          <li id="borderTop"><a href="#">About Me</a></li> 
          <li><a href="#">Team Page</a></li> 
          <li><a href="#">Page Sticky Header</a></li> 
          <li><a href="#">Background Video</a></li> 
          <li><a href="#">Preloader</a></li> 

         </ul><!-- end menu --> 
        </li> 

        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Blog</a> 
         <ul class="dropdown-menu" role="menu"> 
          <li id="borderTop"><a href="#">Blog Overview Grid</a></li> 
          <li><a href="#">Blog Sidebar</a></li> 
          <li><a href="#">Blog Post</a></li> 
         </ul><!-- end menu --> 
        </li> 

        <li><a href="#">Contact</a></li> 

       </ul><!-- end navbar-right --> 
      </div><!-- end navbar-responsive-collapse --> 

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

    <!-- Start Intro --> 
    <div class="headerWrapper" id="intro"> 
     <h1>Hello. I'm Folio a <strong>small</strong> creative portfolio</h1> 
     <p>Specialized in design and coding graphics and websites.</p> 
    </div><!-- end Intro --> 

</body>

CSS：

/*------------------------------- 
     Global Styles 
---------------------------------*/ 
body { 
background: url('http://www.controltheweb.com/images/desktop-background-large/magneticField.jpg') no-repeat center center fixed; 
/*-- Makes backgrnd responsive --*/ 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

#intro { 
text-align: center; 
margin-top: 120px; 
font-family: Paytone One; 
}

嗯不知道，如果需要更多的CSS，但導航欄功能偉大的..它只是我重疊頁面標題一樣引導一般，不過它的背景：透明;它看起來可怕..我能想到的CSS/HTML這樣以某種方式使用填充的，但唯一的方式，我認爲滑動效果將是很多更好看..日Thnx提前

這裏是一個bootply顯示我的問題：http://www.bootply.com/n7dkI2ZpVX

來源

2014-09-11 SuperVeetz

取下固定高度這裏有一個Bootply，你可以玩：http://www.bootply.com/vlsYPczs5s – ZimSystem 2014-09-11 12:31:32

感謝您對我bootply。。我嘗試使用jsfiddle但有問題讓我的代碼運行..我做了一個新的bootply，顯示我的問題.. http://www.bootply.com/fwA2dwf391 – SuperVeetz 2014-09-11 19:14:16

如果我明白了這個問題，你想要的是一旦打開下拉菜單，內容應該向下移動。一旦導航菜單崩潰，應該返回。如果這是正確的，所有你需要做的是從#myNavbar

#myNavbar { 
    /* height: 80px; */ 
    margin-top: 30px; 
    background: transparent; 
    border: none; 
}

來源

2014-09-11 19:28:51

大聲笑哇，這很容易..謝謝。我想我已經經常設置我的標題的高度來設置它們的大小，但由於背景是透明的，它並沒有改變我的網站，這完全奏效。我不知道爲什麼它使它工作，但謝謝你這麼多。 – SuperVeetz 2014-09-11 19:34:22

padding-top＆bot將成爲我現在改變導航大小的新朋友嗎？ :) – SuperVeetz 2014-09-11 19:37:54

@AlexDiVito在使用響應式設計時，您需要非常小心，以確定哪些元素可以提供固定的高度/寬度。這裏的問題是，上述元素有一個固定的高度。但是，當導航欄擴展的內容超過了可以放在高度的內容時，它就會飛過來。現在，html已經被放出了收容區域。由於高度沒有增加，內容區域不知道它不得不下去騰出空間。刪除固定的高度允許div在內容增加時擴展，因此讓內容知道進一步向下移動。 – 2014-09-11 19:39:44

如何在導航欄上切換動畫身體？

回答

相關問題