반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>side_navigation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
/* 사이드바 스타일 */
.sidenav {
height:100%;
width: 0;
position: fixed;
z-index:1;
top: 0;
left: 0;
background-color: rgb(0,154,200);
overflow-x: hidden;
transition:0.5s ease-in-out;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #fff;
display: block;
transition: 0.2s ease-in-out;
}
.sidenav a:hover, .offcanvas a:focus {
color: #000;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
.openmenu:hover {
color:rgb(0,154,200);
transition:0.5s ease-in-out;
}
.openmenu {
font-size: 25px;
cursor:pointer;
transition:0.5s ease-in-out;
}
.openmenu > i {
font-size: 30px;
}
#main {
transition:0.5s ease-in-out;
}
/* 미디어쿼리 적용 */
@media screen and (max-height:450px) {
.sidenav {
padding-top:15px;
}
.sidenav a {
font-size: 18px;
}
}
</style>
</head>
<body>
<div id="mysidenav" class="sidenav">
<a href="#" class="closebtn" onclick='closeNav()'>x</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
<a href="#">Portfolio</a>
</div>
<div id="main">
<h2>side_navigation 제작</h2>
<p>제작자: 박경두</p>
<p>고려대학교 경영정보학과</p>
<p>멋쟁이 사자처럼 4기</p>
<p>아래 메뉴버튼을 클릭하면 사이드 네비게이션이 열립니다.</p>
</div>
<span class="openmenu" onclick='openNav()'><i class="fa fa-angle-double-left fa-5" aria-hidden="true"></i> open</span>
<script>
function openNav() {
document.getElementById('mysidenav').style.width = '250px';
document.getElementById('main').style.marginLeft = '250px';
}
function closeNav() {
document.getElementById('mysidenav').style.width = '0';
document.getElementById('main').style.marginLeft = '0';
}
</script>
</body>
</html>출처 : http://webruden.tistory.com/96?category=665693
반응형
'프론트앤드 이야기 > UI' 카테고리의 다른 글
| 풀 사이드 메뉴 (0) | 2018.04.24 |
|---|---|
| [HTML] 오버랩 사이드 메뉴 만들기 (0) | 2018.04.24 |
| [HTML]간략한 상단 탭 만들기 (0) | 2018.04.24 |
댓글