돌아온 걸 환영합니다. ✌ 이 기사에서는 HTML, CSS 및 약간의 JavaScript를 사용하여 이 아름다운 내비게이션 바를 만드는 방법을 배웁니다. 이것은 우리가 오늘 만들려는 것의 빠른 미리보기입니다. 👇



매우 쉽고 이해하기 쉽습니다. 그래서 이것을 만들어 봅시다 😉. 나는 이것을 만드는 방법을 단계별로 논의했으며 마지막에는 완전한 코드도 있습니다.

HTML 코드

<nav>
  <ul>
    <li>
      <span data-color="#3f3f64">
        <img src="./images/service-icon.png" alt="service-icon" />
        <img
          class="color-image"
          src="./images/service-icon-color.png"
          alt="service-icon"
        />
      </span>
    </li>

    <li>
      <span data-color="#794343">
        <img src="./images/support-icon.png" alt="support-icon" />
        <img
          class="color-image"
          src="./images/support-icon-color.png"
          alt="support-icon"
        />
      </span>
    </li>

    <li>
      <span data-color="#8be8ff">
        <img src="./images/home-icon.png" alt="home-icon" />
        <img
          class="color-image"
          src="./images/home-icon-color.png"
          alt="home-icon"
        />
      </span>
    </li>

    <li>
      <span data-color="#f7a11fa2">
        <img src="./images/stats-icon.png" alt="stats-icon" />
        <img
          class="color-image"
          src="./images/stats-icon-color.png"
          alt="stats-icon"
        />
      </span>
    </li>

    <li>
      <span data-color="#b33136">
        <img src="./images/feedback-icon.png" alt="feedback-icon" />
        <img
          class="color-image"
          src="./images/feedback-icon-color.png"
          alt="feedback-icon"
        />
      </span>
    </li>
  </ul>
</nav>

이것은 내비게이션 바이므로 <nav> 요소를 사용하여 생성하기로 결정했습니다. 모든 것이 <nav> 태그 안에 있으며 링크를 생성하기 위한 정렬되지 않은 목록이 있습니다.

탐색 모음용 CSS

nav {
  width: 50%;
}

nav ul {
  list-style-type: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #8395a7;
  border-radius: 10px;
}

플렉스 상자 및 justify-content: space-around를 만들어 이미지 사이에 동일한 공간을 만듭니다. list-style-type: none 글머리 기호를 제거하고 overflow: hidden 내용이 넘치지 않도록 합니다. 더 잘 보이도록 bacground-color 및 border-radius를 설정합니다. 😏

<리> 태그

<span data-color="#3f3f64">
  <img src="./images/service-icon.png" alt="service-icon" />
  <img
    class="color-image"
    src="./images/service-icon-color.png"
    alt="service-icon"
  />
</span>

이미지는 <span> 태그 안에 생성됩니다. 그리고 <span> 태그 안에 두 개의 이미지가 있는 것을 볼 수 있습니다. 하나는 흑백 이미지이고 다른 하나는 컬러 이미지입니다. data-color 태그의 <span> 속성은 JavaScript의 기능을 위해 만들어졌습니다. 이 기사의 끝에서 볼 수 있습니다.

nav ul li span {
  display: block;
  padding: 15px 0;
  cursor: pointer;
  position: relative;
}

<span> 태그의 스타일입니다. display: block 기본적으로 인라인 요소이기 때문에 패딩 값을 변경할 수 없는 경우가 아니면. position: relative 컬러 이미지는 해당 요소에 대해 절대적이기 때문입니다.

img {
  width: 70px;
}

이미지에 고정width을 설정합니다.

가장 중요한 부분은 컬러 이미지를 배치하는 것입니다. 흑백 이미지 바로 앞에 컬러 이미지를 배치합니다. 흑백 이미지가 컬러 이미지 아래에 있도록 합니다. 그런 다음 컬러 이미지가 보이지 않도록 컬러 이미지opacity: 0를 설정합니다. 그러나 여전히 컬러 이미지는 흑백 이미지 앞에 있습니다. 따라서 호버 효과는 전환으로 불투명도를 다시 가져오는 것입니다. 그리고 그것은 색이 변하는 애니메이션과 같을 것입니다 😁.

.color-image {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: all 0.25s;
}

.color-image:hover {
  opacity: 1;
}

👍 여기 프로젝트의 완전한 CSS 코드가 있습니다.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s;
  background-color: #3f3f64;
}

nav {
  width: 50%;
}

nav ul {
  list-style-type: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #8395a7;
  border-radius: 10px;
}

nav ul li span {
  display: block;
  padding: 15px 0;
  cursor: pointer;
  position: relative;
}

img {
  width: 70px;
}

.color-image {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: all 0.25s;
}

.color-image:hover {
  opacity: 1;
}

자바스크립트

자바스크립트 부분입니다. 그것은 매우 간단합니다. 아이콘을 클릭하면 문서의 background-color만 변경됩니다. (그냥 재미로 😂). 그래서 여기 있습니다...

const link = document.querySelectorAll("span"); // Getting all the span elements
const body = document.querySelector("body"); // Getting the body

link.forEach((item) => {
  item.addEventListener("click", () => {
    const bodyColor = item.dataset.color;
    body.style.backgroundColor = bodyColor;
  });
});

여기에서는 <span>를 사용하여 모든 querySelectorAll 요소를 선택했으며 <span> 요소를 클릭하면 해당 요소의 data-color 속성을 가져와 해당 색상을 문서의 bacground-color로 설정합니다.

🔗 링크

Github Repository에 대한 링크

나를 따라와

나를 따라와

flaticon에서 SVG 아이콘 다운로드

좋아요 👍를 남기고 🤙 이 기사를 친구에게 공유하여 친구들도 이 기사에서 배운 내용을 배울 수 있도록 하세요. 이에 대한 아이디어를 댓글로 💬 적어주세요. 기사에서 뵙겠습니다. :)