如何使用 HTML 和 CSS 隐藏侧导航栏

Question

您好，我希望我的导航栏在我移动鼠标时自动隐藏。我想使用一个示例https://codepen.io/JFarrow/pen/fFrpg。我已经在线阅读了一些文档，但我仍然无法弄清楚如何......这是我的代码：

li .glyphicon {
    margin-right: 10px;
}

/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
    background-color: #4189C7;
    color: white;
}

/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

@media (min-width: 768px) {
    /* On small screens, convert the nav menu to a vertical sidebar */
    .main-nav {
        height: 100%;
        width: calc(25% - 20px);
    }
    .navbar {
        border-radius: 0px;
        border-width: 0px;
        height: 100%;
    }
    .navbar-header {
        float: none;
    }
    .navbar-collapse {
        border-top: 1px solid #444;
        padding: 0px;
    }
    .navbar ul {
        float: none;
    }
    .navbar li {
        float: none;
        font-size: 15px;
        margin: 6px;
    }
    .navbar li a {
        padding: 10px 16px;
        border-radius: 4px;
    }
    .navbar a {
        /* If a menu item's text is too long, truncate it */
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">


<div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-header'>
            <a class='navbar-brand' [routerLink]="['/home']">Navbar</a>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                <span  (click)="isCollapsed = !isCollapsed">Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
        </div>
        <div class='clearfix'></div>
        <div class='navbar-collapse collapse' >
                <ul class='nav navbar-nav'>
                    <li [routerLinkActive]="['link-active']">
                        <a [routerLink]="['/home']">
                            <span class='glyphicon glyphicon-home'></span> Home
                        </a>
                    </li>
                    <li [routerLinkActive]="['link-active']">
                        <a [routerLink]="['/login']">
                            <span class='glyphicon glyphicon-log-in'></span> Log In
                        </a>
                    </li>
                    <li [routerLinkActive]="['link-active']">
                        <a [routerLink]="['/margin']">
                            <span class='glyphicon glyphicon-list'></span> Report
                        </a>
                    </li>
                    <li [routerLinkActive]="['link-active']">
                        <a [routerLink]="['/smart-table']">
                            <span class='glyphicon glyphicon-list'></span> Smart table
                        </a>
                    </li>
                </ul>
</div>
    </div>
</div>

我不确定应该在哪里添加代码。网上有关于添加js函数的代码，或者在bootstrap函数中使用一些buid，只是对我不起作用......

感谢您的帮助。

Answer 1

只需几行 CSS 即可轻松实现此效果。

首先为您的导航项标签添加一个包装器，即.nav-label：

...
<span class='glyphicon glyphicon-home'></span> <span class="nav-label">Home</span>
...

现在通过在悬停时为.main-nav 使用不同的width，应用transition 效果并默认隐藏.nav-labels：

.main-nav {
  height: 100%;
  width: 100px;
  transition: all .1s linear;
}
.main-nav:hover {
  width: calc(25% - 20px)
}
.main-nav:hover .nav-label {
  display: inline-block;
}

这是您的代码的工作示例（以全屏模式查看以查看侧边栏操作）：

li .glyphicon {
  margin-right: 10px;
}


/* Highlighting rules for nav menu items */

li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
  background-color: #4189C7;
  color: white;
}


/* Keep the nav menu independent of scrolling and on top of other items */

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.main-nav .navbar-nav>li {
  float: none;
}

.nav-label {
  display: none;
  margin-left: 2em;
}

@media (min-width: 768px) {
  /* On small screens, convert the nav menu to a vertical sidebar */
  .main-nav {
    height: 100%;
    width: 100px;
    transition: all .1s linear;
  }
  .main-nav:hover {
    width: calc(25% - 20px)
  }
  .main-nav:hover .nav-label {
    display: inline-block;
  }
  .navbar {
    border-radius: 0px;
    border-width: 0px;
    height: 100%;
  }
  .navbar-collapse {
    border-top: 1px solid #444;
    padding: 0px;
  }
  .navbar li {
    display: block;
    font-size: 15px;
    margin: 6px;
  }
  .navbar li a {
    display: block;
    padding: 10px 16px;
    border-radius: 4px;
  }
  .navbar a {
    /* If a menu item's text is too long, truncate it */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<div class='main-nav'>
  <div class='navbar navbar-inverse'>
    <div class='navbar-header'>
      <a class='navbar-brand' [routerLink]="['/home']">Navbar</a>
      <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
          <span  (click)="isCollapsed = !isCollapsed">Toggle navigation</span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
      </button>
    </div>
    <div class='clearfix'></div>
    <div class='navbar-collapse collapse'>
      <ul class='nav navbar-nav'>
        <li [routerLinkActive]="['link-active']">
          <a [routerLink]="['/home']">
            <span class='glyphicon glyphicon-home'></span> <span class="nav-label">Home</span>
          </a>
        </li>
        <li [routerLinkActive]="['link-active']">
          <a [routerLink]="['/login']">
            <span class='glyphicon glyphicon-log-in'></span> <span class="nav-label">Log In</span>
          </a>
        </li>
        <li [routerLinkActive]="['link-active']">
          <a [routerLink]="['/margin']">
            <span class='glyphicon glyphicon-list'></span> <span class="nav-label">Report</span>
          </a>
        </li>
        <li [routerLinkActive]="['link-active']">
          <a [routerLink]="['/smart-table']">
            <span class='glyphicon glyphicon-list'></span> <span class="nav-label">Smart table</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

您需要查找 mouseenter / mouseleave 事件并向导航添加一些类。

例子：

$(document).on('mouseenter', '.main-nav', function() {
  $(this).addClass('expanded'); //Add Class for full nav
});

$(document).on('mouseleave', '.main-nav', function() {
  $(this).removeClass('expanded');  //Return to small nav
});

这是使用 Javascript 的解决方案，或者您可以使用简单的 CSS 解决方案，只需更改导航部分的显示/宽度。