HTML예제 - Header 01

* http://jolib.kr/ 에서 사용되는 예제를 정리한 내용입니다.

---

1. 예제의 이미지 및 동영상

https://youtu.be/EhqJ0l09jHQ

 

 

 

2. HTML 소스

    <header id="header">
        <h1 id="logo"><a href="index.php">처음으로</a></h1>
        <button class="NB__btn__open"><span>메뉴 열기</span></button>
    </header>
    
    <nav id="navigation_bar">
        <div class="NB__inner">
            <ul class="NB__list">
                <li class="NB__item item10"><a href="#" class="NB__link">회사소개</a></li>
                <li class="NB__item item20"><a href="#" class="NB__link">제품소개</a></li>
                <li class="NB__item item30"><a href="#" class="NB__link">공지사항</a></li>
                <li class="NB__item item40"><a href="#" class="NB__link">문의하기</a></li>
            </ul>
            <button class="NB__btn__close">메뉴 닫기</button>
        </div>
    </nav><!-- //.navigation_bar -->

 

 

3. CSS 소스

@charset "utf-8";
  
/* HEADER */
#header { 
    width:100% ; box-sizing:border-box ;
    position:fixed ; left:0 ; top:0 ; z-index:95 ;
    background-color:#ffffff ; min-height:5rem ;
}
.navOpen #header , .sticky #header { box-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
body.navOpen { overflow:hidden }

#logo , #logo > a { width:10.4rem ; height:4rem ; display:block }
#logo { margin:0.5rem }
#logo > a { 
    font-size:0 ; color:transparent ;
    background:url(../img/logo.png) no-repeat left top ; background-size:10.4rem auto ;
}

.NB__btn__open  { 
    width:5rem ; height:5rem ;
    position:fixed ; right:0 ; top:0 ; z-index:96 ; 
}
.NB__btn__open span , .NB__btn__close { font-size:0 ; color:transparent }
.NB__btn__open::before , .NB__btn__open span , .NB__btn__open::after ,
.NB__btn__close::before , .NB__btn__close::after { transition:0.3s all }
.NB__btn__open::before , .NB__btn__open span , .NB__btn__open::after {
    width:2.6rem ; height:0.2rem ; display:block ; overflow:hidden ;
    background-color:#111111 ; border-radius:1rem ;
    position:absolute ; left:50% ; top:50% ;
    transform:translate(-50%,-50%) ;
} 
.NB__btn__open::before , .NB__btn__open::after , .NB__btn__close::before , .NB__btn__close::after { content:"" } 
.NB__btn__open::before , .NB__btn__open:hover::after , .NB__btn__open:focus::after{ top:34% }
.NB__btn__open::after , .NB__btn__open:hover::before , .NB__btn__open:focus::before { top:65% }
.NB__btn__open:hover span , .NB__btn__open:focus span { transform:translate(-50%,-50%) rotate(180deg) }

.navOpen .NB__btn__open { background-color:#111111 }
.navOpen .NB__btn__open span { opacity:0 }
.navOpen .NB__btn__open::before , .navOpen .NB__btn__open::after { 
    left:50% ; top:50% ;
    background-color:#ffffff ;
}
.navOpen .NB__btn__open::before { transform:translate(-50%,-50%) rotate(45deg) }
.navOpen .NB__btn__open::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.navOpen .NB__btn__open:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
.navOpen .NB__btn__open:hover::after   { transform:translate(-50%,-50%) rotate(45deg) }



/* NAVIGATION BAR */
#navigation_bar , .NB__inner , .NB__list , .NB__item , .NB__link { width:100% ; box-sizing:border-box }
#navigation_bar {
    height:100vh ; padding-top:5rem ;
    position:fixed ; left:-101% ; top:0 ; z-index:94 ;
    background-color:#ffffff ;
}
.navOpen #navigation_bar { left:0 }
#navigation_bar , .NB__link , .NB__link::after , .NB__btn__close { transition:0.3s all }
.NB__inner { overflow:auto ; height:100% }

