반응형 탐색 메뉴 모음에 대한 궁극적인 가이드 - 반응형 메뉴 모음을 단계별로 만드는 방법!

56712 단어 javascripthtmlcss
탐색 모음은 웹 페이지를 탐색하는 데 도움이 되는 사용자 인터페이스의 중요한 부분입니다. HTML 표준에 포함될 정도로 중요해졌습니다. 그러나 많은 사람들이 사용하는 동안 혼란스러워 하며 반응형 탐색 모음과 같이 사용할 수 있는 몇 가지 옵션이 있다는 사실을 종종 간과합니다. 웹사이트에서 반응형 메뉴바를 만드는 방법에 대한 단계별 지침이 포함된 인포그래픽이 있습니다.
이 기사에서는 반응형 탐색 모음을 단계별로 만드는 방법을 보여 드리겠습니다. 반응형 탐색 모음은 기능 손실 없이 사용 가능한 화면 크기에 맞게 조정되는 탐색 모음입니다. 그러기 위해서는 디자인의 각 부분과 위치 및 크기 측면에서 어떻게 작동하는지 알아야 합니다.

All Responsive Navigation Menu Bar check github

첫 번째 단계 1: 확장자가 .html인 파일을 만듭니다.
HTML(Hypertext Markup Language)이 1994년에 처음 소개되었을 때 컴퓨터에서 읽고 탐색할 수 있는 간단한 웹 사이트를 만드는 데 사용되었습니다. 그러나 1995년 인터넷과 월드 와이드 웹의 출현으로 그 사용이 기하급수적으로 확대되었습니다. 오늘날 HTML은 모든 웹사이트를 하나로 묶는 역할을 하므로 일반 텍스트에서 사람들이 컴퓨터나 모바일 장치에서 볼 수 있는 대화형 웹 페이지로 만드는 것이기 때문에 모든 웹사이트에 필수적입니다.

HTML의 목표는 인터넷에 연결된 모든 사용자가 액세스할 수 있는 문서를 만드는 것이었습니다. 그 이후로 표준이 존재했지만 일부 구현은 기술 및 보안 측면에서 뒤쳐져 있습니다. 우리 웹사이트sand blasting machine 모든 페이지는 PHP 프로그래밍 언어의 html 태그를 사용하여 설계되었습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="header-main">
                <div class="logo">
                    <a href="#">Logo</a>
                </div>
                <div class="open-nav-menu">
                    <span></span>
                </div>
                <div class="menu-overlay"></div>
                <!-- navigation menu start -->
                <nav class="nav-menu">
                    <div class="close-nav-menu">
                        <img src="/image/OIP.png" alt="close">
                    </div>
                    <ul class="menu">
                        <li class="menu-item menu-item-has-children">
                            <a href="#" data-toggle="sub-menu">Home<i class="plus"></i></a>
                            <ul class="sub-menu">
                                <li class="menu-item">
                                    <a href="#">Home 1</a>
                                </li>
                                <li class="menu-item">
                                    <a href="#">Home 1</a>
                                </li>
                                <li class="menu-item">
                                    <a href="#">Home 1</a>
                                </li>
                                <li class="menu-item">
                                    <a href="#">Home 1</a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item">
                            <a href="#">About</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">Services</a>
                        </li>
                        <li class="menu-item menu-item-has-children">
                            <a href="#" data-toggle="sub-menu">Pages <i class="plus"></i></a>
                            <ul class="sub-menu">
                                <li class="menu-item">
                                    <a href="#">Page 1</a>
                                </li>
                                <li class="menu-item">
                                    <a href="#">Page 1</a>
                                </li>
                                <li class="menu-item">
                                    <a href="#">Page 1</a>
                                </li>
                                <li class="menu-item">
                                    <a href="#">Page 1</a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item">
                            <a href="#">News</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </nav>

                <!-- navigation menu end -->
            </div>
        </div>
    </header>
    <section class="home-section">

    </section>
    <script src="js/javascript.js"></script>
</body>
</html>


sponsored by shot blasting machine

