Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Adding the menu.

  • Loading branch information...
commit f88feb8cae704ce27bd2168bdb77768f516ac2da 1 parent 9ccb39d
Florian Margaine authored
68  css/impress-demo.css
@@ -662,6 +662,65 @@ a:focus {
662 662
 }
663 663
 
664 664
 /*
  665
+    Before the end, this is the menu part.
  666
+
  667
+    It's quite simple. It's almost hidden by default, and it shows itself
  668
+    with an animation when hovered. If you hover out, it goes back to its
  669
+    original state.
  670
+*/
  671
+.menu {
  672
+    position: absolute;
  673
+    width: 0%;
  674
+    height: 0%;
  675
+    top: 0px;
  676
+    right: 0px;
  677
+    overflow: hidden;
  678
+    white-space: nowrap;
  679
+    padding: 50px 0px 0px 0px;
  680
+    background: #ddd;
  681
+    border-radius: 10px;
  682
+
  683
+    -webkit-transition-property: width, height, padding;
  684
+    -webkit-transition-duration: 1s;
  685
+    -webkit-transition-timing-function: ease-out;
  686
+    -moz-transition-property: width, height, padding;
  687
+    -moz-transition-duration: 1s;
  688
+    -moz-transition-timing-function: ease-out;
  689
+    -ms-transition-property: width, height, padding;
  690
+    -ms-transition-duration: 1s;
  691
+    -ms-transition-timing-function: ease-out;
  692
+    -o-transition-property: width, height, padding;
  693
+    -o-transition-duration: 1s;
  694
+    -o-transition-timing-function: ease-out;
  695
+    transition-property: width, height, padding;
  696
+    transition-duration: 1s;
  697
+    transition-timing-function: ease-out;
  698
+}
  699
+
  700
+.menu:hover {
  701
+    width: 10%;
  702
+    height: 100%;
  703
+    padding: 50px 0px 0px 10px;
  704
+}
  705
+
  706
+.menu-item {
  707
+    cursor: pointer;
  708
+    padding: 5px;
  709
+    border: 1px solid #ccc;
  710
+    margin: 5px 0;
  711
+}
  712
+
  713
+.menu-button {
  714
+    position: fixed;
  715
+    top: 10px;
  716
+    right: 10px;
  717
+    padding: 10px;
  718
+    background: #DDD;
  719
+    border-radius: 5px;
  720
+    border: 1px solid #ccc;
  721
+}
  722
+
  723
+/*
665 724
     And as the last thing there is a workaround for quite strange bug.
666 725
     It happens a lot in Chrome. I don't remember if I've seen it in Firefox.
667 726
     
@@ -678,12 +737,15 @@ a:focus {
678 737
     https://developer.mozilla.org/en/CSS/pointer-events
679 738
     
680 739
     There is one very important thing to notice about this workaround - it makes
681  
-    everything 'unclickable' except what's in #impress element.
  740
+    everything 'unclickable' except what's in #impress or the .menu element.
682 741
     
683 742
     So use it wisely ... or don't use at all.
684 743
 */
685 744
 .impress-enabled          { pointer-events: none }
686  
-.impress-enabled #impress { pointer-events: auto }
  745
+.impress-enabled #impress,
  746
+.impress-enabled .menu {
  747
+    pointer-events: auto;
  748
+}
687 749
 
688 750
 /*
689 751
     There is one funny thing I just realized.
@@ -700,4 +762,4 @@ a:focus {
700 762
     That's all I have for you in this file.
701 763
     Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it
702 764
     for you.
703  
-*/
  765
+*/
1  index.html
@@ -362,6 +362,7 @@
362 362
 -->
363 363
 <script src="js/impress.js"></script>
364 364
 <script>impress().init();</script>
  365
+<script>impress().showMenu();</script>
365 366
 
366 367
 <!--
367 368
     
58  js/impress.js
@@ -227,7 +227,8 @@
227 227
                 init: empty,
228 228
                 goto: empty,
229 229
                 prev: empty,
230  
-                next: empty
  230
+                next: empty,
  231
+                showMenu: empty
231 232
             };
232 233
         }
233 234
         
@@ -563,6 +564,58 @@
563 564
             
564 565
             return goto(next);
565 566
         };
  567
+
  568
+        // Capitalize first letter of string
  569
+        // @see http://stackoverflow.com/a/1026087/851498
  570
+        var capitalize = function( str ) {
  571
+            return str.charAt(0).toUpperCase() + str.slice(1);
  572
+        }
  573
+
  574
+        // `showMenu` API function creates the menu
  575
+        // It defines the names of each entry by the id capitalized.
  576
+        var showMenu = function() {
  577
+            // Create the menu wrapper and the element that will be cloned
  578
+            // for each entry.
  579
+            var menu = document.createElement('div'),
  580
+                el = document.createElement('div');
  581
+
  582
+            // Apply some classes
  583
+            menu.className = 'menu';
  584
+            el.className = 'menu-item';
  585
+
  586
+            // Create an element that will be the "button" and append it
  587
+            // to the menu
  588
+            var button = document.createElement('div');
  589
+            button.className = 'menu-button';
  590
+            button.textContent = 'Menu';
  591
+            menu.appendChild(button);
  592
+
  593
+            // Now, for each div in #impress, add an entry to the menu
  594
+            [].forEach.call(byId('impress').firstElementChild.children,
  595
+                    function( child, index ) {
  596
+                var newEl = el.cloneNode(),
  597
+                    i = index + 1,
  598
+                    text = i + '. ' + capitalize(child.id);
  599
+
  600
+
  601
+                // Set the text of the new element
  602
+                newEl.textContent = text;
  603
+
  604
+                // Add an onclick event to the new element
  605
+                // We need to use a closure to make sure the index is correct
  606
+                (function( index ) {
  607
+                    newEl.addEventListener('click', function() {
  608
+                        goto(index);
  609
+                    });
  610
+                }( index ));
  611
+
  612
+                // And append the new element to the menu
  613
+                menu.appendChild(newEl);
  614
+            });
  615
+
  616
+            // And append the menu to #impress
  617
+            document.body.appendChild(menu);
  618
+        };
566 619
         
567 620
         // Adding some useful classes to step elements.
568 621
         //
@@ -635,7 +688,8 @@
635 688
             init: init,
636 689
             goto: goto,
637 690
             next: next,
638  
-            prev: prev
  691
+            prev: prev,
  692
+            showMenu: showMenu
639 693
         });
640 694
 
641 695
     };

0 notes on commit f88feb8

Please sign in to comment.
Something went wrong with that request. Please try again.