플로팅 아이콘 메뉴 만들기

8159 단어 tutorialhtmlcss
오늘 포스트에서는 웹 프로젝트를 위한 아이콘 기반 플로팅 내비게이션 메뉴를 만드는 것이 얼마나 쉬운지 보여주고 싶었습니다.

비디오 튜토리얼



비디오 형식의 이 자습서를 선호하는 경우 내 YouTube 채널인 dcode에서 확인하십시오.


1단계: 아이콘 라이브러리 선택



프로젝트에 이미 아이콘 라이브러리를 사용하고 있다면 이 단계를 건너뛰어도 됩니다. 그렇지 않은 경우 설정 및 사용이 매우 쉽기 때문에 Google Material Icons과 같은 것을 사용하는 것이 좋습니다.

라이브러리를 <head>에 포함하여 라이브러리 사용을 시작할 수 있습니다.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

2단계: HTML 추가



메뉴를 나타내기 위해 <nav> 클래스와 함께 .nav 요소를 사용할 것입니다. 그 안에 아이콘 링크를 지정할 수 있습니다.

<nav class="nav">
    <a href="#" class="nav__link">
        <i class="material-icons nav__icon">dashboard</i>
        <span class="nav__text">Dashboard</span>
    </a>
    <!-- ... and more links below -->
</nav>

보시다시피 <a class="nav__link">를 사용하는 각 링크에 대해 다음 요소가 있습니다.
  • <i class="material-icons nav__icon">[icon_name]</i> - 선택한 아이콘을 표시합니다. 이 경우에는 dashboard 아이콘을 사용하기로 했습니다. 더 많은 아이콘here을 찾을 수 있습니다.
  • <span class="nav__text"> - 아이콘 아래에 표시할 텍스트를 선택하기만 하면 됩니다.

    • HTML을 추가한 후에는 다음과 같아야 합니다.

    3단계: CSS 추가



    여기에 모든 것이 제자리에 있을 것입니다. CSS를 사용하여 메뉴를 페이지 하단에 배치하고 다른 모든 것 위에 떠 있게 할 것입니다.

    메뉴 스타일링


    position: fixed를 사용하면 메뉴가 페이지의 다른 모든 항목 위에 떠 있고 bottom: 0는 메뉴를 맨 아래로 이동합니다.

    body {
    margin: 0 0 55px 0;
}

.nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
}

    다음 단계에서 개별 아이콘 링크를 쉽게 배치할 수 있도록 여기에서 display: flex를 사용하고 있으며, overflow-x: auto를 사용하면 더 작은 너비에 너무 많은 아이콘이 있는 경우 사용자가 왼쪽 및 오른쪽으로 스크롤할 수 있습니다. 장치.
    margin의 <body>를 알아차리셨을 수도 있습니다. 이것은 하단에 55px로 설정되어 있으며, 이는 메뉴에 대해 설정된 높이와 동일하며 기존 본문 내용이 그 아래에 숨겨지지 않도록 합니다. .

    아이콘 링크 스타일 지정



    이것은 확실히 튜토리얼에서 가장 큰 규칙 세트가 될 것이므로 CSS를 작성한 다음 중요한 규칙 세트를 개별적으로 살펴보겠습니다.

    .nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    font-size: 13px;
    color: #444444;
    text-decoration: none;
}

.nav__link:hover {
    background-color: #eeeeee;
}

    중요한 속성을 살펴보겠습니다.
  • display: flex - 아이콘과 레이블을 중앙에 정렬할 수 있으며 align-items: center; 및 justify-content: centre와 함께 작동합니다.
  • flex-grow: 1 - 각 아이콘이 동일한 너비를 차지하도록 합니다
    • .
  • flex-direction: column - 아이콘과 레이블이 나란히 있지 않고 서로의 위에 있는지 확인합니다
    • .
  • white-space: nowrap - 레이블이 새 줄로 흐르지 않도록 합니다
    • .

    이제 다음과 같은 내용이 표시됩니다.



    마무리 - "활성" 링크



    이 솔루션을 사용하면 링크를 "활성 보기/페이지"또는 이와 유사한 것으로 나타낼 수도 있습니다. CSS에 수정자 클래스를 추가해 보겠습니다.

    .nav__link--active {
    color: #009579;
}

    그런 다음 HTML의 링크 중 하나에 추가할 수 있습니다.

    <a href="/profile" class="nav__link nav__link--active">

    이것은 우리에게 다음과 같은 것을 제공합니다:



    그리고 그게 다야! 질문이나 제안이 있으시면 아래에 남겨주세요 😁
    TabNine - 인코딩 속도를 새로운 수준으로 향상
    구조의 보기 [Swift] - vol.2 (데이터 삽입, 표시까지)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage