POOPOO: 배변 일기 앱
SMALL
화면
CSS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
position: relative;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* box-sizing */
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* 헤더 - 높이, 색상 */
header {
background-color: rgb(60, 60, 60);
height: 30px;
}
header li{
height: 30px;
line-height: 30px;
}
/* 정렬 - 하위메뉴 들여쓰기 */
header li a{
padding-left: 20px;
text-decoration: none;
color: #e5e5e5;
display: block;
padding: 0px 10px 0px 10px;
}
/* 색상 */
.menu-wrap>ul>li{
float:left;
background-color: rgb(60, 60, 60);
}
.main-menu:hover{
background-color: #585858;
color: white;
}
.main-menu li{
background-color: rgb(36, 36, 36);
}
.main-menu li>a:hover{
background-color: #2a1a86;
color: white;
}
/* 1단 */
.menu-wrap li.main-menu>ul{
display:none;
position:absolute;
z-index:200;
}
.menu-wrap li.main-menu:hover>ul {
display: block;
}
.menu-wrap li.main-menu ul li>a{
padding: 0 30px 0 30px;
}
/* 2단 - 하위메뉴 접었다 펴기 */
.menu-wrap li.sub-menu-1 ul{
display:none;
height:auto;
padding:0;
margin:0px;
border:0px;
position:absolute;
z-index:200;
}
.menu-wrap li.sub-menu-1:hover>ul{
display: block;
}
/* 2단 - 화살표 위치 */
.menu-wrap li.sub-menu-1>a{
position: relative;
}
.menu-wrap li.sub-menu-1>a span.gt{
position: absolute;
right: 5px;
}
/* 3단 - 하위메뉴 접었다 펴기 */
li.sub-menu-1{
position: relative;
}
li.sub-menu-1 ul{
position: absolute;
display: none;
top: 0px;
left: 100%;
width: 180px;
background-color: rgb(36, 36, 36);
}
li.sub-menu-1:hover ul{
display: block;
}
HTML
<body>
<!-- header -->
<header id="header">
<div class="menu-wrap">
<ul>
<li class="main-menu">
<a href="#">Design Pattern</a>
<ul>
<li class="sub-menu-1">
<a href="#">Java<span class="gt">></span></a>
<ul class="java">
<li class="sub-menu-2"><a href="#">옵저버 패턴</a></li>
<li class="sub-menu-2"><a href="#">프록시 패턴</a></li>
</ul>
</li>
<li class="sub-menu-1">
<a href="#">Javacript<span class="gt">></span></a>
<ul class="javascript">
<li class="sub-menu-2"><a href="#">옵저버 패턴</a></li>
<li class="sub-menu-2"><a href="#">프록시 패턴</a></li>
</ul>
</li>
</ul>
</li>
<li class="main-menu">
<a href="#">Server</a>
<ul>
<li class="sub-menu-1"><a href="#">CentOS 7 minimal</a></li>
</ul>
</li>
<li class="main-menu">
<a href="#">UX/UI</a>
<ul class="sub-menu">
<li class="sub-menu-1"><a href="#">HTML</a></li>
<li class="sub-menu-1"><a href="#">CSS</a></li>
<li class="sub-menu-1"><a href="#">JQuery</a></li>
</ul>
</li>
</ul>
</div>
</header>
<!-- //header -->
</body>LIST