【问题标题】:Bootstrap burger nav menu (full screen)Bootstrap 汉堡导航菜单(全屏)
【发布时间】:2015-09-01 11:49:50
【问题描述】:

这是boot ply上的一些代码:

我想要做的是,不是在调整窗口大小时出现汉堡菜单,我想要一个全屏版本的菜单,它具有相同的效果,但适用于非移动屏幕。似乎汉堡菜单只在移动设备上被激活。我怎样才能做到这一点?谢谢

【问题讨论】:

  • 您想在桌面上使用全屏菜单,在移动设备上使用汉堡菜单吗?
  • 你已经尝试过什么?请在问题中也包含您的代码。
  • vivekkupadhyay - 是的

标签: css angularjs twitter-bootstrap


【解决方案1】:

您必须使用媒体查询并更改默认值以在更大的视口中公开navbar-toggle 类。将媒体查询宽度更改为您需要的任何值。

.navbar.custom-navbar .fa {
  font-size: 25px
}
@media (max-width: 2500px) {
  .custom-navbar .navbar-header {
    float: none;
  }
  .custom-navbar .navbar-left,
  .custom-navbar .navbar-right {
    float: none !important;
  }
  .custom-navbar .navbar-toggle {
    display: block;
  }
  .custom-navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .custom-navbar.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .custom-navbar .navbar-collapse.collapse {
    display: none!important;
  }
  .custom-navbar .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .custom-navbar .navbar-nav>li {
    float: none;
  }
  .custom-navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .custom-navbar .collapse.in {
    display: block !important;
  }
  .custom-navbar .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
  <div class="container-fluid">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button>
    <div class="navbar-header"> <a class="navbar-brand" rel="home" href="#" title="Help">
        Brand
      </a>

    </div>
    <div class="navbar-collapse collapse" id="navbar-collapse-1">
      <!-- Non-collapsing right-side icons -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>

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

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

        </li>
        <li>
          <a href="#" class="fa fa-cog"></a>

        </li>
        <li>
          <a href="#" class="fa fa-home"></a>

        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
  <!--/.container -->
</nav>

【讨论】:

  • 谢谢,这似乎有两个问题。当我按下菜单项按钮时,菜单不会自动折叠,而是保持打开状态。另外,我可以在汉堡菜单的左侧添加其他按钮吗?
  • 在示例中,我提供的菜单折叠问题不会发生,如果需要,您可以创建另一个 div 以在折叠的导航栏之外公开链接。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-11
  • 1970-01-01
  • 1970-01-01
  • 2017-02-11
  • 1970-01-01
  • 2021-05-28
相关资源
最近更新 更多