HTML예제 - Header 05

728x90

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

2. HTML 소스

<!DOCTYPE html> 
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header.5</title>

    <!-- JS -->
    <script src="js/jquery-1.11.1.min.js"></script> 
    <script src="js/header5.js"></script> 

    <!-- CSS -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" /> 
    <link rel="stylesheet" href="css/header5.css" type="text/css" />  
</head>
<body>

    <div id="skip" title="스킵메뉴">
        <a href="#nav__bar">주 메뉴 바로가기</a>
        <a href="#main">본문 내용 바로가기</a> 
    </div> 
    
    <header id="header">
        <div class="header__inner"> 
            <h1 id="logo"><a href="index.php">처음으로</a></h1>

            <button class="search__open__btn">검색하기</button>    
            <button class="nav__btn__open"><span>메뉴 열기</span></button> 
 
            <nav id="nav__bar"> 
                <div class="nav__inner">                
                    <ul class="nav__list">
                        <li class="nav__item item10">
                            <a href="#" class="nav__link">회사소개</a>
                            <div class="nav__sub">
                                <a href="#" class="nav__sub__link">인사말</a>  
                                <a href="#" class="nav__sub__link">연혁</a>
                                <a href="#" class="nav__sub__link">오시는 길</a> 
                            </div>  
                        </li>
                        <li class="nav__item item20">
                            <a href="#" class="nav__link">제품소개</a>
                            <div class="nav__sub">
                                <a href="#" class="nav__sub__link">신제품</a>  
                                <a href="#" class="nav__sub__link">인기제품</a> 
                            </div> 
                        </li>
                        <li class="nav__item item30">
                            <a href="#" class="nav__link">공지사항</a>
                            <div class="nav__sub">
                                <a href="#" class="nav__sub__link">공지사항</a>   
                            </div> 
                        </li>
                        <li class="nav__item item40">
                            <a href="#" class="nav__link">문의하기</a>
                            <div class="nav__sub">
                                <a href="#" class="nav__sub__link">문의하기</a> 
                            </div>  
                        </li>
                    </ul>   
                </div><!-- //.nav__inner --> 
            </div><!-- //.nav__bar --> 
 
            <button class="nav__btn__close">메뉴 닫기</button> 
        </div><!-- //.header__inner -->  
    </header>

    <form name="search" class="search__box__form" id="search" action="#">
        <fieldset class="search__box__fieldset">
            <legend class="sound">전체검색</legend>
            <label for="search__word" class="sound">검색어</label>
            <input type="text" name="search__word" id="search__word" placeholder="검색어" />
            <button class="search__btn__submit" type="submit">검색</button>
            <button class="search__btn__close">검색창 닫기</button>
        </fieldset> 
    </form><!-- //.search__box__form -->
 

 
    <div style="width:100% ; height:1200px ; background:url(img/slide_4.jpg) no-repeat center ; background-size:cover">
        <div style="width:100% ; height:100% ; background-color:rgba(0,0,0,0.5)"> 
        </div>
    </div>
    
</body>
</html>

3. CSS 소스

@charset "utf-8";

body.navOpen { overflow:hidden }


   
/* HEADER */ 
#header , .header__inner , #header::before { 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 }

#header::before { 
    display:block ; content:"" ; opacity:0 ;
    height:5rem ; background-color:#ffffff ; box-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    position:absolute ; left:0 ; top:0 ; z-index:96 ;
} 
.navOpen #header::before , .sticky #header::before { opacity:1 }
 
#logo , .search__open__btn , .nav__btn__open , .nav__btn__close { 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 #logo > a , .sticky #logo > a { background-position:left top }
 
