[프론트엔드] 메뉴 바 코드 샘플 (반응형)

FrontEnd Menu-bar Html, Css , Javascript Code Sample (반응형)

 

프론트 엔드 연습을 위해 메뉴바를 만들어 보았다.

Pc웹과 모바일웹(768px 기준) 반응형이고,

필요한 사람은 편하게 사용할수 있도록 코드를 구성해보았다.

소스코드는 하단에 있고, 중간에 출력 화면, 사용방법을

순서대로 기재해 두었으니 참고바란다. 

 

출력 화면 ↓

 

 

 

 

사용방법↓

1. 파일 다운

(파일 다운이 부담스러운 사람은 파일다운 하단에 소스코드 복붙해도 됨)

 

2. html header에 아래 소스 추가 

<link rel="stylesheet" href="/menu-style.css파일경로">

 

 

3. html body 마지막에 아래소스 추가

<script src="/menu-style.js파일경로"></script>

<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>

 

 

4. menu-script.js 파일 내 메뉴 데이터 입맛에 맞게 변경

(홈페이지명, 로고, 메뉴 이름 등)

 

5. 출력확인

 

 

[Html,Css,Javascript 파일]

index.html

0.00MB

menu-script.js

0.00MB

menu-style.css

0.00MB

 

[css]

 

:root {
    /* 로고 색상 */
    --logoColor : #ff4646;
    /* 텍스트 색상 */
    --textColor : #ecf0f1;
    /* 마우스 오버 색상 */
    --mouseOverColor : #ff4646;
}

body {
    margin : 0;
}

.navbar {
    display : flex;
    justify-content: space-around;
    background : #0d335d;
}

.navbar-logo {
    display : flex;
}

.navbar-logo > a{
    display : inherit;
    font-size : 20px;
    align-items: center;
    text-decoration: none;
}
    .navbar-logo > a > i {
        padding : 0px 5px;
        color : var(--logoColor);
    }

    .navbar-logo > a > h1 {
        margin : 0;
        color : var(--textColor);
    }

.navbar-menu > ul {
    display : flex;
    list-style:  none;
}

    .navbar-menu li {
        padding : 8px 12px;
    }

    .navbar-menu li:hover {
        background: var(--mouseOverColor);
        border-radius: 6px;
    }

    .navbar-menu li > a {
        text-decoration: none;
        color :  var(--textColor);
    }

.navbar-links {
    display : flex;
    align-items: center;
}

    .navbar-links  a{
        padding : 8px 12px;
        color :  var(--textColor);
    }

.navbar-btn { 
    display : none;
    cursor:pointer;
}
@media screen and (max-width : 768px) {
    .navbar {
        flex-direction: column;
    }

    .navbar-logo > a {
        padding : 5px 10px;
    }

    .navbar-menu {
        display : none;
    }

    .navbar-menu > ul { 
        flex-direction: column;
        padding : 0;
        width : 100%;
    }

        .navbar-menu > ul > li {
            cursor : pointer;
            text-align : center;
        }

    .navbar-links {
        display: none;
        justify-content: center;
        padding : 8px 12px;
    }

    .navbar-btn {
        display: block;
        position: absolute;
        top : 8px;
        right : 20px;
        font-size: 25px;
        color :  var(--textColor);
    }

    .active {
        display : flex;
    }
}

 

[javascript]

 

//기본 데이터 SET JSON
const menuDb = {
    pageName : 'GoodMemory', //홈페이지 이름
    mainPage : 'index.html',    //로고 클릭시 링크
    logoTheme : '<i class="fab fa-affiliatetheme"></i>',   //FontAwesome 로고
    menuList : [    //메뉴 이름, 링크 url
        {
            name : 'Home',
            url : './index.html'
        },
        {
            name : 'Gallary',
            url : './Gallary.html'
        },
        {
            name : 'Study',
            url : './study.html'
        },
        {
            name : 'FAQ',
            url : './FAQ.html'
        },
        {
            name : 'Bookings',
            url : './Bookings.html'
        },
    ],
    socialList : [
        {
            name : 'twitter',   //소셜 네트워크명
            url : 'https://www.twitter.com',  //링크 주소
            logo : '<i class="fab fa-twitter"></i>' //FontAwesome 로고
        },
        {
            name : 'facebook',   //소셜 네트워크명
            url : 'https://www.facebook.com',  //링크 주소
            logo : '<i class="fab fa-facebook-f"></i>' //FontAwesome 로고
        }
    ]
};

//CREATE ELEMENTS
const navBar = document.createElement('nav');
navBar.classList.add('navbar');
const navBar_logo = document.createElement('div');
navBar_logo.classList.add('navbar-logo');
const navBar_menu = document.createElement('div');
navBar_menu.classList.add('navbar-menu');
const navBar_links = document.createElement('div');
navBar_links.classList.add('navbar-links');
const navBar_btn = document.createElement('div');
navBar_btn.classList.add('navbar-btn');

//LOGO 관련
navBar_logo.innerHTML = `
    <a href="${menuDb.mainPage}">
        ${menuDb.logoTheme}
        <h1>${menuDb.pageName}</h1>
    </a>
`;

//MENU 관련
const menu_ulTag = document.createElement('ul');
menuDb.menuList.forEach(menu => {
        menu_ulTag.innerHTML += `
            <li><a href="${menu.url}">${menu.name}</a></li>
        `;
});
navBar_menu.append(menu_ulTag);

//소셜 링크 관련
menuDb.socialList.forEach(social => {
    navBar_links.innerHTML += `
    <a href="${social.url}">${social.logo}</a>
    `;
});

//메뉴 햄버거 버튼 관련
navBar_btn.innerHTML = `<i class="fas fa-bars"></i>`;
//메뉴 햄버거 버튼 관련 (Script)
navBar_btn.addEventListener('click', () => {
    navBar_menu.classList.toggle('active');
    navBar_links.classList.toggle('active');
});

//append All Childs
navBar.append(navBar_logo,navBar_menu,navBar_links,navBar_btn);
document.querySelector('body').append(navBar);