반응형 페이지 제작 2-1

디자인 호텔스 클론코딩

결과

HTML

<div id="wrap">
		<ul id="skip">
			<li><a href="#header">헤더 바로가기</a></li>
			<li><a href="#nav">메뉴 바로가기</a></li>
			<li><a href="#content">내용 바로가기</a></li>
		</ul>
		<div class="mobile-menu">
			<div class="container">
				<div class="mobile-menu-bar">
					<span class="moda-logoBt-wrap">
						<a href="index01_01.html" class="logoBt" title="logo"><img src="./img/logo-icon-dh.png" alt="Logo"></a>
					</span>
					<span class="mobile-appBar-wrap">
						<a href="javascript:void()" class="appbarCloseBt" title="appbarBt">
							<i class="appbar-line appbar-line1"></i>
							<i class="appbar-line appbar-line2"></i>
						</a>
					</span>
				</div>
				<div class="mobile-menu-list">
					<ul>
						<li><a href="javascript:" title="HOTELS & RESORTS">HOTELS & RESORTS</a></li>
						<li><a href="javascript:" title="DEALS">DEALS</a></li>
						<li><a href="javascript:" title="ORIGINAL EXPERIENCES">ORIGINAL EXPERIENCES</a></li>
						<li><a href="javascript:" title="CULTURE">CULTURE</a></li>
						<li><a href="javascript:" title="GALLERY">GALLERY</a></li>
						<li><a href="javascript:" title="STORE">STORE</a></li>
						<li><a href="javascript:" title="ABOUT US">ABOUT US</a></li>
					</ul>
				</div>
				<div class="mobile-menu-footer">
					<p>
						Become a member <br>
						to enjoy the best benefits!
					</p>
					<div class="mobile-menu-footer-button">
						<button>JOIN</button>
						<button>LOGIN</button>
						<button>SUBSCRIBE</button>
					</div>
					<div class="mobile-menu-footer-sns">
						<span><a href="javascript:"><i class="fab fa-instagram"></i></a></span>
						<span><a href="javascript:"><i class="fab fa-facebook-square"></i></a></span>
						<span><a href="javascript:"><i class="fab fa-pinterest-p"></i></a></span>
						<span><a href="javascript:"><i class="fab fa-twitter"></i></a></span>
						<span><a href="javascript:"><i class="fab fa-youtube"></i></span>
					</div>
				</div>
			</div>
		</div>
		<header id="header"></header>
	</div>

SCSS

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

$white: #fff;
$white-opacity: rgba(255, 255, 255, .6);
$orange: rgba(169, 108, 22, 1);
$gray: #aaa;
$black: #222;

body{font-family: 'Noto Sans KR', sans-serif;}

@mixin buttonBox{
    background: #000;
    padding: 0 30px;
    height: 48px;
    color: $white-opacity;
    &:hover{
        color: $white;
    }
}

.mobile-menu{
    position: fixed;
    display: none;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: $black;
    .container{
        padding: 0 30px;
        .mobile-menu-bar{
            display: flex;
            justify-content: space-between;
            height: 68px;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, .15);
            .moda-logoBt-wrap{
                width: 24px; 
                height: 24px;
                display: block;
                a{
                    display: block;
                    img{
                        width: 100%;
                    }
                }
            }
            .mobile-appBar-wrap{
                width: 22px;
                height: 14px;
                display: block;
                a{
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 100%;
                    i{
                        display: block;
                        position: absolute;
                        width: 100%;
                        height: 2px;
                        background: $white;
                        top: 50%;
                        margin-top: -1px;
                        &.appbar-line1{transform: rotate(45deg);}
                        &.appbar-line2{transform: rotate(-45deg);}
                    }
                }
            }
        }
        .mobile-menu-list{
            width: 100%;
            ul{
                width: 100%;
                li{
                    padding: 10px 0;
                    border-bottom: 1px solid rgba(255, 255, 255, .15);
                    a{
                        color: $white-opacity;
                        font-size: 16px;
                        &:hover{color: $white;}
                    }
                    &:nth-child(3) a{
                        color: $orange;
                    }
                }
            }
        }
        .mobile-menu-footer{
            p{
                color: $white-opacity;
                font-size: 16px;
                padding-top: 20px;
                line-height: 140%;
                font-weight: 500;
            }
            .mobile-menu-footer-button{
                margin-top: 20px;
                button{
                    @include buttonBox();
                }
            }
            .mobile-menu-footer-sns{
                margin-top: 20px;
                span{
                    display: inline-block;
                    margin: 0 4px;
                    a{
                        width: 27px;
                        height: 27px;
                        display: block;
                        border-radius: 50%;
                        background: $gray;
                        text-align: center;
                        transition: .3s;
                        &:hover{
                            background: $white;
                        }
                        i{
                            display: block;
                            color: $black;
                            font-size: 15px;
                            line-height: 27px;
                        }
                    }
                }
            }
        }
    }
}

