반응형 디자인 2-2

디자인호텔스

결과

반응형 디자인 2-1에서는 모바일 메뉴를 만들고 left:100% 로 화면 영역 밖으로 빼네는 작업을 했고 오늘 그 메뉴가 나오는 모습까지 만들게 되었다.

HTML

<header id="header"><!-- 2022-12-13 -->
		  <div class="container">
			 <div class="header-mobile-menu-bar">
				<div>
				   <span class="header-appBar-wrap">
					  <a href="javascript:" class="appbarBt">
						 <i class="appbar-line1"></i>
						 <i class="appbar-line2"></i>
						 <i class="appbar-line3"></i>
					  </a>
				   </span>
				   <h1 class="header-logo-wrap"><a href="#"><img src="./img/m_logo.png" alt=""></a></h1>
				   <span class="header-search-wrap">
					  <a href="#">
						 <i class="fas fa-search"></i>
					  </a>
				   </span>
				</div>
			 </div>
			 <aside>
				<span><a href="#" title="join">Join</a></span>
				<span><i>|</i></span>
				<span><a href="#" title="Log in">Log in</a></span>
				<span><i>|</i></span>
				<span><a href="#" title="Subscribe">Subscribe</a></span>
			 </aside>
			 <div class="header-logoNav">
				<h1><a href="#"><img src="./img/logo.png" alt=""></a></h1>
				<nav id="nav">
					<span><a href="#"><i class="fas fa-search"></i></a></span>
					<span><a href="#" title="HOTELS & RESORTS">HOTELS & RESORTS</a></span>
					<span><a href="#" title="DEALS">DEALS</a></span>
					<span><a href="#" title="ORIGINAL EXPERIENCES">ORIGINAL EXPERIENCES</a></span>
					<span><a href="#" title="CULTURE">CULTURE</a></span>
					<span><a href="#" title="GALLERY">GALLERY</a></span>
					<span><a href="#" title="STORE">STORE</a></span>
				</nav>
			 </div>
		  </div>
	   </header>

SCSS

#header{
    width: 100%;
    position: absolute;
    height: 82px;
    background: rgba(255,255,255,0);
    overflow: hidden;
    .container{
        width: 100%; 
        max-width: 1090px;
        position: relative;
        margin: 0 auto;
        .header-mobile-menu-bar{
            display:none;
            div{ 
                display: flex; justify-content: space-between; 
                position: relative;
                background: #fff;
                width: 100%;
                height: 67px;
                align-items: center;
                top: 0;
                left: 0;
                padding: 0 20px;
                box-sizing: border-box; 
                .header-appBar-wrap{
                    width: 22px;
                    height: 14px;
                    a{ 
                        display: block;
                        width: 100%;
                        height: 100%;
                        position: relative;
                        i{
                            display: block;
                            position: absolute;
                            width: 100%;
                            height: 2px;
                            background: #000;
                            left:0;
                            &.appbar-line1{top:0}
                            &.appbar-line2{top: 50%;}
                            &.appbar-line3{top: 100%}
                        }
                    }
                }
                .header-search-wrap{
                    a{color: #000;
                        i{font-size: 20px;}
                    }
                }
            }
        }
        aside{
            position: absolute;
            top: 5px;
            right: 0;
            span{
                a{color: $white-opcity;}
                i{  
                    font-style: normal;
                    color: $white-opcity;
                    font-size: 10px;
                    margin: 0 5px;
                }
            }
        }
        .header-logoNav{
            display: flex;
            justify-content: space-between;
            height: 80px;
            align-items: center;
            h1{}
            #nav{
                span{
                    display: inline-block;
                    margin-left: 30px;
                    a{
                        color: $white;
                        font-size: 15px;
                        transition: .3s;
                        border-bottom: 1px solid rgba(255, 255, 255, 0);
                        &:hover{border-bottom: 1px solid rgba(255, 255, 255, 0.7);}
                    }
                    &:nth-child(4) a{
                        color: $orange;
                        font-weight: bold;
                    }
                }
            }
        }
    }
    
}
@media screen and (max-width: 1090px){
    .mobile-menu{display: block;}
    #header .container .header-mobile-menu-bar{
        display: block;
    }
    #header .container aside{display: none;}
    #header .container .header-logoNav{display: none;}
}

script

