babolivier
/
burger-quizz
보기 1
좋아요 0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 Activity
소스 검색

azertyuiop

Brendan Abolivier 9 년 전
부모
60fb2c86d3
커밋
70143d4e08
6개의 변경된 파일과 107개의 추가작업 그리고 3개의 파일을 삭제
분할 보기 변경상태 보기
  1. BIN
      web/assets/burger-menu.png
  2. 73
    2
      web/css/main.css
  3. 11
    0
      web/index.htm
  4. 0
    0
      web/js/jquery-2.1.4.min.js
  5. 22
    0
      web/js/responsive.js
  6. 1
    1
      web/play.htm

BIN
web/assets/burger-menu.png 파일 보기


+ 73
- 2
web/css/main.css 파일 보기 

@@ -24,6 +24,59 @@ header {
24 24 
   padding-bottom: 10px;
25 25 
 }
26 26
27 
+section#responsive-navbar img {
28 
+  margin-right:10px;
29 
+  margin-top:8px;
30 
+  float:right;
31 
+  height: 1.3em;
32 
+}
33 
+
34 
+section#responsive-navbar {
35 
+  display: none;
36 
+  margin-top:0px;
37 
+  color: white;
38 
+  background-color: #7e19ff;
39 
+  font-size: 25px;
40 
+}
41 
+
42 
+section#responsive-navbar ul {
43 
+  margin-top:0px;
44 
+  list-style-type:none;
45 
+  padding-left:0px;
46 
+}
47 
+
48 
+section#responsive-navbar ul li {
49 
+  height: 2em;
50 
+  line-height: 2em;
51 
+  vertical-align: middle;
52 
+  text-align:center;
53 
+  width:100%;
54 
+}
55 
+
56 
+section#responsive-navbar ul li a {
57 
+  width:100%;
58 
+}
59 
+
60 
+section#responsive-navbar ul li.play {
61 
+  background: #ff9619;
62 
+}
63 
+
64 
+section#responsive-navbar ul li.play:hover {
65 
+  background: #ffab19;
66 
+}
67 
+
68 
+section#responsive-navbar ul li:hover, section#responsive-navbar ul li.current {
69 
+  background: #9556f9;
70 
+}
71 
+
72 
+section#responsive-navbar ul li:first-child, section#responsive-navbar ul li:first-child:hover {
73 
+  background-color: #7e19ff;
74 
+  background-image: url('../assets/burger-menu.png');
75 
+  background-size: 25px;
76 
+  background-repeat: no-repeat;
77 
+  background-position: 10px, 50%;
78 
+}
79 
+
27 80 
 section#navbar {
28 81 
   color: white;
29 82 
   background-color: #7e19ff;
 
@@ -43,8 +96,8 @@ section#navbar li:first-child a {
43 96
44 97 
 section#navbar a {
45 98 
   padding-top:17px;
46 
-  padding-left:50px;
47 
-  padding-right:50px;
99 
+  padding-left:30px;
100 
+  padding-right:30px;
48 101 
   padding-bottom:18px;
49 102 
   margin-right: 10px;
50 103 
 }
 
@@ -112,3 +165,21 @@ section#page p {
112 165 
 article#jouer {
113 166 
   margin:auto;
114 167 
 }
168 
+
169 
+@media all and (max-width: 799px) {
170 
+  section#responsive-navbar {
171 
+    display: block;
172 
+  }
173 
+  section#navbar {
174 
+    display: none;
175 
+  }
176 
+}
177 
+
178 
+@media all and (min-width: 800px) {
179 
+  section#responsive-navbar {
180 
+    display: none;
181 
+  }
182 
+  section#navbar {
183 
+    display: block;
184 
+  }
185 
+}

+ 11
- 0
web/index.htm 파일 보기 

@@ -5,6 +5,8 @@
5 5 
     <title>Burger Quizz - Accueil</title>
6 6 
     <link rel="stylesheet" href="css/main.css">
7 7 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
8 
+    <script src="js/jquery-2.1.4.min.js"></script>
9 
+    <script src="js/responsive.js"></script>
8 10 
   </head>
9 11 
   <body>
10 12 
     <header>
 
@@ -17,6 +19,15 @@
17 19 
         <li><a href="#">Jouer</a></li>
18 20 
       </ul>
19 21 
     </section>
22 
+    <section id="responsive-navbar">
23 
+      <ul>
24 
+        <li class="name"><a href="#">Menu</a></li>
25 
+        <li class="current"><a href="#">Accueil</a></li>
26 
+        <li><a href="#">Règles</a></li>
27 
+        <li><a href="#">Meilleurs scores</a></li>
28 
+        <li class="play"><a href="#">Jouer</a></li>
29 
+      </ul>
30 
+    </section>
20 31 
     <section id="page">
21 32 
       <article>
22 33 
         <h2>Accueil</h2>

web/jquery-2.1.4.min.js → web/js/jquery-2.1.4.min.js 파일 보기


+ 22
- 0
web/js/responsive.js 파일 보기 

@@ -0,0 +1,22 @@
1 
+var open = false;
2 
+
3 
+$(document).on("ready", function() {
4 
+
5 
+  var li = document.getElementById("responsive-navbar").getElementsByTagName("li");
6 
+  for(var i = 1; i < li.length; i++) {
7 
+    li[i].style.display = "none";
8 
+  }
9 
+
10 
+  $('.name').on("click", function() {
11 
+
12 
+    for(var i = 1; i < li.length; i++) {
13 
+      if(open) {
14 
+        li[i].style.display = "none";
15 
+      } else {
16 
+        li[i].style.display = "block";
17 
+      }
18 
+    }
19 
+
20 
+    open = !open;
21 
+  });
22 
+});

+ 1
- 1
web/play.htm 파일 보기 

@@ -3,7 +3,7 @@
3 3 
   <head>
4 4 
     <title>Burger Quizz - Jouer</title>
5 5 
     <meta charset="utf-8" />
6 
-    <script src="jquery-2.1.4.min.js"></script>
6 
+    <script src="js/jquery-2.1.4.min.js"></script>
7 7 
     <script src="js/game.js"></script>
8 8 
     <style type="text/css">
9 9 
       .good-answer {