모바일 720px 사이즈로 메뉴바를 먼저 제작하였다. left 100%를 벗어난 영역에서 나타나는 효과를 만들기 위해 position: fixed; , display: none; , left: -100% 를 적용한다.

left: -100% 로 나간 모습

* 오늘 처음 알게된 사실인데 fixed를 한 상황에서 left방향으로 화면 밖을 나가더라도 스크롤이 생기지 않았다. right로 나가게 되면 fixed(를 하지 않은 상태)를 하지 않으면 스크롤이 생기고 fixed를 하면 스크롤이 생기지 않았따.

[복습]SCSS를 사용하여 반응형 페이지를 제작한다.

  • 사용할 컬러나 사이즈를 변수로 지정하여 사용한다. ex) $white: #fff;
  • @mixin 을 사용하여 자주사용하는 ex) box 디자인, 스타일, 보더스타일 등을 mixin 하여 include 한다.
  • hover, after, before 을 사용 할 경우 &:hover, &:after등을 사용한다.
  • 자식요소는 중괄호 안에, 형제요소는 중괄호에 같은 위치에 구성한다.

font awesome 사용

  1. 구글에 font awesome 또는 https://fontawesome.com/ 주소를 검색한다.

  1. 사용하기 앞서 font awesome 킷코드를 받아야한다. 메뉴 중 'start'에서 가입과 send kit code를 눌러 메일로 킷코드를 받는다.

  1. 받은 킷 코드를 html script 위치에 복사 한다.

ex)

<script src="https://kit.fontawesome.com/ 받은 킷코드.js" crossorigin="anonymous"></script>
  1. 'icons' 에서 사용하고 싶은 아이콘 키워드를 검색하고 'free'로 찾는다. 버전은 6.2.1은 유료가 많으므로 5.15.4 버전으로 검색한다.

  1. 화면이 나오면 우측에 HTML, React, Vue 종류로 나오며 HTML을 선택하고 html을 복사한다.

  1. 사용하고자 하는 선택자에 복사하면 아이콘이 나오며 font awesome의 아이콘은 font-size로 사이즈 변경이 가능하다.

ex) 사용예시


favicon

이번 페이지 제작도 역시 title에 favicon을 만든다. 저번 수업과 마찬가지로
https://www.favicon-generator.org/에 들어가 로고를 만들고 싶은 png나 이미지 파일을 준비한다

JQuery

JQuery Menu 1-1

결과

HTML

<div id="wrap">
        <ul id="nav">
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu01.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu01.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu01_on.gif" alt=""></a></div>
                </div>
            </li>
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu02.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu02.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu02_on.gif" alt=""></a></div>
                </div>
            </li>
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu03.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu03.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu03_on.gif" alt=""></a></div>
                </div>
            </li>
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu04.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu04.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu04_on.gif" alt=""></a></div>
                </div>
            </li>
        </ul>
    </div>

CSS

*{margin: 0; padding: 0;}
ul{list-style: none;}
#wrap{margin: 100px auto; width: 300px;}
#nav li{width: 113px; cursor: pointer;}
#nav .menu_image{height: 0; overflow: hidden;}
#nav .menu_image a img{height: 97px;}
#nav .text_image{text-align: center; padding: 10px 0;}
#nav .text_image .on{display: none;}

script

