티스토리 뷰
웹 디자인 기능사 예제사이트입니다.
탭메뉴와 리스트까지 사용할수 있는 예제를 만들었습니다.
이미지파일은 위에서 받아가시면됩니다!
스크립트를 사용하실때는 Jquery.js를 다운받으셔야합니다.
제이쿼리 다운로드 사이트 https://jquery.com/
<script src="script/jquery.min_1.12.4.js"></script>
참조 유튜브 https://www.youtube.com/watch?v=r2A0HXyjQL0&list=PL4UVBBIc6giIpzhQ4UWVCs64UzLQpdO5B
SCRIPT 소스
$(".nav > ul > li").mouseover(function(){
$(".nav > ul > li").find(".submenu").stop().slideDown(500);
});
$(".nav > ul > li").mouseout(function(){
$(".nav > ul > li").find(".submenu").stop().slideUp(500);
});
//탭메뉴
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);
HTML 소스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>롯데월드</title>
<!-- style -->
<link rel="stylesheet" href="css/lottestyle.css">
</head>
<body>
<div id="wrap">
<header id="header" class="clearfix">
<h1><a href="#"><img src="img/lotteimg/logo.jpg" 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-2</a></li>
<li><a href="#">subMenu-3</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-2</a></li>
<li><a href="#">subMenu-3</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-2</a></li>
<li><a href="#">subMenu-3</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-2</a></li>
<li><a href="#">subMenu-3</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-2</a></li>
<li><a href="#">subMenu-3</a></li>
<li><a href="#">subMenu-4</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- //header -->
<section id="banner">
<div class="slideList">
<div class="slideImg">
<!-- <h2>이미지1</h2> -->
<img src="img/lotteimg/banner01.jpg" alt="메리크리스마스1">
</div>
<div class="slideImg">
<!-- <h2>이미지2</h2> -->
<img src="img/lotteimg/banner01.jpg" alt="메리크리스마스2">
</div>
<div class="slideImg">
<!-- <h2>이미지3</h2> -->
<img src="img/lotteimg/banner01.jpg" alt="메리크리스마스3">
</div>
</div>
</section>
<!-- //banner -->
<section id="content1" class="clearfix">
<article class="notice">
<ul class="clearfix">
<li class="active"><a href="#">롯데월드 소식</a>
<ul>
<li><a href="#">1. 첫번째 목록입니다. 첫번째 목록입니다. 첫번째 목록입니다.</a><span>2019.05.03</span></li>
<li><a href="#">1. 첫번째 목록입니다. 첫번째 목록입니다. 첫번째 목록입니다.</a><span>2019.05.03</span></li>
<li><a href="#">1. 첫번째 목록입니다. 첫번째 목록입니다. 첫번째 목록입니다.</a><span>2019.05.03</span></li>
<li><a href="#">1. 첫번째 목록입니다. 첫번째 목록입니다. 첫번째 목록입니다.</a><span>2019.05.03</span></li>
</ul>
</li>
<li><a href="#">뉴스·공지</a>
<ul>
<li><a href="#">2. 두번째 목록입니다. 두번째 목록입니다. 두번째 목록입니다.</a><span>2019.05.03</span></li>
<li><a href="#">2. 두번째 목록입니다. 두번째 목록입니다. 두번째 목록입니다.</a><span>2019.05.03</span></li>
<li><a href="#">2. 두번째 목록입니다. 두번째 목록입니다. 두번째 목록입니다.</a><span>2019.05.03</span></li>
<li><a href="#">2. 두번째 목록입니다. 두번째 목록입니다. 두번째 목록입니다.</a><span>2019.05.03</span></li>
</ul>
</li>
</ul>
<a href="#" class="more">더보기 +</a>
</article>
<figure class="ad">
<a href="#"><img src="img/lotteimg/ad.jpg" alt="온종일 혜택"></a>
</figure>
</section>
<!-- //banner -->
<section id="content2">
<h2>특별한 경험</h2>
<ul class="clearfix">
<li>
<a href="#">
<img src="img/lotteimg/s1.jpg" alt="연간회원안내">
<span>연간회원안내</span>
</a>
</li>
<li>
<a href="#">
<img src="img/lotteimg/s2.jpg" alt="연간회원안내">
<span>연간회원안내</span>
</a>
</li>
<li>
<a href="#">
<img src="img/lotteimg/s3.jpg" alt="연간회원안내">
<span>연간회원안내</span>
</a>
</li>
<li>
<a href="#">
<img src="img/lotteimg/s4.jpg" alt="연간회원안내">
<span>연간회원안내</span>
</a>
</li>
</ul>
</section>
<!-- //content2 -->
<footer id="footer">
<address>
<ul>
<li class="left">서울 특별시 송파구 올림픽로 240 롯데월드</li>
<li>대표자: 박동기</li>
<li>사업자등록번호: 229-093-00392</li>
<li class="left">통신판매업신고번호: 384-02894-90348</li>
<li>전화: 02-3045-3943</li>
</ul>
<p>Copyright2018 Lotterworld, All Right RESERVED.</p>
</address>
</footer>
<!-- //footer -->
</div>
<!-- 팝업 -->
<div class="layer_bg">
<div class="layer">
<h2>타이틀</h2>
<a href="#" class="close">닫기</a>
</div>
</div>
<script src="script/jquery.min_1.12.4.js"></script>
<script src="script/script.js"></script>
</body>
</html>CSS소스
/* reset */
* {margin: 0; padding: 0; font-size: 16px;}
li {list-style: none;}
a {color: #333; text-decoration: none;}
.clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}
/* wrap */
#wrap {width: 1000px; height: 1000px; margin: 0 auto; }
/* //header */
#header {height: 100px;}
#header h1 {float: left; padding-top: 5px;}
#header h1 img {width: 130px;}
#header .nav {float: right; z-index: 100; position: relative; margin-top: 20px;}
#header .nav li {position: relative; float: left; width: 120px; text-align: center;}
#header .nav li a {display: block; padding: 20px 15px; background: #ccc; white-space: nowrap;}
#header .nav li a:hover {background: #ddd;}
#header .nav li ul.submenu {display: none; position: absolute; left: 0; top: 59px; background: #ddd;}
#header .nav li ul.submenu li a {padding: 10px;}
#header .nav li ul.submenu li a:hover {background: #999;}
/* banner */
#banner {width: 1000px; height: 378px; overflow: hidden;}
#banner img {width: 100%;}
.slideList {position: relative;}
.slideList .slideImg {position: relative;}
.slideList .slideImg h2 {position: absolute; left: 50%; top: 50%;
transform: translate(-50%,-50%); background: rgba(0,0,0,0.5);
padding: 10px 30px; border-radius: 25px; color: #fff;}
.slideList .slideImg img {display: block;}
/* content1 */
#content1 {margin-top: 15px;}
#content1 .notice {float: left; width: 49%; height: 220px; margin-right: 2%;
border: 1px solid #ccc; box-sizing: border-box;}
#content1 .ad {float: left; width: 49%; margin-right: 0;}
#content1 .ad img {width: 100%; display: block;}
/* notice */
.notice {position: relative; padding: 30px;}
.notice ul li {float: left; margin-right: 20px;}
.notice ul li a {font-size: 24px; color: #999; font-weight: bold; white-space: nowrap;}
.notice ul li.active a {color: #000;}
.notice ul li ul {position: absolute; left: 30px; top: 70px;}
.notice ul li ul li {width: 95%; padding: 5px 0;}
.notice ul li ul li a {float: left; width: 60%; font-size: 16px; color: #333;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal;}
.notice ul li ul li span {float: right; width: 20%;}
.notice .more {position: absolute; right: 30px; top: 35px;}
/* content2 */
#content2 {margin-top: 25px;}
#content2 h2 {margin-bottom: 10px;}
#content2 li {float: left; width: 24.25%; margin-right: 1%;}
#content2 li:last-child {margin-right: 0;}
#content2 li img {width: 100%;}
#content2 li span {display: block; padding: 10px 0;}
/* footer */
#footer {border-top: 1px solid #ccc; margin-top: 30px; padding: 30px 0;}
#footer address {font-style: normal; color: #666;}
#footer address ul {width: 670px;}
#footer address li {position: relative; display: inline; line-height: 1.7; padding: 0px 15px 0px 10px;}
#footer address li:after {content: ''; width: 1px; height: 13px; background: #666; position: absolute; right: 0; top: 0;}
#footer address li.left {padding-left: 0;}
#footer address p {text-transform: uppercase; padding-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;
border: 2px solid #000;
position: absolute;
left: 50%; top: 50%; z-index: 1000;
transform: translate(-50%, -50%);
}
.layer h2 {padding: 20px; font-size: 30px;}
.layer .close {position: absolute; bottom: 20px; right: 30px; font-size: 20px;}
반응형
'웹 디자인 기능사 준비' 카테고리의 다른 글
| 웹디자인 기능사 준비 예제 - COOKIT (6) | 2022.04.12 |
|---|
UP NEXT : 웹 디자인 기능사 준비
댓글
© 2022 babydevelop