728x90
<!DOCTYPE html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 300;
font-size: 15px;
}
a {
text-decoration: none;
}
/* Header */
header {
height: 100px;
background-color: #fff;
text-align: center;
line-height: 100px;
font-size: 3em;
background-color: #eee;
}
/* Section */
section {
height: calc(100vh - 250px);
background-color: #fff;
text-align: center;
line-height: 500px;
font-size: 3em;
}
/* Footer */
footer {
background-color: #37393d;
color: #fff;
height: 150px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 40px;
}
.copyright {
width: 80%;
}
.family {
width: 18%
}
.policy a {
color: yellowgreen;
}
.policy a:hover {
text-decoration: underline;
}
.policy a:last-child {
color: #fff;
}
.info {
color: #999;
}
.info p span {
display: block;
}
.bar {
display: inline-block;
width: 1px;
height: 10px;
background-color: #555;
margin: 0 10px;
}
/* Family Site */
.dropdown {
width: 200px;
position: relative;
background-color: #303135;
padding: 5px;
border: 1px solid #555;
cursor: pointer;
float: right;
}
.sub-navi {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
line-height: 2em;
width: 100%;
background-color: #58595b;
border: 1px solid#999;
bottom: 100%;
left: 0;
border-bottom: none;
display: none;
}
.sub-navi li {
padding: 1px 10px;
border-bottom: 1px solid #777;
}
.sub-navi li:hover {
background-color: #333;
}
.sub-navi li a {
color: #ccc;
}
.title:after {
content:"\f107";
font-family: fontawesome;
position: absolute;
top: 0;
right:0;
color: #ccc;
width: 30px;
height: 100%;
text-align: center;
line-height: 30px;
}
.title.act:after{
transform: rotateX(180deg);
}
</style>
</head>
<body>
<div class="container">
<header>header</header>
<section>section</section>
<footer>
<div class="copyright">
<div class="policy">
<a href="#none">개인정보처리방침</a><em class="bar"></em><a href="#none">사이트맵</a>
</div>
<div class="info">
<p>
<span>
서울시 서초구 비트캠프<em class="bar"></em>Tel. 010-1111-1111, 4346<em class="bar"></em>Fax. 012-110-1117<em class="bar"></em>E-mail. bit@bit.com
</span>
COPYRIGHT (C) BIT NAVER CLOUD
</p>
</div>
</div>
<div class="family">
<div class="dropdown">
<div class="title">FAMILY SITE</div>
<ul class="sub-navi">
<li><a href="#none1">강의실Log</a></li>
<li><a href="#none2">채용</a></li>
<li><a href="#none3">스토리</a></li>
<li><a href="#none4">테크</a></li>
</ul>
</div>
</div>
</footer>
</div>
<script>
$('.title').click(function(){
$('.sub-navi').slideToggle(200);
$(this).toggleClass('act');
});
$('.sub-navi li').click(function(){
$('.title').text($(this).text());
$(this).parent('.sub-navi').slideUp(200);
})
</script>
</body>
</html>
728x90
'Library > Jquery' 카테고리의 다른 글
| [Jquery] 버튼 누르면 폰트사이즈 변경 (0) | 2024.04.17 |
|---|---|
| [Jquery] wrap (0) | 2024.04.16 |
| [Jquery] Scroll-top, header fix / addclass, removeclass (0) | 2024.04.16 |
| [Jquery] Modal 팝업 (0) | 2024.04.16 |
| [Jquery] Upload profile (0) | 2024.04.12 |