let menu=$('#nav li');
menu.on({"mouseover":function(){
    let tg=$(this);
    let onImg=tg.find('.text_image>.on');
    let offImg=tg.find('.text_image>.off');
    let menuImage=tg.find('.menu_image');
    let imageHeight=menuImage.find('img').innerHeight();
    //console.log(imageHeight);
    onImg.css('display','block');
    offImg.css('display','none');
    menuImage.animate({
        height: imageHeight
    },{duration: 500, queue: false, easing: 'easeOutCubic'});
}
});
menu.on({"mouseout":function(){
    let tg=$(this);
    let onImg=tg.find('.text_image>.on');
    let offImg=tg.find('.text_image>.off');
    let menuImage=tg.find('.menu_image');
    let imageHeight=0;
    onImg.css('display','none');
    offImg.css('display','block');
    menuImage.animate({
        height: imageHeight
    },{duration: 500, queue: false, easing: 'easeOutCubic'});
}
});

mouseovermouseout의 함수를 만든다.

#nav li 를 변수 menu를 만들어 준다.

tg.find를 사용하여 이미지를 mouseover를 하였을때 on, off 기능을 만든다.

JQuery Menu 1-2

결과

HTML

<div id="wrap">
        <ul id="nav">
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu01.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu01.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu01_on.gif" alt=""></a></div>
                </div>
            </li>
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu02.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu02.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu02_on.gif" alt=""></a></div>
                </div>
            </li>
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu03.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu03.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu03_on.gif" alt=""></a></div>
                </div>
            </li>
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu04.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu04.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu04_on.gif" alt=""></a></div>
                </div>
            </li>
        </ul>
    </div>

CSS

*{margin: 0; padding: 0;}
ul{list-style: none;}
#wrap{width: 800px; margin: 100px auto; }
#nav li{cursor: pointer;float: left;}
#nav .menu_image{width: 0; overflow: hidden;float: left; }
#nav .menu_image a img{width: 97px;}
#nav .text_image{float: left; line-height: 97px; text-align: center;  margin-right: 20px;}
#nav .text_image .on{display: none;}

#nav li , #nav .menu_image , #nav .text_imagefloat: left; 한다. 호버를 하면 이미지가 밀어 내므로 넓이 값은 부여하지 않는다.

script

let menu=$('#nav li');

menu.on({"mouseover":function(e){
    let tg=$(this);
    let onImg=tg.find('.text_image>.on');
    let offImg=tg.find('.text_image>.off');
    let menuImage=tg.find('.menu_image');
    let imageWidth=menuImage.find('img').innerWidth();
    onImg.css('display','block');
    offImg.css('display','none');
    menuImage.animate({
        width: imageWidth
    },{duration: 300, queue: false, easing:'easeOutCubic'});
    }
}); 
menu.on({"mouseout":function(){
    let tg=$(this);
    let onImg=tg.find('.text_image>.on');
    let offImg=tg.find('.text_image>.off');
    let menuImage=tg.find('.menu_image');
    let imageWidth=0;
    onImg.css('display','none');
    offImg.css('display','block');
    menuImage.animate({
        width: imageWidth
    },{duration: 300, queue: false, easing:'easeOutCubic'});
}
});

JQuery Menu 1-1 과 같이 자바스크립트 구성은 비슷하지만 가로로 정렬되어 있기 때문에 height값이 아닌 width 값으로 수정하여야한다.

JQuery Menu 1-3

결과

이번은 3번째 '금융상품' '짬뽕늬우스'가 열려 있는 상태이며 mouseout 상태에서는 다시 열려 있는 상태로 돌아온다.

HTML

<div id="wrap">
        <ul id="nav">
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu01.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu01.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu01_on.gif" alt=""></a></div>
                </div>
            </li>
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu02.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu02.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu02_on.gif" alt=""></a></div>
                </div>
            </li>
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu03.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu03.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu03_on.gif" alt=""></a></div>
                </div>
            </li>
            <li>
                <div class="menu_image"><a href="#"><img src="./img/bgMenu04.gif" alt=""></a></div>
                <div class="text_image">
                    <div class="off"><a href="#"><img src="./img/menu04.gif" alt=""></a></div>
                    <div class="on"><a href="#"><img src="./img/menu04_on.gif" alt=""></a></div>
                </div>
            </li>
        </ul>
    </div>

CSS