$('.appbarBt').click(function(){
    $('.mobile-menu').stop().animate({left:0+'%'},500)
    $('.header-mobile-menu-bar>div').stop().animate({left:100+'%'},500)
});
$('.mobile-appBar-wrap').click(function(){
    $('.mobile-menu').stop().animate({left:'-100%'},500)
    $('.header-mobile-menu-bar>div').stop().animate({left:0+'%'},500)
});

left로 -100% 가 있던 모바일 메뉴를 제이쿼리로 나오게 구현하였다. 하지만 모바일 메뉴만 오른쪽으로 밀려 나오는 것이 아니라 기존에 있는 헤더도 같이 밀려서 나가야 한다.


JQuery

JQuery Menu 1-7

결과

HTML

<div class="container">
        <nav>
            <ul>
                <li><a href="javascript:">1Depth</a>
                    <div class="sub">
                        <div class="sub_contents">
                            <ul>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                            </ul>
                            <div class="brand">menu1 brand</div>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <div class="sub">
                        <div class="sub_contents">
                            <ul>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                            </ul>
                            <div class="brand">menu2 brand</div>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <div class="sub">
                        <div class="sub_contents">
                            <ul>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                            </ul>
                            <div class="brand">menu3 brand</div>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <div class="sub">
                        <div class="sub_contents">
                            <ul>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                            </ul>
                            <div class="brand">menu4 brand</div>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <div class="sub">
                        <div class="sub_contents">
                            <ul>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                                <li><a href="#">2Depth</a></li>
                            </ul>
                            <div class="brand">menu5 brand</div>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="contents">
            <ul>
                <li><a href="javascript:"><img src="https://cdn.pixabay.com/photo/2022/11/29/08/54/race-car-7624025__340.jpg" alt=""></a></li>
                <li><a href="javascript:"><img src="https://cdn.pixabay.com/photo/2022/08/28/19/39/steering-wheel-7417390__340.jpg" alt=""></a></li>
                <li><a href="javascript:"><img src="https://cdn.pixabay.com/photo/2019/07/30/18/50/dinosaur-4373602__340.png" alt=""></a></li>
            </ul>
        </div>
    </div>

CSS

@charset "utf-8";

