728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 디자인 기능사 - 탭메뉴</title>
<style>
/* reset */
* {margin: 0; padding: 0; font-size: 20px; color: #fff;}
a {color: #333; text-decoration: none;}
li {list-style: none;}
table {border-spacing: 0;}
.clearfix::before, .clearfix::after {display: block; content:''; clear:both;}
#wrap {width: 1200px; margin: 0px auto;}
#side {float: left; width: 300px;}
#content {float: left; width: 900px;}
/* header */
#side {text-align: center;}
#side .logo {width: 300px; height: 150px; line-height: 150px; background: #d1c4e9; }
#side .nav {width: 300px; height: 700px; background: #b7a8d4}
#side .nav ul li {text-align: center;background: #b39ddb;}
#side .nav ul li a {padding: 10px;display: block;color: #fff;background: rgba(0,0,0,0.3)}
#side .nav ul li a:hover {background: rgba(0,0,0,0.5)}
#side .nav ul li ul.submenu {display: none;}
/* banner */
#banner {width: 900px; text-align: center; height: 450px; line-height: 450px; background: #9575cd;}
/* contents */
#contents {width: 900px;}
#contents > div {float: left; width: 33.333333%; height: 300px; text-align: center; line-height: 300px;}
#contents > div.cont1 {background: #7e57c2;}
#contents > div.cont2 {background: #673ab7;}
#contents > div.cont3 {background: #5e35b1 ;}
/* footer */
#footer {width: 900px; text-align: center;}
#footer .foot1 {float: left; width: 200px; height: 100px; line-height: 100px; background: #5e35b1;}
#footer .foot2 {float: left; width: 700px; height: 50px; line-height: 50px; background: #512da8;}
#footer .foot3 {float: left; width: 700px; height: 50px; line-height: 50px; background: #4527a0;}
</style>
</head>
<body>
<div id="wrap">
<aside id="side">
<h1 class="logo">로고</h1>
<nav class="nav">
<ul>
<li><a href="#">Menu-1</a>
<ul class="submenu">
<li><a href="#">subMenu1</a></li>
<li><a href="#">subMenu2</a></li>
<li><a href="#">subMenu3</a></li>
</ul>
</li>
<li><a href="#">Menu-2</a>
<ul class="submenu">
<li><a href="#">subMenu1</a></li>
<li><a href="#">subMenu2</a></li>
<li><a href="#">subMenu3</a></li>
</ul>
</li>
<li><a href="#">Menu-3</a>
<ul class="submenu">
<li><a href="#">subMenu1</a></li>
<li><a href="#">subMenu2</a></li>
<li><a href="#">subMenu3</a></li>
</ul>
</li>
<li><a href="#">Menu-4</a>
<ul class="submenu">
<li><a href="#">subMenu1</a></li>
<li><a href="#">subMenu2</a></li>
<li><a href="#">subMenu3</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<section id="content">
<section id="banner">
<h2>이미지 슬라이드</h2>
</section>
<!-- //banner -->
<section id="contents" class="clearfix">
<div class="cont1"><h3>공지사항</h3></div>
<div class="cont2"><h3>갤러리</h3></div>
<div class="cont3"><h3>팝업</h3></div>
</section>
<!-- //contents -->
<footer id="footer">
<div class="foot1"><h3>로고</h3></div>
<div class="foot2"><h3>하단 메뉴</h3></div>
<div class="foot3"><h3>Copyright</h3></div>
</footer>
<!-- //footer -->
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".nav > ul > li").hover(function(){
$(this).find(".submenu").stop().slideDown();
}, function(){
$(this).find(".submenu").stop().slideUp();
});
// 한번에 나타내게 하려면 slideDown 대신 show를 사용하면된다.
// 부드러운 효과가 없다면 hide를 통해 써도 된다.
</script>
</body>
</html>'내마음대로만들어보자 > HTML' 카테고리의 다른 글
| HTML 탭 메뉴 유형 (0) | 2022.02.27 |
|---|---|
| HTML 세로유형2 (0) | 2022.02.27 |
| HTML 가로유형 예제3 (0) | 2022.02.23 |
| HTML 가로유형 예제2 (0) | 2022.02.23 |
| HTML 가로유형 예제 (0) | 2022.02.22 |