>source

사이드바와 축소 기능을 구현했습니다(사이드바를 최소화하기 위해) 잘 작동하지만 '접기'를 다시 클릭할 때마다최대화사이드바에서 사이드바 내부의 요소가 몇 밀리초 동안 잘못 정렬되고 로고 텍스트가 본문 위에 나타납니다. 아래 이미지를 참조하십시오

어떻게 하면 더 매끄럽게 만들고 정렬 불량을 피할 수 있습니까? 수직적 변화가 없는 선형이어야 합니다.

여러 가지를 시도해 보았지만 그것을 작동시키는 것은 불가능했습니다.

JS 바이올린 라이브 데모

  • 답변 # 1

    편집(2): 출처 코딩 연구실, 그가 한 방식은 햄버거 아이콘을 클릭할 때마다 클래스를 다른 클래스로 교체하고 다음에서 변경하는 것입니다.bx-menu-alt-right에게bx 메뉴혹은 그 반대로도.

    기본적으로 사이드바를 최소화하기 때문에너비: 0의 화면 너비에 도달하면786픽셀, 로고와 전체 사이드바 콘텐츠를 사라지게 할 수 있습니다. 이것을 참조하십시오 이 JS 바이올린, 미디어 쿼리가 true일 때 로고를 표시하지 않도록 미디어 쿼리에 일부 CSS 스타일을 추가했습니다.

    /* Google Font Link */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&
    display=swap');
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Poppins" , sans-serif;
    }
    .sidebar{
      position: fixed;
      left: 0;
      top: 0;
      height: 100%;
      width: 78px;
      background: #11101D;
      padding: 6px 14px;
      z-index: 99;
      transition: all 0.5s ease;
    }
    .sidebar.open{
      width: 250px;
    }
    .sidebar .logo-details{
      height: 60px;
      display: flex;
      align-items: center;
      position: relative;
    }
    .sidebar .logo-details .icon{
      opacity: 0;
      transition: all 0.5s ease;
    }
    .sidebar .logo-details .logo_name{
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      opacity: 0;
      transition: all 0.5s ease;
    }
    .sidebar.open .logo-details .icon,
    .sidebar.open .logo-details .logo_name{
      opacity: 1;
    }
    .sidebar .logo-details #btn{
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      font-size: 22px;
      transition: all 0.4s ease;
      font-size: 23px;
      text-align: center;
      cursor: pointer;
      transition: all 0.5s ease;
    }
    .sidebar.open .logo-details #btn{
      text-align: right;
    }
    .sidebar i{
      color: #fff;
      height: 60px;
      min-width: 50px;
      font-size: 28px;
      text-align: center;
      line-height: 60px;
    }
    .sidebar .nav-list{
      margin-top: 20px;
      height: 100%;
    }
    .sidebar li{
      position: relative;
      margin: 8px 0;
      list-style: none;
    }
    .sidebar li .tooltip{
      position: absolute;
      top: -20px;
      left: calc(100% + 15px);
      z-index: 3;
      background: #fff;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 15px;
      font-weight: 400;
      opacity: 0;
      white-space: nowrap;
      pointer-events: none;
      transition: 0s;
    }
    .sidebar li:hover .tooltip{
      opacity: 1;
      pointer-events: auto;
      transition: all 0.4s ease;
      top: 50%;
      transform: translateY(-50%);
    }
    .sidebar.open li .tooltip{
      display: none;
    }
    .sidebar input{
      font-size: 15px;
      color: #FFF;
      font-weight: 400;
      outline: none;
      height: 50px;
      width: 100%;
      width: 50px;
      border: none;
      border-radius: 12px;
      transition: all 0.5s ease;
      background: #1d1b31;
    }
    .sidebar.open input{
      padding: 0 20px 0 50px;
      width: 100%;
    }
    .sidebar .bx-search{
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      font-size: 22px;
      background: #1d1b31;
      color: #FFF;
    }
    .sidebar.open .bx-search:hover{
      background: #1d1b31;
      color: #FFF;
    }
    .sidebar .bx-search:hover{
      background: #FFF;
      color: #11101d;
    }
    .sidebar li a{
      display: flex;
      height: 100%;
      width: 100%;
      border-radius: 12px;
      align-items: center;
      text-decoration: none;
      transition: all 0.4s ease;
      background: #11101D;
    }
    .sidebar li a:hover{
      background: #FFF;
    }
    .sidebar li a .links_name{
      color: #fff;
      font-size: 15px;
      font-weight: 400;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: 0.4s;
    }
    .sidebar.open li a .links_name{
      opacity: 1;
      pointer-events: auto;
    }
    .sidebar li a:hover .links_name,
    .sidebar li a:hover i{
      transition: all 0.5s ease;
      color: #11101D;
    }
    .sidebar li i{
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      border-radius: 12px;
    }
    .sidebar li.profile{
      position: fixed;
      height: 60px;
      width: 78px;
      left: 0;
      bottom: -8px;
      padding: 10px 14px;
      background: #1d1b31;
      transition: all 0.5s ease;
      overflow: hidden;
    }
    .sidebar.open li.profile{
      width: 250px;
    }
    .sidebar li .profile-details{
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
    }
    .sidebar li img{
      height: 45px;
      width: 45px;
      object-fit: cover;
      border-radius: 6px;
      margin-right: 10px;
    }
    .sidebar li.profile .name,
    .sidebar li.profile .job{
      font-size: 15px;
      font-weight: 400;
      color: #fff;
      white-space: nowrap;
    }
    .sidebar li.profile .job{
      font-size: 12px;
    }
    .sidebar .profile #log_out{
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      background: #1d1b31;
      width: 100%;
      height: 60px;
      line-height: 60px;
      border-radius: 0px;
      transition: all 0.5s ease;
    }
    .sidebar.open .profile #log_out{
      width: 50px;
      background: none;
    }
    .home-section{
      position: relative;
      background: #E4E9F7;
      min-height: 100vh;
      top: 0;
      left: 78px;
      width: calc(100% -78px);
      transition: all 0.5s ease;
      z-index: 2;
    }
    .sidebar.open ~ .home-section{
      left: 250px;
      width: calc(100% -250px);
    }
    .home-section .text{
      display: inline-block;
      color: #11101d;
      font-size: 25px;
      font-weight: 500;
      margin: 18px
    }
    @media (max-width: 420px) {
      .sidebar li .tooltip{
        display: none;
      }
    }

                                      
    Dashboard

    @media (max-width: 768px) {
      svg, #sidebarLinks{
        display: none;
      }
    }
    

    편집: 토글 버튼을 사용하여 사이드바를 최소화 및 확장하고 아이콘을 그대로 두려면 제목/설명에서 아이콘을 분리하고 토글 버튼을 클릭할 때 제목/설명만 숨겨야 합니다. 사이드바 변경너비사용을 클릭할 때마다.스타일.속성. 어쨌든 여기이 동일한 기능에 대한 비디오 자습서입니다.

    답변 감사합니다. 하지만 여전히 예상대로 작동하지 않습니다. 제가 설명을 잘 못했을 수도 있습니다. 다음과 같은 것을 찾고 있습니다. bbbootstrap.com/snippets/… 접기 토글은 다른 위치에 있지만 개념을 쉽게 이해할 수 있을 것입니다. 정말 고맙습니다

    Cheknov2021-11-25 20:06:11

    그런 다음 제목/설명에서 아이콘을 분리하고 토글 버튼을 클릭할 때 제목/설명만 숨겨야 합니다. 몇 분 안에 퇴근할 예정이므로 답변을 편집하고 이 작업을 수행하는 방법에 대한 비디오를 링크하겠습니다. 따라서 무료 서비스를 받을 때까지 솔루션을 찾지 못한 경우 집에 돌아가면 code를 도와줄게.

    Yong Pin2021-11-25 20:06:11

    그것은 유망한 것 같습니다. 매우 감사하고 서두르지 마십시오.

    Cheknov2021-11-25 20:06:11

    @Cheknov 기본적으로 Coding Lab에서 code를 복사했습니다. 참고용으로 확인하실 수 있습니다.

    Yong Pin2021-11-24 23:17:06

    설명에 대해 대단히 감사합니다. 현재 code와 연결하는 방법이 아직 명확하지 않습니다. 모든 것을 처리하는 데 약간의 시간이 필요합니다.

    Cheknov2021-11-25 00:34:41
  • 답변 # 2

    특정 너비를 초과하면 아이콘과 텍스트가 둘러싸거나 겹칩니다. 그것은 실제로 오정렬이 아니라 기본 동작입니다.

    할 수 있는 것은 너비 범위(예: 0픽셀에서 150픽셀 너비)에 대해 사이드바 최소화/최대화에서 텍스트의 글꼴 크기를 줄이고 텍스트 글꼴 크기를 더 작게 변경하는 것입니다. 글꼴 크기로 px 또는 rem 대신 vmin, vmax를 사용할 수도 있습니다. 또한 0을 .card 클래스의 특정 값으로 변경하여 사이드바 최소 너비를 제한합니다.

    또는 접을 때만 아이콘을 표시하고 텍스트를 숨길 수 있습니다.

    지금은 텍스트를 숨기고 있지만 가장 좋은 방법은 아닌 것 같습니다. code 샘플을 제공할 수 있습니까? '바'가 겹침/오정렬 없이 이동함과 동시에 점진적으로 내용을 시각화하고 싶습니다.

    Cheknov2021-11-25 20:06:11
  • 이전 cassandra : 카산드라와 G1 가비지 컬렉터는 세계 이벤트(STW)를 중지합니다.
  • 다음 Minizinc 모델은 "MiniZinc: 내부 오류: 오류: 솔버 백엔드가 제약 조건을 처리할 수 없음: float_div"와 함께 실패합니다.