Боковая навигация - PullRequest
Новая
       4

Боковая навигация

2 голосов
/ 24 марта 2019

Моя боковая навигация не работает должным образом.

Что должен делать код

  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>

Ответы [ 2 ]

1 голос
/ 24 марта 2019

Сделать .side-nav > .side-nav-top > a flexbox (для предотвращения переноса текста под значком) и добавить white-space: nowrap для предотвращения переноса текста текста ссылки .

Теперь вместо переключения отображения текста меню вы можете добавить overflow: hidden к side-nav его самой - см. Демонстрацию ниже: 

nav {
  background-color: #f5f5f5;
}
nav a {
  text-decoration: none;
  color: black;
}
.side-nav {
  position: fixed;
  top: 54px;
  left: 0;
  bottom: 0;
  width: 3.5rem; /* percentage might not be a good idea here */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: width 2s;
  overflow: hidden; /* added overflow here*/
} 
.side-nav > .side-nav-top > a { /* made a flexbox */
  display: flex;
  align-items: center; /* aligns the icon and link text vertically */
  white-space: nowrap; /* prevent text wrapping */
}
.side-nav>.side-nav-top {
  display: flex;
  flex-direction: column;
}
.side-nav>.side-nav-top>a>span:first-child {
  margin: 5px 20px 5px 20px;
}
.side-nav i {
  color: #909090;
}
.side-nav:hover {
  width: 40%;
}
<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">
  
  <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>
1 голос
/ 24 марта 2019

Такое решение может работать для вас.

Вы должны добавить 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...