如何在导航栏上切换动画身体？

这里的新手试图学习我自己的代码..我遇到了一个问题，我的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

如何在导航栏上切换动画身体？

回答

相关问题