CSS의 반응형 Navbar

20323 단어 csswebdevhtmljavascript
Hello Guys 오늘은 HTML, CSS 및 Javascript를 사용하여 반응형 탐색 모음을 만드는 방법을 보여 드리겠습니다.

시작하자...

HTML -




<nav class="navbar">
      <div class="brand-title">Brand Name</div>
      <a href="#" class="toggle-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="navbar-links">
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
        </ul>
      </div>
    </nav>


  • 우리는 모든 것을 nav 태그로 감싸고 navbar 클래스를 제공했습니다.
  • 그런 다음 로고 또는 브랜드 이름에 대한 1개의 div, 작은 화면 또는 모바일 보기의 토글 버튼으로 사용하기 위한 1개의 앵커 태그를 생성하고 그 안에 햄버거 아이콘용 막대를 생성하기 위해 3개의 span 태그를 생성했습니다. navbar의 링크를 포함하는 탐색 링크용 div.

    • CSS -




    * {
    box-sizing:border-box;
}

body {
    margin: 0;
    padding: 0;
}


  • box-sizing 속성을 사용하면 요소의 전체 너비와 높이에 안쪽 여백과 테두리를 포함할 수 있습니다.
  • 본문의 기본 패딩 및 여백을 제거합니다.

    • .navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:#333;
    color:white;
}


  • navbar를 유연하게 만들고 그들 사이에 공간을 제공하여 브랜드 이름이 한쪽 끝에 왼쪽에 있고 링크가 다른 쪽 끝에 오른쪽에 있습니다.
  • 항목 정렬은 항목을 세로로 정렬합니다.

    • .brand-title{
    font-size: 1.5rem;
    margin:.5rem
}

.navbar-links ul{
    margin:0;
    padding: 0;
    display:flex;
}

.navbar-links li{
    list-style: none;
}

.navbar-links li a{
    text-decoration: none;
    color: white;
    padding:1rem;
    display:block
}

.navbar-links li:hover{
    background-color:#555;
}


  • 브랜드 요소의 스타일을 지정하고 ul 태그의 기본 여백과 안쪽 여백을 제거하고 유연하게 표시되도록 합니다.
  • 링크 및 앵커 태그의 스타일을 지정하고 기본 동작을 제거합니다.

    • .toggle-button{
    position:absolute;
    top:.75rem;
    right: 1rem;
    display:none;
    flex-direction:column;
    justify-content: space-between;
    width:30px;
    height:21px;
}

.toggle-button .bar{
    height:3px;
    width:100%;
    background-color:white;
    border-radius:10px;
}


  • 토글 버튼의 ​​스타일을 지정하여 수직 기둥으로 만들어 내부의 막대가 수직으로 정렬되도록 합니다.
  • 오른쪽 상단 끝에 고정되도록 절대 위치를 지정합니다.
  • display: 더 큰 화면에서 숨길 수 없습니다.
  • 토글 버튼 내부의 막대 스타일을 지정합니다.

    • @media screen and (max-width:600px) {
    .toggle-button{
        display:flex;
    }
    .navbar-links{
        display:none;
        width: 100%;
    }
}


  • 미디어 쿼리를 사용하여 600px보다 작은 화면을 대상으로 함
  • 화면 크기가 600px보다 작은 경우 토글 버튼이 유연해집니다.
  • 화면 크기가 600px보다 작은 경우 탐색 모음 링크를 숨깁니다.

    • @media screen and (max-width:600px) {
.
.
.navbar{
        flex-direction:column;
        align-items: flex-start;
    }
    .navbar-links ul { 
        flex-direction:column;
        width: 100%;
    }
    .navbar-links ul li {
        text-align:center;
    }

    .navbar-links li a {
        padding: .7rem 1rem;
    }
}


  • 플렉스 방향을 사용하여 Navbar를 세로로 정렬합니다.
  • 플렉스 방향을 사용하여 링크를 세로로 정렬하고 요소 너비를 100%로 만들어 전체 행을 덮도록 합니다.
  • li 요소에 대한 text-align 속성을 사용하여 링크를 중앙에 맞춥니다.

    • @media screen and (max-width:600px) {
.
.
 .navbar-links.active{
        display:flex
   }
}


  • 이 활성 클래스 스타일을 생성하여 javascript를 사용하여 토글하면 이 클래스가 토글되면 작은 화면의 탐색 모음에 드롭다운 효과가 나타납니다.

    • 완전한 CSS 코드 -




    * {
    box-sizing:border-box;
}

body {
    margin: 0;
    padding: 0;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:#333;
    color:white;
}

.brand-title{
    font-size: 1.5rem;
    margin:.5rem
}

.navbar-links ul{
    margin:0;
    padding: 0;
    display:flex;
}

.navbar-links li{
    list-style: none;
}

.navbar-links li a{
    text-decoration: none;
    color: white;
    padding:1rem;
    display:block
}

.navbar-links li:hover{
    background-color:#555;
}

.toggle-button{
    position:absolute;
    top:.75rem;
    right: 1rem;
    display:none;
    flex-direction:column;
    justify-content: space-between;
    width:30px;
    height:21px;
}

.toggle-button .bar{
    height:3px;
    width:100%;
    background-color:white;
    border-radius:10px;
}

@media screen and (max-width:600px) {
    .toggle-button{
        display:flex;
    }
    .navbar-links{
        display:none;
        width: 100%;
    }

    .navbar{
        flex-direction:column;
        align-items: flex-start;
    }
    .navbar-links ul { 
        flex-direction:column;
        width: 100%;
    }
    .navbar-links ul li {
        text-align:center;
    }

    .navbar-links li a {
        padding: .7rem 1rem;
    }

    .navbar-links.active{
        display:flex
    }

}


    자바스크립트 -




    const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("navbar-links")[0];

toggleButton.addEventListener("click",() => {
    navbarLinks.classList.toggle("active")
})


  • DOM을 사용하여 토글 버튼 및 탐색 모음 링크를 대상으로 지정합니다.
  • 그런 다음 토글 버튼에 클릭 이벤트를 추가하고 toggle() 메서드를 사용하여 "활성"클래스를 토글합니다.

    • 이 게시물을 확인해 주셔서 감사합니다.

    저에게 연락하실 수 있습니다 -
    인스 타 그램 -
    링크드인 -
    이메일 - [email protected]

    ^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
    ☕ --> https://www.buymeacoffee.com/waaduheck <--

    이 게시물도 확인하십시오.
    카탈리나에서 MT4 이동
    가져오기를 사용하여 웹 요청 만들기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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