HTML예제 - Header 02

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

---

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

https://youtu.be/h65JAFQMWys

 

 

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 소스

/* HEADER */ 
#header { 
    width:100% ; box-sizing:border-box ;
    position:fixed ; left:0 ; top:0 ; z-index:95 ;
    min-height:5rem ; background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0))
}
.navOpen #header , .sticky #header { 
    box-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    background:none ; background-color:#ffffff ;
}
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 bottom ; background-size:10.4rem auto ;
}
.navOpen #logo > a , .sticky #logo > a { background-position:left top }

.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 }
.sticky #header , .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:#ffffff ; border-radius:1rem ;
    position:absolute ; left:50% ; top:50% ;
    transform:translate(-50%,-50%) ;
} 
.navOpen .NB__btn__open::before , .navOpen .NB__btn__open span , .navOpen .NB__btn__open::after ,
.sticky .NB__btn__open::before , .sticky .NB__btn__open span , .sticky .NB__btn__open::after { background-color:#111111 }

.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 }
    #header::after {
        display:block ; content:"" ; width:100% ; height:1px ; 
        background-color:#ffffff ; opacity:0.1 ;
        position:absolute ; left:0 ; top:7rem ;
        transition:0.3s all ;
    }
    .navOpen #header::after , .sticky #header::after { opacity:0 }
 
    #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 }
    .NB__btn__open , .NB__btn__close { display:none }
    body.navOpen { overflow:initial }
 

    /* NAVIGATION BAR */
    #navigation_bar , .NB__inner { height:7rem ; padding:0 }
    #navigation_bar { 
        width:70rem ; 
        left:auto ; right:0 ; z-index:96 ;
        background:none ;
    }
    .NB__inner { overflow:initial }
    .NB__list  { font-size:0 ; text-align:right }
    .NB__item  { display:inline-block ; width:auto }
    .NB__link {
        font-size:2rem ; line-height:2.8rem ; font-weight:500 ; color:rgba(255,255,255,0.8) ;
        text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
        padding:2rem 4rem 2.2rem ; border:none ;
    }
    .navOpen .NB__link , .sticky .NB__link { color:#595959 ; text-shadow:none ; background:none }  
    .NB__link:hover , .NB__link:focus { color:#ffffff }
    .navOpen .NB__link:hover , .navOpen .NB__link:focus , .sticky .NB__link:hover , .sticky .NB__link:focus { color:#111111 }
    .NB__link::after { bottom:auto ; top:0 }

    .navOpen #navigation_bar , .sticky #navigation_bar { left:auto }
   
}

 

 

4. jQuery 소스

    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/223420633959

HTML예제 02 - header 02

 

---

 

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

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

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