HTML예제 - Header 03

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

---

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

https://youtu.be/ppojcb5R_Co

 

 

2. HTML 소스

    <header id="header">
        <div class="header__inner">
 
            <h1 id="logo"><a href="index.php">처음으로</a></h1>
            <button class="NB__btn__open"><span>메뉴 열기</span></button>
            
            <nav id="navigation__bar">
                <div class="NB__inner">
                    <ul class="NB__list">
                        <li class="NB__item item10">
                            <a href="#" class="NB__link">회사소개</a>
                            <ul class="NB__sub__list">
                                <li class="NB__sub__item item11">
                                    <a href="#" class="NB__sub__link">인사말</a>
                                </li>   
                                <li class="NB__sub__item item11">
                                    <a href="#" class="NB__sub__link">연혁</a>
                                </li>  
                                <li class="NB__sub__item item11">
                                    <a href="#" class="NB__sub__link">오시는 길</a>
                                </li>  
                            </ul>  
                        </li>
                        <li class="NB__item item20">
                            <a href="#" class="NB__link">제품소개</a>
                            <ul class="NB__sub__list">
                                <li class="NB__sub__item item21">
                                    <a href="#" class="NB__sub__link">신제품</a>
                                </li>   
                                <li class="NB__sub__item item21">
                                    <a href="#" class="NB__sub__link">인기제품</a>
                                </li>   
                            </ul> 
                        </li>
                        <li class="NB__item item30">
                            <a href="#" class="NB__link">공지사항</a>
                            <ul class="NB__sub__list">
                                <li class="NB__sub__item item31">
                                    <a href="#" class="NB__sub__link">공지사항</a>
                                </li>    
                            </ul> 
                        </li>
                        <li class="NB__item item40">
                            <a href="#" class="NB__link">문의하기</a>
                            <ul class="NB__sub__list">
                                <li class="NB__sub__item item41">
                                    <a href="#" class="NB__sub__link">문의하기</a>
                                </li>   
                            </ul> 
                        </li>
                    </ul> 

                    <button class="NB__btn__close">메뉴 닫기</button>
                </div> 
            </nav><!-- //.navigation__bar --> 
        </div><!-- //.header__inner --> 
        
    </header>

 

 

3. CSS 소스

body.navOpen { overflow:hidden }



/* HEADER */ 
#header , .header__inner { width:100% ; box-sizing:border-box }
#header {  
    position:fixed ; left:0 ; top:0 ; z-index:95 ;
    background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0)) ;
    min-height:5rem ;
}
.header__inner { position:relative }

#logo , .NB__btn__open { z-index:97 }
#logo , #logo > a { width:10.4rem ; height:4rem ; display:block }
#logo { position:absolute ; left:1rem ; top:0.5rem }
#logo > a { 
    font-size:0 ; color:transparent ;
    background:url(../img/logo.png) no-repeat left bottom ; background-size:10.4rem auto ;
}
 
.navOpen #header , .sticky #header { background:none ; background-color:#ffffff }
.header__box { position:relative ; z-index:97 } 
.navOpen .header__box , .sticky .header__box { box-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
 
.navOpen #logo > a , .sticky #logo > a { background-position:left top }
 
.NB__btn__open  { 
    width:5rem ; height:5rem ;
    position:absolute ; right:0 ; top:0 ; 
}
.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 ;  
    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 ;
}
#navigation__bar::before {
    display:block ; content:"" ; width:100% ; height:1px ;
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; left:0 ; top:5rem
}
.navOpen #navigation__bar { left:0 }

.NB__inner { overflow:auto ; height:100% }
.NB__list  { margin-bottom:2rem }
.NB__item , .NB__link { border-bottom:solid 1px rgba(0,0,0,0.1) }
.NB__link  { 
    display:block ; padding:1.5rem 2rem 1.7rem ;
    font-size:2.2rem ; line-height:3rem ; font-weight:600 ; text-align:center ;   
    position:relative ;
}
#navigation__bar , .NB__link , .NB__sub__link , .NB__sub__link::after { transition:0.3s all }

.NB__item:hover .NB__link  , .NB__item:focus .NB__link , .NB__link:hover , .NB__link:focus { 
    background-color:#111111 ; color:#ffffff ;
    border-color:#111111 ;
}  
 
