김재현 / open-source-project-2017-02

Go to a project
Toggle navigation Toggle navigation pinning
김정은
51c131af 1 parent b2c9d2ea

make skeleton test.ejs

Inline Side-by-side
Showing 3 changed files with 109 additions and 8 deletions
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
body,
a {
color: #00b7ff;
color: #808080;
}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
height: 100%;
position: fixed;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
transition: 0.3s;
}
ul.sidenav li a.active {
background-color: #4caf50;
color: #fff;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: #fff;
}
#content {
margin-left: 25%;
padding: 1px 16px;
height: 100%;
}
......
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
color: #00B7FF
color: gray;
ul.sidenav
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
height: 100%;
position : fixed;
overflow : auto;
ul.sidenav li a
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
transition: 0.3s;
ul.sidenav li a.active
background-color: #4CAF50;
color: white;
ul.sidenav li a:hover:not(.active)
background-color: #555;
color: white;
#content
margin-left: 25%;
padding: 1px 16px;
height: 100%;
......
......@@ -3,9 +3,50 @@
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
});
});
</script>
<div id ="menu">
<div id ="show">clickmenu</div>
<ul class="sidenav">
<li><a class="active" href="#home">home</a></li>
<li><a href="#map">맛집도장찍기</a></li>
<li><a href="#mybook">견문록확인</a></li>
</ul>
</div>
<div id ="content">
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</div>
<div id ="footer"></div>
</body>
</html>
......