본문 바로가기
내마음대로만들어보자/HTML

웹디자인연습 - 컨텐츠영역(레이어팝업,탭메뉴)

by 소농민! 2022. 3. 15.
728x90
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>롯데월드 연습</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="wrap">
        <header id="header" class="clearfix">
            <h1><a href="#"><img src="images/logo.jpeg" alt="롯데월드"></a></h1>
            <nav class="nav">
                <ul class="clearfix">
                    <li><a href="#">즐길거리</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                        </ul>
                    </li>
                    <li><a href="#">요금/우대혜택</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">참여프로그램</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">이용가이드</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-4</a></li>
                            <li><a href="#">submenu-4</a></li>
                            <li><a href="#">submenu-4</a></li>
                            <li><a href="#">submenu-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">소통서비스</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <!-- //header -->
        <section id="banner">
            <div class="slideList">
                <div class="slideImg">
                    <h2>이미지1</h2>
                    <img src="images/banner01.jpeg" alt="롯데월드 이미지1">
                </div>
                <div class="slideImg">
                    <h2>이미지2</h2>
                    <img src="images/banner01.jpeg" alt="롯데월드 이미지2">
                </div>
                <div class="slideImg">
                    <h2>이미지3</h2>
                    <img src="images/banner01.jpeg" alt="롯데월드 이미지3">
                </div>
            </div>
        </section>
        <!-- //banner -->
        <section id="content1" class="clearfix">
            <aritcle class="notice">
                <ul class="clearfix">
                    <li class="active"><a href="#">롯데월드 소식</a>
                        <ul>
                            <li><a href="#">1.첫번쨰 소식입니다. 첫번쨰 소식입니다. 첫번째 소식입니다.</a>
                            <span>2022.03.15</span></li>
                            <li><a href="#">1.첫번쨰 소식입니다. 첫번쨰 소식입니다. 첫번째 소식입니다.</a>
                            <span>2022.03.15</span></li>
                            <li><a href="#">1.첫번쨰 소식입니다. 첫번쨰 소식입니다. 첫번째 소식입니다.</a>
                            <span>2022.03.15</span></li>
                            <li><a href="#">1.첫번쨰 소식입니다. 첫번쨰 소식입니다. 첫번째 소식입니다.</a>
                            <span>2022.03.15</span></li>
                        </ul>
                    </li>
                    <li><a href="#">뉴스&middot;공지</a>
                        <ul>
                            <li><a href="#">2.두번쨰 소식입니다. 두번쨰 소식입니다. 두번째 소식입니다.</a>
                            <span>2022.04.15</span></li>
                            <li><a href="#">2.두번쨰 소식입니다. 두번쨰 소식입니다. 두번째 소식입니다.</a>
                            <span>2022.04.15</span></li>
                            <li><a href="#">2.두번쨰 소식입니다. 두번쨰 소식입니다. 두번째 소식입니다.</a>
                            <span>2022.04.15</span></li>
                            <li><a href="#">2.두번쨰 소식입니다. 두번쨰 소식입니다. 두번째 소식입니다.</a>
                            <span>2022.04.15</span></li>
                        </ul>
                    </li>
                    <a href="#" class="more">더보기 +</a>
                </ul>
            </aritcle>
            <figure class="ad">
                <a href="#"><img src="images/ad.jpg" alt="온종일 혜택"></a>
            </figure>
        </section>
        <!-- //content1 -->
        <section id="content2">
            
        </section>
        <!-- //content2 -->
        <footer id="footer">
            
        </footer>
        <!-- //footer -->
    <!-- 레이어 팝업-->
    <div class="layer_bg">
        <div class="layer">
            <h2>레이어팝업 타이틀</h2>
            <a href="#" class="close">닫기</a>
        </div>
    </div>
    </div>
    <!-- //wrap -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="script/jquery.min_1.12.4.js"></script>
    <script src="script/custom.js"></script>
</body>
</html>
//메뉴

$(".nav > ul > li").hover(function(){
    $(this).find(".submenu").stop().slideDown();
}, function(){
    $(this).find(".submenu").stop().slideUp();
});

//이미지 슬라이드
var slideCount = $(".slideImg").length;
//console.log(slideCount);
var currentIndex = 0;

