button-bg-lock as a checkbox

krsch · Jul 17, 2013 · 86776ce · 86776ce
1 parent ec4bb9b
commit 86776ce
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/client/css/main/menu.css b/client/css/main/menu.css
@@ -54,7 +54,10 @@
 #menu-cont .button-bg-0 {
 	left:144px;
 }
-#menu-cont a.buttom-bg-lock {
+#menu-cont #button-lock {
+        visibility: hidden;
+}
+#menu-cont .button-bg-lock {
 	width:21px;
 	height:22px;
 	display:block;
@@ -65,26 +68,28 @@
 	top:46px;
 	left:148px;
 }
-#menu-cont a.buttom-bg-lock:hover {
+#menu-cont #button-lock:checked + label{
 	background-position:0px -22px;
 }
-#menu-cont .buttom-bg-lvl2 {
+#menu-cont .button-bg-lvl2 {
 	width:40px;
 	height:40px;
 	display:block;
 	background: url(/img/menu-button-lvl2.png);
 	background-repeat:no-repeat;
 	background-position:0px 0px;
 }
-#menu-cont .buttom-bg-lvl2:hover {
+#menu-cont .button-bg-lvl2:hover {
 	background-position:0px -40px;
 }
 #menu-cont ol li:nth-child(10n) {
         counter-reset: menu -1;
 }
+#menu-cont li {
+        counter-increment:menu;
+}
 #menu-cont li:before {
         content:counter(menu);
-        counter-increment:menu;
 	margin:0;
 	padding:0;
 	position:absolute;

diff --git a/client/views/main.html b/client/views/main.html
@@ -50,36 +50,37 @@
       <div id="menu-cont">
               <ol class="menu-cont-bg">
                       <li class="button-bg-1">
-                              <a class="buttom-bg-lvl2" href="#"></a>
+                              <a class="button-bg-lvl2" href="#"></a>
                       </li>
                       <li class="button-bg-2">
-                              <a class="buttom-bg-lvl2" href="#"></a>
+                              <a class="button-bg-lvl2" href="#"></a>
                       </li>
                       <li class="button-bg-3">
-                              <a class="buttom-bg-lvl2" href="#"></a>
+                              <a class="button-bg-lvl2" href="#"></a>
                       </li>
                       <li class="button-bg-4">
-                              <a class="buttom-bg-lvl2" href="#"></a>
+                              <a class="button-bg-lvl2" href="#"></a>
                       </li>
                       <li class="button-bg-5">
-                              <a class="buttom-bg-lvl2" href="#"></a>
+                              <a class="button-bg-lvl2" href="#"></a>
                       </li>        
                       <li class="button-bg-6">
-                              <a class="buttom-bg-lvl2" href="#"></a>
+                              <a class="button-bg-lvl2" href="#"></a>
                       </li>
                       <li class="button-bg-7">
-                              <a class="buttom-bg-lvl2" href="#"></a>
+                              <a class="button-bg-lvl2" href="#"></a>
                       </li>
                       <li class="button-bg-8">
-                              <a class="buttom-bg-lvl2" href="#"></a>
+                              <a class="button-bg-lvl2" href="#"></a>
                       </li>
                       <li class="button-bg-9">
-                              <a class="buttom-bg-lvl2" href="#"></a>
+                              <a class="button-bg-lvl2" href="#"></a>
                       </li>
                       <li class="button-bg-0">
-                              <a class="buttom-bg-lvl2" href="#"></a>
+                              <a class="button-bg-lvl2" href="#"></a>
                       </li>
-                      <a class="buttom-bg-lock" href="#"></a>
+                      <input id="button-lock" type="checkbox">
+                      <label class="button-bg-lock" for="button-lock"></label>
               </ol>
       </div>