如何显示带有一些标题值的垂直导航栏？

时间：2017-08-18 11:45:37

标签： html css twitter-bootstrap

在较小的窗口上，导航栏默认显示其菜单项

enter image description here

用户进入网站时不应显示菜单项

我面临的另一个问题是我第一次点击时 在导航栏按钮菜单项上单击后不会隐藏 第二个菜单项获取隐藏。

.sidebar .sidebar-nav.navbar-collapse {
  padding-left: 0;
  padding-right: 0;
}

.sidebar .sidebar-search {
  padding: 15px;
}

.sidebar ul li {
  border-bottom: 1px solid #e7e7e7;
}

.sidebar ul li a.active {
  background-color: #eeeeee;
}

.sidebar .arrow {
  float: right;
}

.sidebar .fa.arrow:before {
  content: "\f104";
}

.sidebar .active>a>.fa.arrow:before {
  content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
  border-bottom: none !important;
}

.sidebar .nav-second-level li a {
  padding-left: 37px;
}

.sidebar .nav-third-level li a {
  padding-left: 52px;
}

@media ( min-width: 768px) {
  .sidebar {
    z-index: 1;
    position: absolute;
    width: 250px;
    margin-top: 51px;
  }
  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
    margin-left: auto;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



</head>

<body>

  <nav class="navbar navbar-default" role="navigation">

    <div class="navbar-header" style="padding: 0px; margin: 0px">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    				<span class="icon-bar"></span> <span class="icon-bar"></span> <span
    					class="icon-bar"></span>
    			</button>
      <a class="navbar-brand" href="index.html">Headers</a>
    </div>


    <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse">

        <ul class="nav" id="side-menu">


          <li class="menu-bar-list-item"><a target="_self" data-toggle="collapse" data-target="#toggleDemo7" data-parent="#sidenav01" class="collapsed"> Profile <span
    							class="caret pull-right"></span>
    					</a>
            <div class="collapse" id="toggleDemo7" style="height: 0px;">
              <ul class="nav nav-list">
                <li><a href="#">My Profile</a></li>
                <li><a [routerLink]="['/login']">Logout</a></li>
              </ul>
            </div>
          </li>

          <li class="menu-bar-list-item"><a target="_self" data-toggle="collapse" data-target="#toggleDemo3" data-parent="#sidenav01" class="collapsed"> Others <span
    							class="caret pull-right"></span>
    					</a>
            <div class="collapse" id="toggleDemo3" style="height: 0px;">
              <ul class="nav nav-list">
                <li><a href="#">HolyDays Calendar</a></li>
                <li><a href="#">suggestions & FeedBack</a></li>
                <li><a href="#">Bulletin Board</a></li>
                <li><a href="#">Contact us</a></li>

              </ul>
            </div>
          </li>

        </ul>

      </div>
    </div>
    <!-- /.navbar-collapse -->
  </nav>

</body>

</html>

这可能是一个小错误，我努力解决这个问题，我不是网页设计师，但我需要完成它。

当用户第一次打开网站时，任何人都可以帮我隐藏导航栏的菜单项，并且当点击它时第一次导航栏按钮功能不正常。

2 个答案:

答案 0 :(得分：1)

请添加一个课程＆＃39; collapse＆＃39;在<div class="sidebar-nav navbar-collapse">行

<div class="sidebar-nav navbar-collapse collapse">

它会起作用

答案 1 :(得分：1)

.sidebar .sidebar-nav.navbar-collapse {
  padding-left: 0;
  padding-right: 0;
}

.sidebar .sidebar-search {
  padding: 15px;
}

.sidebar ul li {
  border-bottom: 1px solid #e7e7e7;
}

.sidebar ul li a.active {
  background-color: #eeeeee;
}

.sidebar .arrow {
  float: right;
}

.sidebar .fa.arrow:before {
  content: "\f104";
}

.sidebar .active>a>.fa.arrow:before {
  content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
  border-bottom: none !important;
}

.sidebar .nav-second-level li a {
  padding-left: 37px;
}

.sidebar .nav-third-level li a {
  padding-left: 52px;
}

@media ( min-width: 768px) {
  .sidebar {
    z-index: 1;
    position: absolute;
    width: 250px;
    margin-top: 51px;
  }
  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
    margin-left: auto;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



</head>

<body>

  <nav class="navbar navbar-default" role="navigation">

    <div class="navbar-header" style="padding: 0px; margin: 0px">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    				<span class="icon-bar"></span> <span class="icon-bar"></span> <span
    					class="icon-bar"></span>
    			</button>
      <a class="navbar-brand" href="index.html">Headers</a>
    </div>


    <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse collapse">

        <ul class="nav" id="side-menu">


          <li class="menu-bar-list-item"><a target="_self" data-toggle="collapse" data-target="#toggleDemo7" data-parent="#sidenav01" class="collapsed"> Profile <span
    							class="caret pull-right"></span>
    					</a>
            <div class="collapse" id="toggleDemo7" style="height: 0px;">
              <ul class="nav nav-list">
                <li><a href="#">My Profile</a></li>
                <li><a [routerLink]="['/login']">Logout</a></li>
              </ul>
            </div>
          </li>

          <li class="menu-bar-list-item"><a target="_self" data-toggle="collapse" data-target="#toggleDemo3" data-parent="#sidenav01" class="collapsed"> Others <span
    							class="caret pull-right"></span>
    					</a>
            <div class="collapse" id="toggleDemo3" style="height: 0px;">
              <ul class="nav nav-list">
                <li><a href="#">HolyDays Calendar</a></li>
                <li><a href="#">suggestions & FeedBack</a></li>
                <li><a href="#">Bulletin Board</a></li>
                <li><a href="#">Contact us</a></li>

              </ul>
            </div>
          </li>

        </ul>

      </div>
    </div>
    <!-- /.navbar-collapse -->
  </nav>

</body>

</html>

请查看更新的代码，它将通过在下面提到的div中添加collapse类来解决

<div class="sidebar-nav navbar-collapse collapse">
相关问题
最新问题