김재현 / 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 111 additions and 10 deletions
1 -body { 1 +body,
2 - padding: 50px;
3 - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
4 -}
5 a { 2 a {
6 - color: #00b7ff; 3 + color: #808080;
4 +}
5 +ul.sidenav {
6 + list-style-type: none;
7 + margin: 0;
8 + padding: 0;
9 + width: 10%;
10 + background-color: #f1f1f1;
11 + height: 100%;
12 + position: fixed;
13 + overflow: auto;
14 +}
15 +ul.sidenav li a {
16 + display: block;
17 + color: #000;
18 + padding: 8px 16px;
19 + text-decoration: none;
20 + transition: 0.3s;
21 +}
22 +ul.sidenav li a.active {
23 + background-color: #4caf50;
24 + color: #fff;
25 +}
26 +ul.sidenav li a:hover:not(.active) {
27 + background-color: #555;
28 + color: #fff;
29 +}
30 +#content {
31 + margin-left: 25%;
32 + padding: 1px 16px;
33 + height: 100%;
7 } 34 }
......
1 body 1 body
2 - padding: 50px 2 +
3 - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
4 a 3 a
5 - color: #00B7FF 4 + color: gray;
5 +
6 +ul.sidenav
7 + list-style-type: none;
8 + margin: 0;
9 + padding: 0;
10 + width: 10%;
11 + background-color: #f1f1f1;
12 + height: 100%;
13 + position : fixed;
14 + overflow : auto;
15 +
16 +ul.sidenav li a
17 + display: block;
18 + color: #000;
19 + padding: 8px 16px;
20 + text-decoration: none;
21 + transition: 0.3s;
22 +
23 +
24 +ul.sidenav li a.active
25 + background-color: #4CAF50;
26 + color: white;
27 +
28 +
29 +ul.sidenav li a:hover:not(.active)
30 + background-color: #555;
31 + color: white;
32 +
33 +
34 +#content
35 +
36 + margin-left: 25%;
37 + padding: 1px 16px;
38 + height: 100%;
......
...@@ -3,9 +3,50 @@ ...@@ -3,9 +3,50 @@
3 <head> 3 <head>
4 <title><%= title %></title> 4 <title><%= title %></title>
5 <link rel='stylesheet' href='/stylesheets/style.css'/> 5 <link rel='stylesheet' href='/stylesheets/style.css'/>
6 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6 </head> 7 </head>
7 <body> 8 <body>
8 - <h1><%= title %></h1> 9 +
9 - <p>Welcome to <%= title %></p> 10 + <script>
11 +
12 + $(document).ready(function() {
13 + $('.sidenav').hide();
14 +
15 + $('#show').click(function() {
16 +
17 + $('.sidenav').slideToggle("fast");
18 + });
19 + });
20 +
21 +
22 + </script>
23 +
24 +
25 + <div id ="menu">
26 + <div id ="show">clickmenu</div>
27 +
28 + <ul class="sidenav">
29 + <li><a class="active" href="#home">home</a></li>
30 + <li><a href="#map">맛집도장찍기</a></li>
31 + <li><a href="#mybook">견문록확인</a></li>
32 +
33 + </ul>
34 +
35 +
36 + </div>
37 + <div id ="content">
38 +
39 + <h1><%= title %></h1>
40 + <p>Welcome to <%= title %></p>
41 +
42 +
43 +
44 + </div>
45 +
46 + <div id ="footer"></div>
47 +
48 +
49 +
50 +
10 </body> 51 </body>
11 </html> 52 </html>
......