.NB__sub__list , .NB__sub__item , .NB__sub__link { width:100% ; box-sizing:border-box }
.NB__sub__list { padding:1rem 0rem 2rem }
.NB__sub__link { 
    display:block ; padding:1rem 0.5rem 1.2rem ;
    font-size:1.8rem ; line-height:2.8rem  ; text-align:center ; font-weight:400 ; 
    position:relative ;
}
.NB__sub__link:hover , .NB__sub__link:focus { color:#111111 }
.NB__sub__link::after {
    width:0 ; height:1px ; display:block ; overflow:hidden ; content:"" ;
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; left:50% ; bottom:0 ; transform:translateX(-50%) ;
}
.NB__sub__link:hover::after , .NB__sub__link:focus::after { width:100% }

.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){
 
    body.navOpen { overflow:initial }



    /* HEADER */ 
    #header { min-height:7rem ; overflow:hidden }
    #header::after {
        display:block ; content:"" ; width:100% ; height:1px ; 
        background-color:rgba(0,0,0,0.1) ; opacity:0 ;
        position:absolute ; left:0 ; top:7rem ; 
        transition:0.3s all ;
    }
    .navOpen #header::after { opacity:1 }
    .header__inner { max-width:110rem ; margin:auto }

    .navOpen #header , .sticky #header { box-sizing:0 0 0.3rem rgba(0,0,0,0.3) }

    #logo , .NB__btn__open  { position:absolute }
    #logo { left:0 ; top:1.5rem }
    .NB__btn__open { width:7rem ; height:7rem }
    .NB__btn__open::before , .NB__btn__open span , .NB__btn__open::after { width:3rem } 



    /* NAVIGATION BAR */
    #navigation__bar , .NB__inner { height:auto }
    #navigation__bar { 
        position:static ; float:right ; margin-right:7rem ;
        width:60rem ; left:auto ; right:7rem ;
        background:none ; padding:0 ;
    }
    #navigation__bar::before { display:none } 
    .NB__list , .NB__item , .NB__link , .NB__sub__list { margin:0 ; padding:0 ; border:0 }
    .NB__list { text-align:center }
    .navOpen .NB__list { margin-bottom:3rem }

    .NB__item { width:auto ; display:inline-block }
    .NB__link { 
        font-size:2rem ; line-height:2.8rem ; color:rgba(255,255,255,0.8) ;
        padding:2rem 3rem 2.2rem ; position:relative ;
    }

    .navOpen .NB__link , .sticky .NB__link { color:#444444 }
    
    .NB__link::after {
        width:0 ; height:0.2rem ; display:block ; content:"" ;
        background-color:#ff6600 ;
        position:absolute ; left:50% ; bottom:0 ; transform:translateX(-50%) ;
    }
    .NB__item:hover .NB__link , .NB__link:hover , .NB__link:focus { color:#ffffff ; background:none }  
    .navOpen .NB__item:hover .NB__link , .sticky .NB__item:hover .NB__link , .navOpen .NB__link:focus { color:#111111 }

    .NB__link:hover::after , .NB__link:focus::after , .NB__item:hover .NB__link::after { width:100% }

    .NB__link::after , .NB__sub__list { transition:0.3s all }

    .NB__sub__list { 
        height:0 ; overflow:hidden ;
        text-align:center ; font-size:0 ; padding:0 ; opacity:0 ; }
    .navOpen .NB__sub__list { padding:1rem 0 2rem ;  opacity:1 ; height:auto }

    .NB__sub__link { 
        font-size:1.6rem ; line-height:2.8rem ; color:rgba(0,0,0,0.7) ;
        padding:1rem 0.2rem 1.2rem ; border:none  }

    .NB__btn__close { margin:auto ; width:0 ; height:0 ; overflow:hidden ; opacity:0 ; } 
    .NB__btn__close:focus {
        width:2rem ; height:2rem ; margin-bottom:2rem ;
        opacity:0.3 ;
    } 
    .NB__btn__close::before , .NB__btn__close::after { background-color:#ffffff }
}

 

4. jQuery 소스

$(document).ready(function() {
 
    let $body      = $("body");
    let $header    = $body.find("#header");
    let $nav       = $header.find("#navigation__bar");
    let $nav_open  = $header.find(".NB__btn__open");
    let $nav_close = $header.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/223427055226

Header 예제3 - 홈페이지만들기 HTML 소스

 

---

 

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

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

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