반응형 nav 만들기

HTML

평범하게 nav 를 만든다.

<div class="header">
  <div id="m_nav"><i class="fas fa-bars fa-3x" id="bar"></i></div>
    <ul>
        <li class="on" class="a" class="list"><a href="#">NAV01</a></li>
        <li class="list"><a href="#">NAV02</a></li>
        <li class="list"><a href="#">NAV03</a></li>
        <li class="list"><a href="#">NAV04</a></li>
    </ul>
</div>

 

CSS

*{margin:0;padding:0}
html, body{overflow-y:hidden}
ul, ol{list-style:none}
.header{position:fixed;z-index:10;top:0;width:100%}
.header ul:after{content:"";display:block;clear:both}
.header ul li{float:left;box-sizing:border-box;width:25%}
.header ul li:first-child{border-left:none}
.header ul li a{display:block;height:60px;text-align:center;line-height:60px;font-size:20px;text-decoration:none;background-color:#000;color:#fff}
.header ul li.on a{background-color:#fff;color:#000}

 

 

 

 

화면이 작아질 때 바뀌는 nav 설정

 

CSS

.header ul li{float:right;box-sizing:border-box;width:100%;}

.header ul li {
    content:"";
    display:block;clear:both
}

ul{
    display: none;
}

#m_nav{
    display: block;
    width: 100%;
    height: 60px;
    background-color: black;
}

#bar{
    line-height: 60px;
    float: right;
    margin-right: 10px;
    color: white;
}

.active{
    display: block;
}

 

 

원리:

평상시에는 ul 을 display: none 으로 숨겨두다가 아이콘을 클릭시 display : block 으로 바뀌어 메뉴가 보여진다

 

JS

/* m_header 동적생성 */

var toggle_bnt = document.querySelector('#bar');
var m_nav = document.querySelector('ul');

// 클릭하면 display:block 속성의 active 클래스가 추가된다
toggle_bnt.addEventListener('click',()=>{
    m_nav.classList.toggle('active');
})