.search__open__btn , .nav__btn__open , .nav__btn__close  { width:5rem ; height:5rem ; position:absolute ; top:0 }
.search__open__btn { right:5rem } 
.search__open__btn::before {  
    width:100% ; height:100% ; display:block ; content:"" ; opacity:0.7 ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(0.6) ;
    background:url(../img_icon/icon_search_white.svg) no-repeat center ; background-size:cover ;
}
.navOpen .search__open__btn::before , .sticky .search__open__btn::before{ background-image:url(../img_icon/icon_search.svg) }
.search__open__btn:hover::before , .search__open__btn:focus::before { opacity:1 ; transform:translate(-50%,-50%) scale(0.7) } 
.nav__btn__open , .nav__btn__close { right:0 }
.nav__btn__open span , .search__open__btn , .nav__btn__close { font-size:0 ; color:transparent }
#header::before , .search__open__btn::before , 
.nav__btn__open::before , .nav__btn__open span , .nav__btn__open::after ,
.nav__btn__close::before , .nav__btn__close::after { transition:0.3s all }
.nav__btn__open::before , .nav__btn__open span , .nav__btn__open::after ,
.nav__btn__close::before , .nav__btn__close::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 .nav__btn__open::before , .navOpen .nav__btn__open span , .navOpen .nav__btn__open::after ,
.sticky .nav__btn__open::before , .sticky .nav__btn__open span , .sticky .nav__btn__open::after ,
.nav__btn__close  { background-color:#111111 }
.nav__btn__open::before , .nav__btn__open::after , .nav__btn__close::before , .nav__btn__close::after { content:"" } 
.nav__btn__open::before , .nav__btn__open:hover::after , .nav__btn__open:focus::after  { top:34% }
.nav__btn__open::after , .nav__btn__open:hover::before , .nav__btn__open:focus::before { top:65% }
.nav__btn__open:hover span , .nav__btn__open:focus span { transform:translate(-50%,-50%) rotate(180deg) }
.navOpen .nav__btn__open , .nav__btn__close { display:none }
.navOpen .nav__btn__close { display:block }
 
.nav__btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
.nav__btn__close::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.nav__btn__close:hover::before , .nav__btn__close:focus::before { transform:translate(-50%,-50%) rotate(135deg) }
.nav__btn__close:hover::after , .nav__btn__close:focus::after { transform:translate(-50%,-50%) rotate(45deg) }



/* NAV BAR */
#nav__bar , .nav__inner { width:100% ; box-sizing:border-box }
#nav__bar {
    position:fixed ; left:0 ; top:-101% ; z-index:94 ;
    padding-top:5rem ; height:100vh ; 
    background-color:rgba(0,0,0,0.5)
}
.navOpen #nav__bar { top:0 ; transition:0.3s all }
.nav__inner {
    width:100% ; height:100% ;
    overflow:auto ;
}
.nav__link { 
    display:block ; padding:1.5rem 0.2rem 1.7rem ; 
    border:solid 1px rgba(255,255,255,0.1) ; border-left:0 ; border-right:0 ;
    font-size:2.2rem ; line-height:2.8rem ; color:#ffffff ; font-weight:600 ; text-align:center
}

.nav__sub { 
    text-align:center ; font-size:0 ;
    padding:1rem 0 2rem ;
}
.nav__sub__link { 
    display:inline-block ; margin:0.5rem ; padding:0.5rem 1rem 0.7rem ;
    border:solid 1px rgba(255,255,255,0.1) ; border-radius:0.4rem ;
    font-size:1.6rem ; line-height:2.8rem ; color:#ffffff
}
.nav__item , .nav__link , .nav__sub__link { transition:0.3s all }
.nav__item:hover { background-color:rgba(0,0,0,0.8)}
.nav__item:hover .nav__link , .nav__link:hover , .nav__link:focus { color:#ff6600 ; border-bottom:solid 1px #ff6600 }
.nav__sub__link:hover , .nav__sub__link:focus { 
    background-color:#ffffff ; border-color:rgba(0,0,0,0) ; color:#111111 
}



/* SEARCH */
.search__box__form , .search__box__fieldset { width:100% ; box-sizing:border-box }
.search__box__form { 
    background-color:rgba(0,0,0,0.6) ; padding-top:5rem ;
    position:fixed ; left:-101% ; top:0 ; z-index:92 }
.search .search__box__form { left:0 }   
.search__box__fieldset {
    border-top:solid 1px rgba(255,255,255,0.2) ;
    padding:2rem 0.5rem ; text-align:center ;
} 
#search__word { 
    font-size:1.6rem ; line-height:2.8rem ; color:#ffffff ;
    padding:0.5rem ;
    width:40% ; max-width:20rem  ;
    border-bottom:solid 0.2rem #ffffff ;
}
.search__btn__submit , .search__btn__close {
    display:inline-block ; width:4rem ; height:4rem ; box-sizing:border-box ;
    font-size:0 ; color:transparent ;
    position:relative
}
.search__btn__submit::before {
    width:4rem  ; height:4rem ; display:block ; content:"" ;
    background:url(../img_icon/icon_search_white.svg) no-repeat center ; ; background-size:cover ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}

.search__box__form , .search__btn__close::before , .search__btn__close::after { transition:0.3s all }
.search__btn__close::before , .search__btn__close::after {
    display:block ; content:"" ; width:2rem ; height:0.1rem ; 
    background-color:#ffffff ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) 
} 
.search__btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
.search__btn__close::after { transform:translate(-50%,-50%) rotate(-45deg) }
.search__btn__close:hover::before , .search__btn__close:focus::before ,
.search__btn__close:hover::after , .search__btn__close:focus::after   { width:3rem }
.search__btn__close:hover::before , .search__btn__close:focus::before { transform:translate(-50%,-50%) rotate(135deg) }
.search__btn__close:hover::after , .search__btn__close:focus::after   { transform:translate(-50%,-50%) rotate(45deg) }




