Difference between revisions of "Team:NAIT Edmonton/Trial6"

Revision as of 21:50, 24 August 2015

Team NAIT 2015

@@ Line 104: / Line 104: @@
 </div>
+<div tabindex="0" class="onclick-menu">
+    <ul class="onclick-menu-content">
+        <li><button onclick="alert('click 1')">Look, mom</button></li>
+        <li><button onclick="alert('click 2')">no JavaScript!</button></li>
+        <li><button onclick="alert('click 3')">Pretty nice, right?</button></li>
+    </ul>
+</div>
+<style type="text/css">
+.onclick-menu {
+    position: relative;
+    display: inline-block;
+}
+.onclick-menu:before {
+    content: "click me!";
+}
+.onclick-menu:focus {
+    /* clicking on label should toggle the menu */
+    pointer-events: none;
+}
+.onclick-menu:focus .onclick-menu-content {
+    /*  opacity is 1 in opened state (see below) */
+    opacity: 1;
+    visibility: visible;
+    /* don't let pointer-events affect descendant elements */
+    pointer-events: auto;
+}
+.onclick-menu-content {
+    position: absolute;
+    z-index: 1;
+    /* use opacity to fake immediate toggle */
+    opacity: 0;
+    visibility: hidden;
+    transition: visibility 0.5s;
+}
+</style>
 	</div>