<ul> <li> horizontal(가로) 드롭다운 메뉴 만들기: CSS와 애니메이션 활용

HTML&CSS

by 코드공작소 2024. 1. 8. 16:32

ul li 가로 메뉴 만들기

- 뉴 기본 구조 설정
<ul>과 <li>를 활용하여 메뉴 구조를 잡습니다.
기본적인 스타일링과 마우스 이벤트에 대한 초기 설정을 합니다.

- 서브메뉴 디자인과 애니메이션 추가
서브메뉴를 감싸는 <div> 요소를 추가하여 위치와 스타일을 지정합니다.
CSS의 opacity와 visibility 속성을 활용하여 서브메뉴를 부드럽게 나타내고 사라지게 합니다.
마우스 오버 시 fadeIn 애니메이션을, 사라질 때 fadeOut 애니메이션을 적용합니다.

- 메뉴 아이템 선택 및 효과 추가
JavaScript를 사용하여 메뉴 아이템을 클릭할 때 선택된 상태를 관리합니다.
선택된 메뉴 아이템 및 서브메뉴에 색상 및 텍스트 효과를 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dropdown Menu Template</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
    }

    nav {
      background-color: #444;
      display: flex;
      justify-content: space-around;
      padding: 10px;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
    }

    li {
      display: inline-block;
      margin-right: 20px;
      position: relative;
    }

    a {
      color: #fff;
      text-decoration: none;
      padding: 10px;
      display: block;
    }

    /* Submenu Styling */
    .submenu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #555;
      min-width: 150px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.5s, transform 0.5s;
      transform: translateY(-20px);
    }

    li:hover .submenu {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      animation: fadeInDown 0.5s ease-out;
    }

    li:not(:hover) .submenu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(-20px);
      transition: opacity 0.5s, transform 0.5s;
      animation: none;
      animation: fadeOutUp 0.5s ease-in;
    }

    @keyframes fadeInDown {
      from {
        transform: translateY(-20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @keyframes fadeOutUp {
      from {
        transform: translateY(0);
        opacity: 1;
      }
      to {
        transform: translateY(-20px);
        opacity: 0;
      }
    }

    .submenu a {
      color: #fff;
      padding: 8px;
      display: block;
      text-decoration: none;
      transition: color 0.3s;
    }

    /* Text color on submenu item hover */
    .submenu a:hover {
      color: #ffcc00;
    }

    /* Background color on hover */
    li:hover a {
      background-color: #555;
    }

    /* Background color when selected */
    li.active a, .submenu li.active a {
      background-color: #555;
    }
  </style>
</head>
<body>

  <header>
    <h1>Website Title</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li class="has-submenu">
        <a href="#">Services</a>
        <!-- Submenu -->
        <ul class="submenu">
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Graphic Design</a></li>
          <li><a href="#">SEO</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Portfolio</a>
        <!-- Submenu -->
        <ul class="submenu">
          <li><a href="#">Project 1</a></li>
          <li><a href="#">Project 2</a></li>
          <li><a href="#">Project 3</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <script>
    // JavaScript to handle menu item selection
    const menuItems = document.querySelectorAll('.has-submenu');

    menuItems.forEach(item => {
      item.addEventListener('click', () => {
        menuItems.forEach(i => i.classList.remove('active'));
        item.classList.add('active');
      });
    });
  </script>

</body>
</html>

저작자표시

'HTML&CSS' 카테고리의 다른 글

CSS 최적화 방법 (9)	2024.01.10
CSS로 텍스트 '...' 처리하는 방법 (2)	2024.01.08
HTML를 활용한 효과적인 레이아웃 템플릿 9가지 (3)	2024.01.07
CSS에서의 최신 기능들: CSS Grid Level 2 및 Subgrid (0)	2024.01.07
CSS와 Web Accessibility: 접근성을 고려한 디자인 (3)	2024.01.07