Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 디미터 법칙
- vue
- springboot
- Law of Demeter
- OpenAPI
- 커맨드공부
- Bandit Level 6 → Level 7
- 인증서만료에러
- 에자일 모형
- 시스템 파악
- 프로토타입 모형
- was버그
- was SQLRecoverableException
- 스크럼기법
- plsql
- java.sql.SQLRecoverableException
- Bandit Level 6
- 명령어공부
- mysql 튜닝
- pl/sql
- 변수명 짓는법
- 시스템 파악 정리
- Bandit Level 5
- 클린코드
- table scan
- CSS
- SQLRecoverableException
- 나선형 모형
- 폭포수 모형
- avax.net.ssl.SSLHandshakeException:
Archives
- Today
- Total
개발햄비
[CSS] 세로 오픈 메뉴 예제 본문
HTML 코드
<input type="checkbox" id="menu_state">
<nav>
<label for="menu_state"><i class="fa"></i></label>
<ul>
<li data-content="1" class="active unread">
<a href="javascript:void(0)">
<i class="fa fa-inbox"></i>
<span id="js-Exchange_Bank_Btn">Exchange_Rate</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-heart"></i>
<span>Favorites</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-paper-plane"></i>
<span>Sent</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-pencil"></i>
<span>Draft</span>
</a>
</li>
</ul>
</nav>
CSS
input[type="checkbox"]#menu_state {
display: none;
}
input[type="checkbox"]:checked ~ nav {
width: 250px;
}
input[type="checkbox"]:checked ~ nav label[for="menu_state"] i::before {
content: "\f053";
}
input[type="checkbox"]:checked ~ nav ul {
width: 100%;
}
input[type="checkbox"]:checked ~ nav ul li a i {
border-right: 1px solid #2f343e;
}
input[type="checkbox"]:checked ~ nav ul li a span {
opacity: 1;
transition: opacity 0.25s ease-in-out;
}
input[type="checkbox"]:checked ~ main {
left: 250px;
}
nav {
position: fixed;
z-index: 9;
top: 0;
left: 0;
bottom: 0;
background: #383e49;
color: #9aa3a8;
width: 50px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
transition: all 0.15s ease-in-out;
}
nav label[for="menu_state"] i {
cursor: pointer;
position: absolute;
top: 50%;
right: -8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
background: #fff;
font-size: 10px;
display: flex;
justify-content: center;
align-items: center;
height: 15px;
width: 15px;
border-radius: 50%;
border: 1px solid #ddd;
transition: width 0.15s ease-in-out;
z-index: 1;
}
nav label[for="menu_state"] i::before {
margin-top: 2px;
content: "\f054";
}
nav label[for="menu_state"] i:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
nav ul {
overflow: hidden;
display: block;
width: 50px;
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
border: 1px solid #2f343e;
position: relative;
}
nav ul li.unread:after {
content: attr(data-content);
position: absolute;
top: 10px;
left: 25px;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
border-radius: 50%;
color: #fff;
background: #ef5952;
font-size: 8px;
}
nav ul li:not(:last-child) {
border-bottom: none;
}
nav ul li.active a {
background: #4c515d;
color: #fff;
}
nav ul li a {
position: relative;
display: block;
white-space: nowrap;
text-decoration: none;
color: #9aa3a8;
height: 50px;
width: 100%;
transition: all 0.15s ease-in-out;
}
nav ul li a:hover {
background: #4c515d;
color: #fff;
}
nav ul li a * {
height: 100%;
display: inline-block;
}
nav ul li a i {
text-align: center;
width: 50px;
z-index: 999999;
}
nav ul li a i.fa {
line-height: 50px;
}
nav ul li a span {
padding-left: 25px;
opacity: 0;
line-height: 50px;
transition: opacity 0.1s ease-in-out;
}
main {
position: absolute;
transition: all 0.15s ease-in-out;
top: 0;
left: 50px;
}
main header {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
height: 400px;
background: url("http://www.blueb.co.kr/SRC2/_image/01.jpg");
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
main section {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
background: #fff;
padding: 25px;
font-family: helvetica;
font-weight: lighter;
padding: 50px;
margin: 150px 75px;
transition: all 0.15s ease-in-out;
}
main section:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
main section h1 {
padding-top: 0;
margin-top: 0;
font-weight: lighter;
}
'개발 > CSS' 카테고리의 다른 글
[CSS] Pseudo Selector 정리 (0) | 2019.09.12 |
---|---|
[CSS] display: block 과 inline-block 그리고 inline 차이 (0) | 2019.09.07 |