/* PC **********/
@media all and (min-width:1100px){ 
 
    /* HEADER */ 
    #header { min-height:7rem }
    .header__inner  { width:98% ; max-width:160rem ; margin:auto }
    #logo { position:absolute ; left:0 ; top:1.5rem }
    .search__open__btn , .nav__btn__open , .nav__btn__close { top:1rem } 

    #header::before    { height:7rem } 
    .navOpen #header::before { box-shadow:none }

    .nav__btn__close  { background:none }
    .nav__btn__close::before , .nav__btn__close::after  { background-color:#ff6600 }
     


    /* NAV BAR */
    #nav__bar { 
        min-height:64rem ;
        padding:0 ; background-color:#ffffff ; opacity:0 }
    .navOpen #nav__bar { opacity:1 }

    .nav__inner , .nav__item , .nav__sub__link { position:relative }
    .nav__inner { width:98% ; max-width:80rem ; margin:auto ; height:100% }
    .nav__list  { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }   
    .nav__list , .nav__item { width:100% }
    .nav__item  { padding:2.5rem 0 ; border-bottom:solid 1px rgba(0,0,0,0.1) }
    .nav__item:last-child { border-color:rgba(0,0,0,0) } 
    .nav__item::after , .nav__sub::after { display:block ; content:"" ; clear:both }
    .nav__link , .nav__sub , .nav__sub__link { margin:0 ; padding:0 }
    .nav__sub , .nav__link { text-align:left } 
    .nav__sub   { width:60% ; position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) }
    
    .nav__link  { 
        font-size:5rem ; line-height:6rem ; color:#111111 ;
        letter-spacing:-0.2rem ; display:inline-block ; width:auto ;
        padding:0 0.5rem 0.2rem ;
    }
    .nav__sub__link {
        font-size:2rem ; line-height:2.8rem ;
        margin-right:6rem ; border:0 ; border-radius:0 ;
        color:#444444 ; font-weight:500 ;
    }
    .nav__sub__link::before {
        width:0 ; height:0.5rem ; display:block ; content:"" ;
        background-color:#ff6600 ; opacity:0 ;
        position:absolute ; left:0 ; bottom:0.2rem ;
        transition:0.3s all ;
    }
    .nav__sub__link:hover::before , .nav__sub__link:focus::before { width:100% ; opacity:0.3 }
    .nav__sub__link:last-child { margin-right:0 }
    .nav__item:hover { background:none }

    .nav__item:hover .nav__link ,.nav__link , .nav__link:hover , .nav__link:focus { border:0 }
    





    /* SEARCH */
    .search__box__form { padding-top:7rem }
 

}

4. jQuery 소스

$(document).ready(function() {
 
    let $body      = $("body");
    let $header    = $body.find("#header");
    let $nav       = $header.find("#nav__bar");
    let $nav_open  = $header.find(".nav__btn__open");
    let $nav_close = $header.find(".nav__btn__close");

    let $search_form  = $body.find(".search__box__form");
    let $search_input = $search_form.find("#search__word");
    let $search_open  = $header.find(".search__open__btn");
    let $search_close = $search_form.find(".search__btn__close");


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

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

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

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

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


    $search_open.click(function (e) { 
        e.preventDefault();

        if($body.hasClass("search")){
            fun_nav_close();  
        }else{
            fun_search_open();
            $search_input.focus(); 
        }     
    });

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

    $search_close.focus(function (e) { 
        e.preventDefault();
        fun_nav_close();    
    });
  
    $search_form.focusin(function (e) { 
        e.preventDefault();
        fun_search_open();   
    });
 


    /* 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/223498812090

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

https://youtu.be/EKH6KbIqC4c 조립(jolib.kr)에서 사용되는 예제입니다. http://jolib.kr/ 위 영상...

blog.naver.com

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

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

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

[조립]에서 2024년 11월 한 달 무료 과외(HTML/CSS/jQuery)를 합니다. - 과외 신청하세요!!

HTML+CSS+ jQuery(제이쿼리) 입문자 인가요? 웹퍼블리셔, 프런트엔드 개발자, 웹디자이너를 시작해...

blog.naver.com

728x90

저작자표시 비영리 변경금지

'JOLIB+자료모음' 카테고리의 다른 글

CSS 독학을 위한 3schools해석 (1)	2024.10.10
HTML 독학을 위한 3schools해석 (5)	2024.10.10
HTML예제 - Header 04 (0)	2024.06.26
HTML예제 - Header 03 (0)	2024.04.25
HTML예제 - Header 02 (0)	2024.04.19