可折叠导航栏问题

我正在尝试创建类似于Bootstrap的导航栏。如果你去他们的网站并重新调整浏览器的大小。如果您将其缩小到足够小，顶部导航栏将成为一个按钮。当你点击按钮时，它会将所有东西都推下来，并再次显示完整的导航。可折叠导航栏问题

这就是我想要这个jsfiddle来完成，但它有以下问题：

最初，该按钮没有隐藏，它应该被隐藏，当屏幕变得太才可见狭窄。
（固定）按钮不显示背景像引导程序那样
（固定）重新调整大小的浏览器使导航消失并单击按钮。然后点击子菜单，子菜单项显示不好。

问题1丝网印刷：因为浏览器宽度大于940px nav bar should not be visible yet because browser width is larger than 940px

导航显示栏

导航栏应该是不可见的是，这是很好的，因为浏览器的宽度小于940px nav bar appears, it's fine because browser width is less than 940px

充分的html代码：

<html lang="en"> 
<head> 
    <title></title> 

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" /> 


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() {  
     }); 
    </script> 
</head> 
<body> 
    <div class="conatiner-fluid"> 
     <div class="row-fluid"> 
      <div class="span10"> 

       <a class="btn btn-navbar" data-toggle="collapse" 
        data-target=".nav-collapse"> 
        <span class="icon-bar"></span><span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> 

       <div class="nav-collapse"> 
        <ul class="nav nav-tabs"> 
         <li><a href="#">Home</a></li> 
         <li class="dropdown"> 
          <a class="dropdown-toggle" data-toggle="dropdown" 
           href="#">Help<b class="caret"></b> 
          </a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Keep</a></li> 
           <li><a href="#">Screaming</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </div> 

      </div> 
     </div> 
     <div class="row-fluid"> 
      <div class="span10"> 
       other content 
      </div> 
     </div> 
    </div> 
</body> 
</html>

来源

2013-01-07 Ray Cheng

这更接近你以后的样子吗？
http://jsfiddle.net/panchroma/R4BEY/

您的示例span10 DIV，我不知道你用这个，所以我增加了一个跨度2之后完成的行标题。

HTML在下面。你在打开的容器div上有一个错字，而你错过了navbar和navbar-inner div。我认为这就是我所做的改变。

好运

<div class="container-fluid"> 
<div class="row-fluid"> 
<div class="span10"> 

<div class="navbar"> 
<div class="navbar-inner"> 


<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
</a> 

<div class="nav-collapse collapse "> 
    <ul class="nav nav-tabs"> 
     <li><a href="#">Home</a></li> 
     <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help<b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Keep</a></li> 
      <li><a href="#">Screaming</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div> <!-- end nav-collapse --> 

</div><!-- end nav bar inner --> 
</div> <!-- end nav bar --> 

</div><!--end span10 --> 
<div class="span2">span 2</div> 
</div><!-- end row --> 


<div class="row-fluid"> 
<div class="span10"> 
    other content 
</div> 
<div class="span2">span 2</div> 
</div> 
</div>

来源

2013-01-08 00:52:10

谢谢你，但它只能解决问题2和3，而不是＃1。对于＃1，我喜欢链接显示，只有当浏览器窗口变窄时，它才会崩溃成一个按钮。我从你的更新中创建了另一个小提琴。 http://jsfiddle.net/qMdYg/4/ –

默认情况下，Bootstrap菜单折叠为940px，这是我的示例和Bootstrap网站中发生的情况。你想改变这个断点吗？ –

我包括屏幕打印来演示问题1. –

可折叠导航栏问题

回答

相关问题