CSS를 사용한 호버 메뉴 - 단계별 가이드

HTML

HTML의 경우 하나의 메뉴 항목을 나타내는 "menu_item"클래스가 있는 div 요소가 있습니다.

"menu_item"내부의 첫 번째 요소는 제목이 있는 범위 요소입니다. 지금은 "쇼핑"이라는 메뉴 항목 하나만 입력하고 나중에 다른 항목을 추가하겠습니다.

제목 아래에는 "하위 메뉴"클래스가 있는 div 요소가 있습니다. 여기에 호버링할 때까지 표시되지 않는 하위 메뉴가 있습니다.

그리고 "하위 메뉴"안에 모든 하위 메뉴를 범위 요소로 배치합니다.

다음과 같아야 합니다.

<div class="menu_item">
    <span>Shop</span> <!--  title  -->

    <div class="submenu"> <!--  submenus  -->
        <span>Shirts</span>
        <span>Shoes</span>
        <span>Bags</span>
    </div>
</div>

CSS

"menu_item"클래스는 모든 것을 정렬하는 데 사용됩니다.

.menu_item {
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

"menu_item"클래스가 있는 요소 내부의 모든 범위 요소에는 1px의 투명 테두리가 있습니다. 나중에 호버에서 색상을 지정하고 높이가 변경되는 것을 원하지 않기 때문입니다.

그리고 전환, 포인터, 패딩(상하 5px, 좌우 0)을 추가하고 텍스트를 가운데에 맞춥니다.

.menu_item span {
    border: 1px solid transparent;
    transition: .3s;
    padding: 5px 0;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

마우스 오버 상태에서 '>' 선택기를 사용하여 앞에서 언급한 것처럼 직계 하위 항목인 제목과 색상의 위쪽 및 아래쪽 테두리를 선택합니다.

물론 테두리의 색상이 부드럽게 변경되도록 전환 속성을 추가할 것입니다.

.menu_item:hover > span {
    border-color: #000 transparent;
    transition: .3s;
}

모든 하위 메뉴 항목의 글꼴을 줄이고 열에 정렬합니다.

너비를 0으로 설정한 다음 마우스를 올리면 다시 80px로 설정하여 멋지게 나타나는 효과를 얻을 수 있습니다.

넘치는 것도 모두 숨기자.

그리고 물론 이전에 언급한 효과가 나타나도록 전환이 원활하게 이루어집니다.

.submenu {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    width: 0px;
    overflow: hidden;
    transition: .3s;
}

이제 호버에서 너비를 다시 80px로 설정하고 전환을 추가하기만 하면 됩니다.

.menu_item:hover .submenu {
    width: 80px;
    transition: .3s;
}

이제 커서 속성을 하위 메뉴 항목의 포인터로 설정합니다.

.submenu:hover {
    cursor: pointer;
}

그리고 각 하위 메뉴에 상단 및 하단 패딩을 추가하고 텍스트를 가운데에 맞춥니다.

.submenu span {
    padding: 5px 0;
    text-align: center;
}

호버에서 배경색을 변경하기만 하면 됩니다. 투명 검정을 설정하겠습니다.

.submenu span:hover {
    background-color: rgba(0, 0, 0, .1);
}

그리고 그게 다야.

이제 메뉴에 더 많은 요소를 추가할 수 있습니다.

하위 메뉴가 있는 메뉴 항목의 경우 동일한 html 코드를 복사하여 붙여넣기만 하면 됩니다.

하위 메뉴가 없는 메뉴 항목의 경우 제목이 있고 하위 메뉴 요소가 없는 새 menu_item을 추가하기만 하면 됩니다.

<!--  New menu item without submenus  -->
<div class="menu_item">
  <span>Home</span> <!--  title  -->
</div>

<div class="menu_item">
  <span>Shop</span> <!--  title  -->

  <div class="submenu"> <!--  submenus  -->
    <span>Shirts</span>
    <span>Shoes</span>
    <span>Bags</span>
  </div>
</div>

<!--  New menu item with submenus  -->
<div class="menu_item">
  <span>Settings</span> <!--  title  -->

  <div class="submenu"> <!--  submenus  -->
    <span>Account</span>
    <span>Password</span>
    <span>Security</span>
  </div>
</div>

비디오 자습서:

비디오 자습서here에서 전체 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다 ❤️