时间戳

首页 > 解决方案 > 可悬停的侧边导航

html - 可悬停的侧边导航

问题描述

我的侧面导航无法按预期工作。

代码应该做什么

  1. 仅在未悬停时显示图标。

  2. 悬停时通过一次显示一个字母来显示链接，直到整个链接可见。

  3. 当悬停状态不再处于活动状态时，链接应该一次消失一个字母，不再可见。

我虽然通过简单地添加overflow-x属性会给出我想要的结果，但它不起作用。

怎么了

链接显示在图标下方，直到导航的宽度足够宽以使链接与图标正确放置在同一行上。

当悬停状态不再处于活动状态时，链接会立即消失。

nav {
  background-color: #f5f5f5;
}

nav a {
  text-decoration: none;
  color: black;
}

.side-nav {
  position: fixed;
  top: 54px;
  left: 0;
  bottom: 0;
  width: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: width 2s;
}

.side-nav>.side-nav-top {
  display: flex;
  flex-direction: column;
}

.side-nav>.side-nav-top>a>span:first-child {
  display: inline-block;
  margin: 5px 20px 5px 20px;
  width: 20px;
}

.side-nav i {
  color: #909090;
}

.side-nav:hover {
  width: 40%;
}

.hide {
  overflow-x: hidden;
  display: none;
}

.side-nav:hover .hide {
  display: inline;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link rel="stylesheet" href="/css/index.css">
</head>

<body>
  <nav class="side-nav">
    <div class="side-nav-top">
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
    </div>
  </nav>
</body>

</html>

标签： htmlcssflexbox

解决方案

像这样的解决方案可能对您有用。

您应该添加overflow: hidden整个.side-nav并禁用文本换行a（或flex使用min-width）

nav {
  background-color: #f5f5f5;
}

nav a {
  text-decoration: none;
  color: black;
}

.side-nav {
  position: fixed;
  top: 54px;
  left: 0;
  bottom: 0;
  width: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: width 2s;
  overflow: hidden;
}

.side-nav>.side-nav-top {
  display: flex;
  flex-direction: column;
}

.side-nav a {
  white-space: nowrap;
}

.side-nav>.side-nav-top>a>span:first-child {
  display: inline-block;
  margin: 5px 20px 5px 20px;
  width: 20px;
}

.side-nav i {
  color: #909090;
}

.side-nav:hover {
  width: 40%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link rel="stylesheet" href="/css/index.css">
</head>

<body>
  <nav class="side-nav">
    <div class="side-nav-top">
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
      <a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
    </div>
  </nav>
</body>

</html>

推荐阅读