.NB__link { 
    display:block ; padding:2rem 1rem 2.2rem ;
    font-size:2.2rem ; line-height:3rem ; font-weight:600  ; text-align:center ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
    position:relative ;
}
.NB__link:hover , .NB__link:focus { color:#111111 ; background-color:rgba(0,0,0,0.05) ; }
.NB__link::after {
    width:0 ; height:0.2rem ; display:block ; content:"" ;
    background-color:#ff6600 ;
    position:absolute ; left:50% ; bottom:-1px ; transform:translateX(-50%) ;
}
.NB__link:hover::after , .NB__link:focus::after { width:100% }
 
.NB__list { margin-bottom:2rem }
.NB__btn__close { 
    display:block ; position:relative ;
    width:2rem ; height:2rem ; margin:0 auto 2rem ; opacity:0.2 }
.NB__btn__close::before , .NB__btn__close::after {
    width:2rem ; height:0.1rem ; display:block ; 
    background-color:#000000 ;
    position:absolute ; left:50% ; top:50%
}
.NB__btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
.NB__btn__close::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.NB__btn__close:hover , .NB__btn__close:focus { opacity:0.6 }
.NB__btn__close:hover::before , .NB__btn__close:focus::before { transform:translate(-50%,-50%) rotate(135deg) }
.NB__btn__close:hover::after , .NB__btn__close:focus::after   { transform:translate(-50%,-50%) rotate(45deg) }





/* PC **********/
@media all and (min-width:1100px){
 	 
    /* HEADER */
    #header { min-height:7rem }
    #logo { margin:1.5rem 1rem }
    .NB__btn__open { width:7rem ; height:7rem }
    .NB__btn__open::before , .NB__btn__open span , .NB__btn__open::after { width:4rem ; height:0.2rem }

 

    /* NAVIGATION BAR */
    #navigation_bar { height:100vh ; padding-top:7rem }

}

 

 

4. jQuery 소스

$(document).ready(function() {

    let $body      = $("body");
    let $header    = $body.find("#header");
    let $nav       = $body.find("#navigation_bar");
    let $nav_open  = $header.find(".NB__btn__open");
    let $nav_close = $nav.find(".NB__btn__close");


    function fun_nav_open(){
        $body.addClass("navOpen");
    }

    function fun_nav_close(){
        $body.removeClass("navOpen");
    }


    $nav_open.click(function (e) { 
        e.preventDefault();
        if($body.hasClass("navOpen")){
            fun_nav_close();
        }else{
            fun_nav_open();
        }        
    });

    $nav.focusin(function (e) { 
        e.preventDefault();
        fun_nav_open();   
    });

    $nav_close.click(function (e) { 
        e.preventDefault();
        fun_nav_close();    
    });

    $nav_close.focus(function (e) { 
        e.preventDefault();
        fun_nav_close();  
    });




    /* STICKY */
    scroll_sticky($(this).scrollTop()); 

    $(window).scroll(function(){   
        scroll_sticky($(this).scrollTop());  
    });  
  
    function scroll_sticky($scroll_y){
        if($scroll_y > 5){
            $body.addClass("sticky"); 
        }else{
            $body.removeClass("sticky"); 
        }   
    } 
    

});

 

 

예제를 다운로드 받고 싶다면 아래 경로에 접속하셔서 다운로드 하시면됩니다.
https://blog.naver.com/redoxup/223419714480

HTML예제 01 - header 01

 

---

 

독학으로 힘들어 하시는 분들을 위해 과외를 준비 했습니다. 

2024년 11월 한 달간 맞춤형 과외를 할 예정입니다.
입문자 분들의 참여 부탁드립니다.
교육과정은 인터뷰 후에 맞춤으로 진행할 예정입니다. 

참여하기: https://blog.naver.com/redoxup/223601934677