*{margin: 0; padding: 0;}
ul{list-style: none;}
a{text-decoration: none; color: #333;}

nav{position: relative; width: 100%; background: #fff;}
nav>ul{display: flex; justify-content: center;}
nav>ul>li>a{display: block; padding: 10px 40px; font-weight: bold;}
nav>ul>li> .sub{display: block; position: absolute; z-index: 2; left: 0; width: 100%; height: 0; background: #fff; transition: .3s; overflow: hidden;}
nav>ul>li> .sub .sub_contents{width: 679.45px; margin: 0 auto; display: flex;}
nav>ul>li> .sub .sub_contents ul{width: 135px;}
nav>ul>li> .sub .sub_contents ul li{padding: 8px 0; border-top: 1px solid #eaeaea; background: #f4f4f4; text-indent: 16px;}
nav>ul>li> .sub .sub_contents ul li:first-child{border-top: 0;}
nav>ul>li> .sub .sub_contents ul li a{color: #666;}
nav>ul>li> .sub .sub_contents .brand{padding: 10px; color: #666; font-size: 18px;}
nav>ul>li> .sub.active{height: 190px; border-bottom: 1px solid #eaeaea;}
.contents{width: 100%; position: relative; z-index: 1;}
.contents ul{width: 100%;}
.contents ul li{width: 100%; position: absolute;}
.contents ul li img{width: 100%;}

script

$('nav>ul>li').on({"mouseover focusin":function(){
    $(this).find('.sub').addClass('active');
},"mouseout focusout" :function(){
    $(this).find('.sub').removeClass('active');
}});

li를 mouseover 와 focusin 을 하여 li 밑에 .sub 를 find 하여 'active'를 클래스 추가하고 mouseout이 되면 클래스 삭제가 된다.

JQuery Menu 1-8

결과

HTML

    <div class="container">
        <nav>
            <ul>
                <li>
                    <a href="#">1Depth</a>
                    <ul>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                    </ul> 
                </li>
                <li><a href="#">1Depth</a>
                    <ul>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                    </ul> 
                </li>
                <li><a href="#">1Depth</a>
                    <ul>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                    </ul>                    
                </li>
                <li><a href="#">1Depth</a>
                    <ul>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                    </ul>                     
                </li>
                <li><a href="#">1Depth</a>
                    <ul>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                    </ul>                    
                </li>
                <li><a href="#">1Depth</a>
                    <ul>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                        <li><a href="#">2depth</a></li>
                    </ul> 
                </li>
            </ul>
            
        </nav>
        <div class="sub_shadow"></div>
        <div class="contents">
            <ul>
                <li><a href="#"><img src="https://cdn.pixabay.com/photo/2022/11/19/18/45/gray-geese-7602847__340.jpg" alt=""></a></li>
                <li><a href="#"><img src="https://cdn.pixabay.com/photo/2022/12/07/16/23/snow-7641544__340.jpg" alt=""></a></li>
                <li><a href="#"><img src="https://cdn.pixabay.com/photo/2022/03/03/17/53/thuja-7045798__340.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>

CSS

*{margin: 0; padding: 0;}
ul{list-style: none;}
a{text-decoration: none; color: #333;}

nav{position: absolute; z-index: 100; width: 100%; height: 40px; background: #fff;}
nav>ul{display: flex; height: 40px; justify-content: center; overflow: hidden; transition: .4s; z-index: 3;}
nav>ul.active{height: 228px;}
nav>ul>li{}
nav>ul>li>a{display: block; padding: 10px 40px; height: 20px; color: #666; background: #fff;}
nav>ul>li>ul.active{display: block; background: #888;}
nav>ul>li>ul li a{
    display: block;
    padding: 0 35px 0 40px;
    color: #ccc;
    transition: .4s;
    line-height: 38px;
}
.sub_shadow{
    position: absolute;
    width: 100%;
    top: 40px;
    left: 0;
    height: 0;
    background: rgb(44, 75, 58);
    transition: .4s;
    z-index: 2;
}
nav+.sub_shadow.active{
    height: 188px;
}
.contents{width: 100%; position: relative; z-index: 1;}
.contents ul{width: 100%;}
.contents ul li{width: 100%; position: absolute;}
.contents ul li img{width: 100%;}

script

$('nav').hover(function(){
    $(this).children('ul').addClass('active')
    $(this).next('.sub_shadow').addClass('active')
},function(){
    $(this).children('ul').removeClass('active')
    $(this).next('.sub_shadow').removeClass('active')
});
$('nav>ul>li>ul').hover(function(){
    $(this).addClass('active')
},function(){
    $(this).removeClass('active')
});

JQuery tabs

tabs 1-1

결과

HTML

 <div class="all">
        <div class="tabSet">
            <ul class="tabs">
                <li><a href="#panel_01" class="on">panel01</a></li>
                <li><a href="#panel_02">panel02</a></li>
                <li><a href="#panel_03">panel03</a></li>
                <li><a href="#panel_04">panel04</a></li>
            </ul>
            <div class="panels">
                <div class="panel" id="panel_01">
                    01. Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt quibusdam aliquam laboriosam,
                </div>
                <div class="panel" id="panel_02">
                    02. vitae nihil sequi odit adipisci id ipsum consequuntur debitis aperiam ab praesentium ut libero, eaque ex expedita vel?
                </div>
                <div class="panel" id="panel_03">
                    03. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis voluptate nemo dolores eos molestias atque
                </div>
                <div class="panel" id="panel_04">
                    04. enim ad porro nam ipsa non perferendis inventore quia quibusdam in explicabo quae! Quis, reprehenderit!
                </div>
            </div>
        </div>
        <div class="tabSet">
            <ul class="tabs">
                <li><a href="#panel_05" class="on">panel01</a></li>
                <li><a href="#panel_06">panel02</a></li>
                <li><a href="#panel_07">panel03</a></li>
                <li><a href="#panel_08">panel04</a></li>
            </ul>
            <div class="panels">
                <div class="panel" id="panel_05">
                    01. Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt quibusdam aliquam laboriosam,
                </div>
                <div class="panel" id="panel_06">
                    02. vitae nihil sequi odit adipisci id ipsum consequuntur debitis aperiam ab praesentium ut libero, eaque ex expedita vel?
                </div>
                <div class="panel" id="panel_07">
                    03. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis voluptate nemo dolores eos molestias atque
                </div>
                <div class="panel" id="panel_08">
                    04. enim ad porro nam ipsa non perferendis inventore quia quibusdam in explicabo quae! Quis, reprehenderit!
                </div>
            </div>
        </div>
    </div>

CSS

@charset "utf-8";
*{margin: 0; padding: 0;}
ul{list-style: none;}
a{text-decoration: none; color: #333;}

.all{width: 610px; margin: 50px auto;}
.tabSet{padding: 3px; border: 2px solid tomato; margin-bottom: 5px;}
.tabSet .tabs{display: flex;}
.tabSet .tabs li{margin-right: 2px;}
.tabSet .tabs li a{display: block; padding: 10px 15px; background: rgb(108, 108, 235);}
.tabSet .tabs li a.on{background: rgb(39, 39, 108); color: #fff;}
.tabSet .panels{position: relative; width: 100%; height: 100px; box-sizing: border-box; padding-top: 20px;}
.tabSet .panels .panel{display: none;}

script

$('.tabSet').each(function(){
    let tapDiv=$(this);
    let anchors=tapDiv.find('ul.tabs li a');
    let panelDivs=tapDiv.find('panel');
    let lastAnchor;
    let lastPanel;

    lastAnchor=anchors.filter('.on')
    lastPanel=$(lastAnchor.attr('href'));

    panelDivs.hide();
    lastPanel.show();

    anchors.click(function(e){
        e.preventDefault();
        let currentAnchor=$(this);
        let currentPanel=$(currentAnchor.attr('href'));
        lastAnchor.removeClass('on')
        currentAnchor.addClass('on')

        lastPanel.hide();
        currentPanel.show();

        lastAnchor=currentAnchor;
        lastPanel=currentPanel;
    });
});

tabs 1-2

결과

마우스 click 과 웹접근성을 위하여 'tab' 키를 눌러 키보드로 focus가 되어도 탭메뉴가 선택되게 한다.

HTML

    <div class="tabmenu">                    
        <ul>
            <li class="active">
                <a href="#panel_01">공지사항1</a>
                <ul class="panel on" id="panel_01">
                    <li><a href="#">첫번째 공지사항 메뉴 탭 목록입니다. 첫번째 공지사항 메뉴 탭 목록입니다.</a></li>
                    <li><a href="#">첫번째 공지사항 메뉴 탭 목록입니다. 첫번째 공지사항 메뉴 탭 목록입니다.</a></li>
                    <li><a href="#">첫번째 공지사항 메뉴 탭 목록입니다. 첫번째 공지사항 메뉴 탭 목록입니다.</a></li>
                </ul>
            </li>
            <li>
                <a href="#panel_02">공지사항2</a>
                <ul class="panel" id="panel_02">
                    <li><a href="#">두번째 공지사항 메뉴 탭 목록입니다. 두번째 공지사항 메뉴 탭 목록입니다.</a></li>
                    <li><a href="#">두번째 공지사항 메뉴 탭 목록입니다. 두번째 공지사항 메뉴 탭 목록입니다.</a></li>
                    <li><a href="#">두번째 공지사항 메뉴 탭 목록입니다. 두번째 공지사항 메뉴 탭 목록입니다.</a></li>
                </ul>
            </li>
            <li>
                <a href="#panel_03">공지사항3</a>
                <ul class="panel" id="panel_03">
                    <li><a href="#">세번째 공지사항 메뉴 탭 목록입니다. </a></li>
                    <li><a href="#">세번째 공지사항 메뉴 탭 목록입니다. </a></li>
                    <li><a href="#">세번째 공지사항 메뉴 탭 목록입니다. </a></li>
                </ul>
            </li>
        </ul>
    </div>

CSS

@charset "utf-8";
*{margin: 0; padding: 0;}
ul{list-style: none;}
a{text-decoration: none; color: #333;}

.tabmenu{
    margin: 50px auto;
    width: 500px;
    height: 160px;
    border: 2px solid tomato;
    overflow: hidden;
}
.tabmenu > ul{
    display: flex;
    position: relative;
}
.tabmenu > ul >li{
    margin-right: 5px;
    background: turquoise;
}
.tabmenu > ul >li.active{}
.tabmenu > ul >li >a{
    display: block;
    padding: 10px;
    color: #fff;
}
.tabmenu > ul >li >ul{
    display: none;
    position: absolute;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
}
.tabmenu > ul >li >ul.on{
    display: block;
}

script

$('.tabmenu > ul >li >a').click(function(e){
    e.preventDefault();
    $('.tabmenu > ul >li ul').removeClass('on')
    $(this).next('ul').addClass('on')
});
$('.tabmenu > ul >li >a').on({"focusin":function(){
    $('.tabmenu > ul >li ul').removeClass('on')
    $(this).next('ul').addClass('on')
}}); 

this를 잘 사용하여 구성한다.

0개의 댓글