*{margin: 0; padding: 0;}
ul{list-style: none;}
#wrap{width: 800px; margin: 100px auto; }
#nav li{cursor: pointer;float: left;}
#nav .menu_image{width: 0; overflow: hidden;float: left; }
#nav .menu_image a img{width: 97px;}
#nav .text_image{float: left; line-height: 97px; text-align: center;  margin-right: 20px;}
#nav .text_image .on{display: none;}

script

let menu=$('#nav li');

menu.on({"mouseover":function(){
    close();
    let tg=$(this);
    let onImg=tg.find('.text_image>.on');
    let offImg=tg.find('.text_image>.off');
    let menuImage=tg.find('.menu_image');
    let imageWidth=menuImage.find('img').innerWidth();
    onImg.css('display','block');
    offImg.css('display','none');
    menuImage.animate({
        width: imageWidth
    },{duration: 300, queue: false, easing:'easeOutCubic'});
    }
}); 
menu.on({"mouseout":function(){
    let tg=$(this);
    let onImg=tg.find('.text_image>.on');
    let offImg=tg.find('.text_image>.off');
    let menuImage=tg.find('.menu_image');
    let imageWidth=0;
    onImg.css('display','none');
    offImg.css('display','block');
    menuImage.animate({
        width: imageWidth
    },{duration: 300, queue: false, easing:'easeOutCubic'});
    open();
}
});
open();
function open(){
    let tg=$('#nav>li').eq(2);
    let onImg=tg.find('.text_image>.on');
    let offImg=tg.find('.text_image>.off');
    let menuImage=tg.find('.menu_image');
    let imageWidth=menuImage.find('img').innerWidth();
    //console.log(imageHeight);
    onImg.css('display','block');
    offImg.css('display','none');
    menuImage.animate({
        width: imageWidth
    },{duration: 300, queue: false, easing:'easeOutCubic'});
    }

function close(){
    let tg=$('#nav>li').eq(2);
    let onImg=tg.find('.text_image>.on');
    let offImg=tg.find('.text_image>.off');
    let menuImage=tg.find('.menu_image');
    let imageWidth=0;
    onImg.css('display','block');
    offImg.css('display','none');
    menuImage.animate({
        width: imageWidth
    },{duration: 300, queue: false, easing:'easeOutCubic'});
}

tg=$('#nav>li').eq(2); 를 만들고 eq2째를 open 함수 닫히는 close 함수를 만든다. 맨처음 만든 함수에 첫번째는 close를 넣고 mouseout에는 open 를 넣는다.

jquery Menu 1-4 (2depth)

결과

HTML

<body>
    <div class="container">
        <nav>
            <ul>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </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/11/24/15/18/car-7614510__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>
            </ul>
        </div>
    </div>

CSS

@charset "utf-8";

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

