결과
반응형 디자인 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% 가 있던 모바일 메뉴를 제이쿼리로 나오게 구현하였다. 하지만 모바일 메뉴만 오른쪽으로 밀려 나오는 것이 아니라 기존에 있는 헤더도 같이 밀려서 나가야 한다.
결과
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이 되면 클래스 삭제가 된다.
결과
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')
});
결과
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;
});
});
결과
마우스 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를 잘 사용하여 구성한다.