setInterval(function(){
    if(currentIndex < slideCount -1){
        currentIndex++
    }else{
        currentIndex = 0;
    }
    var slidePostion = currentIndex * (-378)+"px";
    
    $(".slideList").animate({ top:slidePostion},400);
},3000);

  
//탭메뉴
var tabMenu = $(".notice")
tabMenu.find("ul > li > ul").hide();
tabMenu.find("ul > li.active > ul").show();

function tabList(e){
    e.preventDefault;
    var target = $(this);
    
    target.next().show().parent("li").addClass("active").siblings("li").removeClass("active").find("ul").hide();
};

tabMenu.find("ul > li > a").click(tabList).focus(tabList);


//레이어팝업
$(".ad").click(function(){
    $(".layer_bg").css("display","block")
})
$(".close").click(function(){
    $(".layer_bg").css("display","none")
})
/* reset */
*{margin: 0; padding: 0;}
li {list-style: none;}
a {color: #111; text-decoration: none;}
.clearfix::before, .clearfix::after {content: ''; display: block; clear: both;}

/* 레이아웃 */
#wrap {width: 1000px;height: 1000px;margin: 0 auto; background: ;}
#header {}
#banner {}
#content1 {}
#content2 {}
#footer {}

/* header */
#header {height: 100px; background: ;}
#header h1 {float: left;}
#header h1 img {width: 150px;padding-top: 5px;}
#header nav {position: relative;float: right; z-index: 100; margin-top: 30px;}
#header nav ul {}
#header nav ul li {position: relative;float: left;width: 150px;text-align: center;}
#header nav ul li:hover {background: #888;}
#header nav ul li a {font-size: 20px;display: block; padding: 20px 15px;background: #fff;}
#header nav ul li ul.submenu {display: none ; position: absolute; left: 0; top: 60px;}
#header nav ul li ul.submenu li {float: left; width: 100%;}
#header nav ul li ul.submenu li a {font-size: 15px;padding: 10px;}
#header nav ul li ul.submenu li a:hover {background: #888;}

/* banner */
#banner {width: 1000px;height: 378px;overflow: hidden;}
#banner .slideList {position: relative;}
#banner .slideList .slideImg {position: relative;}
#banner .slideList .slideImg h2 {position: absolute;left: 50%; top: 50%; transform: translate(-50%, -50%);border-radius: 30px; background: rgba(0,0,0,0.5); padding: 10px 30px; color: #fff;}
#banner .slideList .slideImg img {width: 100%; display: block;}

/* content1 */
#content1 {margin-top: 10px;}
#content1 .notice {float: left;width: 49%; height: 220px; margin-right: 2%;border: 1px solid #ccc;box-sizing: border-box;}
#content1 .ad {width: 49%;float: left;margin-right: 0;}
#content1 .ad img {width: 100%; display: block;}

/* notice */
.notice {position: relative;padding: 30px;}
.notice ul {}
.notice ul li {float: left;margin-right: 40px;}
.notice ul li a {font-size: 20px;color: #ccc; font-weight: bold;}
.notice ul li.active a {color: #222;}
.notice ul li ul {position: absolute; left: 30px; top: 60px;}
.notice ul li ul li {width: 95%;padding: 2px 0;}
.notice ul li ul li a {float: left; width: 60%;font-size: 15px;color: #333; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.notice ul li ul li span {float: right; width: 20%;}
.notice .more {position: absolute; right: 30px; top: 30px;}

/* layer */
.layer_bg {display: none; width: 100%;height: 100%; background: rgba(0,0,0,0.8);position: fixed; left: 0; top: 0;z-index: 900;}
.layer {width: 500px;height: 500px;background: #ccc; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);z-index: 1000;}
.layer h2 {padding: 20px; font-size: 20px;}
.layer .close {position: absolute; bottom: 20px; right: 30px;font-size: 15px;}
저작자표시

'내마음대로만들어보자 > HTML' 카테고리의 다른 글

반응형 사이트 만들기 - 시맨틱 태크  (0) 2022.04.07
웹페이지 만들기 연습 - CookIt  (0) 2022.03.21
웹디자인 연습 - 이미지슬라이드  (0) 2022.03.14
웹디자인 연습 - 메뉴 영역  (0) 2022.03.13
웹디자인 연습 예제  (0) 2022.03.09

관련글

티스토리툴바