nav{}
nav>ul{display: flex; background: rgb(238, 221, 255);}
nav>ul>li{}
nav>ul>li>a{padding: 10px 40px; display: block; position: relative;}
nav>ul>li>a::after{display: block; position: absolute; content: ''; width: 0; height: 2px; bottom: 0; left: 50%; background: #f00; transition: .3s;}
nav>ul>li:hover>a::after{width: 100%; left: 0;}
nav>ul>li>ul{display: none; position: absolute; z-index: 1; background: #000;} 
nav>ul>li>ul>li:not(:last-child){border-bottom: 1px solid #ddd;}
nav>ul>li>ul>li>a{color: #fff; padding: 10px 40px; display: block;}

.contents{width: 100%; position: relative;}
.contents ul{width: 100%;}
.contents ul li{width: 100%; position: absolute;}
.contents ul li img{width: 100%;}

script

$('nav>ul>li>a').on({"mouseover focusin":function(){
    $(this).next("ul").stop().slideDown(300)
},"mouseout":function(){
    $(this).next("ul").stop().slideUp(300)
}});
$('nav>ul>li ul li:last-child').focusout(function(){
    $(this).parent('ul').stop().slideUp(300);
});

각 2depth가 1depth 자식요소 메뉴만 열린다. nav>ul>li>a 의 next("ul") 을 단독으로slideDown, slideUp을 시킨다.

jquery Menu 1-5 (2depth)

결과

HTML

 <div class="container">
        <nav>
            <ul>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </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/11/24/15/18/car-7614510__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>
            </ul>
        </div>
    </div>

CSS

@charset "utf-8";

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

nav{}
nav>ul{display: flex; background: rgb(238, 221, 255);}
nav>ul>li{}
nav>ul>li>a{padding: 10px 40px; display: block; position: relative;}
nav>ul>li>a::after{display: block; position: absolute; content: ''; width: 0; height: 2px; bottom: 0; left: 50%; background: #f00; transition: .3s;}
nav>ul>li:hover>a::after{width: 100%; left: 0;}
nav>ul>li>ul{display: none; position: absolute; z-index: 1; background: #000;} 
nav>ul>li>ul>li:not(:last-child){border-bottom: 1px solid #ddd;}
nav>ul>li>ul>li>a{color: #fff; padding: 10px 40px; display: block;}

.contents{width: 100%; position: relative;}
.contents ul{width: 100%;}
.contents ul li{width: 100%; position: absolute;}
.contents ul li img{width: 100%;}

script

$('nav>ul>li>a').on({"mouseover focusin":function(){
    $('nav>ul>li>a').next("ul").stop().slideDown(300)
},"mouseout":function(){
    $('nav>ul>li>a').next("ul").stop().slideUp(300)
}});
$('nav>ul>li ul li:last-child').focusout(function(){
    $('nav>ul>li ul li:last-child').parent('ul').stop().slideUp(300);
});

menu 1-4와는 다르게 1depth를 mouseover 하면 2depth 전체가 열린다.
$(this).next("ul") 을 하면 해당 mouseover의 자식 2depth만 열렸지만 $('nav>ul>li>a').next("ul") 를 하여 전체의 ul을 선택하여 전체가 열리게 만들어 준다.

jquery Menu 1-6 (2depth)

결과

HTML

<div class="container">
        <nav>
            <ul>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </li>
                <li><a href="javascript:">1Depth</a>
                    <ul>
                        <li><a href="javascript:">2Depth</a></li>
                        <li><a href="javascript:">2Depth</a></li>
                    </ul>
                </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/11/24/15/18/car-7614510__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>
            </ul>
        </div>
    </div>

CSS

@charset "utf-8";

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

nav{position: absolute; width: 100%; background: #999; z-index: 2;}
nav>ul{display: flex; height: 40px; justify-content: center; overflow: hidden;}
nav>ul>li>a{display: block; padding: 10px 40px; color: #fff; font-weight: bold;}
nav>ul>li>ul a{display: block; padding: 0 40px; line-height: 38px; color: #ccc; transition: .3s;}
nav>ul>li>ul>a:hover, nav>ul>li>ul>a:focus{text-decoration: underline; color: #fff;}

.contents{width: 100%; position: relative;}
.contents ul{width: 100%;}
.contents ul li{width: 100%; position: absolute;}
.contents ul li img{width: 100%;}

script

$('nav>ul').hover(function(){
    $(this).stop().animate({height:250},500);
},function(){
    $(this).stop().animate({height:40},500);
});
$('nav>ul').focusin(function(){
    $(this).stop().animate({height:250},500);
});
$('nav>ul').focusout(function(){
    $(this).stop().animate({height:40},500);
});

menu 1-5 번과 다르게 전체가 같은 크기로 나오게 된다. mouseover가 아닌 hover를 사용하고 animate를 사용하여 높이값을 정하여 2depth가 열린다.

문제 , 고민

-문제해결-
*2022-12-12 기존에 css로 만든 2depth 메뉴 중 높이 값이 auto로 된 메뉴가 있다. 아직까지는 해결하지 못하는 부분이다. 각 2depth 메뉴 높이값이 auto로 되어있어 innerHeight 값으로 해야할거 같은데 이부분이 지금 관공서를 만드는데 어려움이 생기고 있다.

innerHeight 값으로 하니 이렇게 전체영역의 높이값을 가지고 2depth가 내려온다.. 2depth li의 height값을 변수로 만들어야 하는건지.. 어렵다 생각을 조금 더 해봐야 할 거 같다.
let imageHeight=menuImage.find('img').innerHeight(); 이부분을 바꿔서 사용하면 될듯하다.

0개의 댓글