2 단계:
style.css 파일 생성

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}
body.hidden-scrolling{
    overflow-y: hidden;
}
:root{
    --primary-color: #e91e63;
    --secondary-color: #34a4ef;
    --black-color: #000000;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
.container{
    max-width: 1170px;   
    margin: auto;
}
.header-main{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    border-radius: 4px;
}
.header .logo{    
    padding: 0 15px;
}
.header .logo a{
    font-size: 30px;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 600;
}
.header .nav-menu{

    padding: 0 15px;
}
.header .menu > .menu-item{
    display: inline-block; 
    margin-left: 30px;
    position: relative;
}
.header .menu > .menu-item > a{
    display: block;
    padding: 12px 0;
    font-size: 16px;
    color: var( --black-color);
    text-transform: capitalize;
    font-weight: 600;
    transition: all 0.3s ease;
}
.header .menu > .menu-item > a .plus{
    display: inline-block;
    height: 12px;
    width: 12px;    
    position: relative;
    margin-left: 5px;
    pointer-events: none;
}
.header .menu > .menu-item > a .plus::before,
.header .menu > .menu-item > a .plus::after{
    content:  '';
    position: absolute;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    background-color: var(--black-color);
    height: 2px;
    width: 100%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}
.header .menu > .menu-item-has-children.active > a .plus::after{
    transform: translate(-50%, -50%) rotate(0deg);
}
.header .menu > .menu-item:hover > a .plus::before,
.header .menu > .menu-item:hover > a .plus::after{
    background-color: var(--primary-color);
}

.header .menu > .menu-item > a .plus::after{
    transform: translate(-50%, -50%) rotate(-90deg) 
}
.header .menu > .menu-item > .sub-menu >.menu-item > a:hover,
.header .menu > .menu-item:hover > a{
    color: var(--primary-color);
}
.header .menu > .menu-item > .sub-menu{
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    width: 220px;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #fff;
    padding: 10px 0;
    border-top: 2px solid var(--primary-color);
    transform: translateY(10px);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}
@media(min-width: 992px)
{
    .header .menu > .menu-item-has-children:hover > .sub-menu{
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .header .menu > .menu-item-has-children:hover > a .plus::after{
        transform: translate(-50%, -50%) rotate(0deg); 
    }
}

.header .menu > .menu-item > .sub-menu >.menu-item{
    display: block;
}
.header .menu > .menu-item > .sub-menu >.menu-item > a{
    display: block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--black-color);
    transition: all 0.3s ease;
    text-transform: capitalize;
}
.header{
    position: absolute;
    padding: 15px;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99;

}
.header .open-nav-menu{
    height: 34px;
    width: 40px;

    margin-right: 15px;

    align-items: center;
    display: none;
    justify-content: center;
    cursor: pointer;
}
.header .open-nav-menu span{
    display: block;
    height: 3px;
    background-color: var(--black-color);
    width: 24px;
    position: relative;
}
.header .open-nav-menu span::before,
.header .open-nav-menu span::after{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    background-color: var(--black-color);
}
.header .open-nav-menu span::before{
    top: -7px;
}
.header .open-nav-menu span::after{
    top: 7px;
}
.header .close-nav-menu{
    height: 40px;
    width: 40px;
    background-color: #fff;
    margin: 0 0 15px 15px;
    display: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.header .close-nav-menu img{
   width: 16px;
}
.header .menu-overlay{
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}
.header .menu-overlay.active{
    visibility: visible;
    opacity: 1;
}
/* Home Section */
.home-section{
    width: 100%;
    min-height: 100vh;
    display: block;
    background: url(./image/bggirl.png);
    background-position: center top;
    background-size: cover;
}

/* responsive */
@media (max-width: 991px)
{

    .header .nav-menu{
        position: fixed;
        right: -280px;
        visibility: hidden;
        top: 0;
        width: 280px;
        height: 100%;
        overflow-y: auto;
        background-color: #222222;
        z-index: 1000;
        padding: 15px 0;
        transition: all 0.5s ease;
    }
    .header .nav-menu.open{
        visibility: visible;
        /* opacity: 1; */
        right: 0px !important;
        /* display: block; */
    }
    .header .menu > .menu-item{
        display: block;
        margin: 0;
    }
    .header .menu > .menu-item-has-children > a{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header .menu > .menu-item > a{
        color: #fff;
        padding: 12px 15px;
        border-bottom: 1px solid #333333;
    }
    .header .menu > .menu-item:first-child > a{
        border-top: 1px solid #333333;
    }
    .header .menu > .menu-item > a .plus::before,
    .header .menu > .menu-item > a .plus::after{
        background-color: #fff;
    }
    .header .menu > .menu-item > .sub-menu{
        width: 100%;
        position: relative;
        opacity: 1;
        visibility: visible;
        border: none;
        background-color: transparent;
        box-shadow: none;
        transform: translateY(0px);
        padding: 0px;
        left: auto;
        top: auto;
        max-height: 0;
        overflow: hidden;
    }
    .header .menu > .menu-item > .sub-menu > .menu-item > a{
        padding: 12px 45px;
        color: #fff;
        border-bottom: 1px solid #333333;
    }
    .header .close-nav-menu,
    .header .open-nav-menu{
        display: flex;
    }
}


3단계:
폴더(프로젝트 폴더) js/javascript.js 안에 파일 생성

(() => {

    const openNavMenu = document.querySelector(".open-nav-menu"),
    closeNavMenu = document.querySelector(".close-nav-menu"),
    navMenu = document.querySelector(".nav-menu");
    menuOverlay = document.querySelector(".menu-overlay"),
    mediaSize = 991;

    openNavMenu.addEventListener("click", toggleNav);
    closeNavMenu.addEventListener("click", toggleNav);
    // close the navbar by clicking outside
    menuOverlay.addEventListener("click", toggleNav);

    function toggleNav(){
        navMenu.classList.toggle("open");
        menuOverlay.classList.toggle("active");
        document.body.classList.toggle("hidden-scrolling");
    }

    navMenu.addEventListener("click",(event) =>{
        if(event.target.hasAttribute("data-toggle") && 
          window.innerWidth <= mediaSize){
              //prevent default anchor click behavior
            event.preventDefault();
            const menuItemHasChildren = event.target.parentElement;
            // if menuItemHasChildren is already expaded, collapse it
            if(menuItemHasChildren.classList.contains("active")){
                collapseSubMenu();
            }
            else{

                // collapse existing expanded manuItemHasChildren
                if(navMenu.querySelector(".menu-item-has-children.active"))
                {
                    collapseSubMenu();
                }
                // expand new menuItemHasChildren
                menuItemHasChildren.classList.add("active");
                const subMenu = menuItemHasChildren.querySelector(".sub-menu");
                subMenu.style.maxHeight = subMenu.scrollHeight + "px";
            }
        }

    });

    function  collapseSubMenu(){
        navMenu.querySelector(".menu-item-has-children.active .sub-menu")
        .removeAttribute("style");
        navMenu.querySelector(".menu-item-has-children.active")
        .classList.remove("active");
    }

    function resizefix(){
        // if navmenu is open , close it 
        if(navMenu.classList.contains("open")){
            toggleNav();
        }
        // if menuItemHasChildren is expanded , collapse it
        if(navMenu.querySelector(".menu-item-has-children.active")){
            collapseSubMenu();
        }
    }
    window.addEventListener("resize", function(){
        if(this.innerWidth > mediaSize){
            resizefix();
        }
    });
})();


반응형 탐색 모음이란 무엇입니까?



반응형 탐색 모음은 보고 있는 장치에 따라 크기, 모양 및 스타일을 변경하도록 설계되었습니다. 또한 모든 사용자가 웹사이트에 액세스할 수 있도록 모든 화면 크기에 적응할 수 있습니다. 체크portable shot blasting machine

반응형 탐색 모음은 머리글과 바닥글의 두 부분으로 구성됩니다. 머리글에는 로고와 브랜드가 표시되고 바닥글에는 사이트 링크 또는 연락처 정보와 같은 정보가 표시됩니다.
docker tomcat container에 war파일 배포하기
React Native 개발환경 세팅(Mac)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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