>

내 측면 탐색이 예상대로 작동하지 않습니다.

코드의 기능

<올>
  • 호버링하지 않은 경우에만 아이콘을 표시합니다.

  • 전체 링크가 표시 될 때까지 한 번에 한 문자 씩 표시하여 링크를 가리 키십시오.

  • 호버 상태가 더 이상 활성화되지 않으면 한 번에 한 문자 씩 링크가 사라져 더 이상 표시되지 않습니다.

  • 나는 단순히 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>
    
    

    • 답변 # 1

      와이즈 비즈 만들기  아이콘 아래에링크 텍스트줄 바꿈을 방지하기위한 flexbox 및 .side-nav > .side-nav-top > a 추가  링크 텍스트텍스트 줄 바꿈을 방지합니다.

      이제 메뉴 텍스트 표시를 토글하는 대신 white-space: nowrap 를 추가 할 수 있습니다   overflow: hidden 에  itslef-아래 데모 참조 :

      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%;
      }
      
      

    • 답변 # 2

      이와 같은 솔루션이 도움이 될 수 있습니다.

      <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> 를 추가해야합니다  당신의 전체 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>

  • 이전 android - 스트로크를 변경하지 않고 setColorFilter를 Button으로 설정
  • 다음 node.js - js 요청 문제를 표현하고 쿼리 키에 대해 여러 값/컬렉션을 전달하십시오