Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Adding the menu.

  • Loading branch information...
commit f88feb8cae704ce27bd2168bdb77768f516ac2da 1 parent 9ccb39d
@Ralt authored
Showing with 122 additions and 5 deletions.
  1. +65 −3 css/impress-demo.css
  2. +1 −0  index.html
  3. +56 −2 js/impress.js
View
68 css/impress-demo.css
@@ -662,6 +662,65 @@ a:focus {
}
/*
+ Before the end, this is the menu part.
+
+ It's quite simple. It's almost hidden by default, and it shows itself
+ with an animation when hovered. If you hover out, it goes back to its
+ original state.
+*/
+.menu {
+ position: absolute;
+ width: 0%;
+ height: 0%;
+ top: 0px;
+ right: 0px;
+ overflow: hidden;
+ white-space: nowrap;
+ padding: 50px 0px 0px 0px;
+ background: #ddd;
+ border-radius: 10px;
+
+ -webkit-transition-property: width, height, padding;
+ -webkit-transition-duration: 1s;
+ -webkit-transition-timing-function: ease-out;
+ -moz-transition-property: width, height, padding;
+ -moz-transition-duration: 1s;
+ -moz-transition-timing-function: ease-out;
+ -ms-transition-property: width, height, padding;
+ -ms-transition-duration: 1s;
+ -ms-transition-timing-function: ease-out;
+ -o-transition-property: width, height, padding;
+ -o-transition-duration: 1s;
+ -o-transition-timing-function: ease-out;
+ transition-property: width, height, padding;
+ transition-duration: 1s;
+ transition-timing-function: ease-out;
+}
+
+.menu:hover {
+ width: 10%;
+ height: 100%;
+ padding: 50px 0px 0px 10px;
+}
+
+.menu-item {
+ cursor: pointer;
+ padding: 5px;
+ border: 1px solid #ccc;
+ margin: 5px 0;
+}
+
+.menu-button {
+ position: fixed;
+ top: 10px;
+ right: 10px;
+ padding: 10px;
+ background: #DDD;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+}
+
+/*
And as the last thing there is a workaround for quite strange bug.
It happens a lot in Chrome. I don't remember if I've seen it in Firefox.
@@ -678,12 +737,15 @@ a:focus {
https://developer.mozilla.org/en/CSS/pointer-events
There is one very important thing to notice about this workaround - it makes
- everything 'unclickable' except what's in #impress element.
+ everything 'unclickable' except what's in #impress or the .menu element.
So use it wisely ... or don't use at all.
*/
.impress-enabled { pointer-events: none }
-.impress-enabled #impress { pointer-events: auto }
+.impress-enabled #impress,
+.impress-enabled .menu {
+ pointer-events: auto;
+}
/*
There is one funny thing I just realized.
@@ -700,4 +762,4 @@ a:focus {
That's all I have for you in this file.
Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it
for you.
-*/
View
1  index.html
@@ -362,6 +362,7 @@
-->
<script src="js/impress.js"></script>
<script>impress().init();</script>
+<script>impress().showMenu();</script>
<!--
View
58 js/impress.js
@@ -227,7 +227,8 @@
init: empty,
goto: empty,
prev: empty,
- next: empty
+ next: empty,
+ showMenu: empty
};
}
@@ -563,6 +564,58 @@
return goto(next);
};
+
+ // Capitalize first letter of string
+ // @see http://stackoverflow.com/a/1026087/851498
+ var capitalize = function( str ) {
+ return str.charAt(0).toUpperCase() + str.slice(1);
+ }
+
+ // `showMenu` API function creates the menu
+ // It defines the names of each entry by the id capitalized.
+ var showMenu = function() {
+ // Create the menu wrapper and the element that will be cloned
+ // for each entry.
+ var menu = document.createElement('div'),
+ el = document.createElement('div');
+
+ // Apply some classes
+ menu.className = 'menu';
+ el.className = 'menu-item';
+
+ // Create an element that will be the "button" and append it
+ // to the menu
+ var button = document.createElement('div');
+ button.className = 'menu-button';
+ button.textContent = 'Menu';
+ menu.appendChild(button);
+
+ // Now, for each div in #impress, add an entry to the menu
+ [].forEach.call(byId('impress').firstElementChild.children,
+ function( child, index ) {
+ var newEl = el.cloneNode(),
+ i = index + 1,
+ text = i + '. ' + capitalize(child.id);
+
+
+ // Set the text of the new element
+ newEl.textContent = text;
+
+ // Add an onclick event to the new element
+ // We need to use a closure to make sure the index is correct
+ (function( index ) {
+ newEl.addEventListener('click', function() {
+ goto(index);
+ });
+ }( index ));
+
+ // And append the new element to the menu
+ menu.appendChild(newEl);
+ });
+
+ // And append the menu to #impress
+ document.body.appendChild(menu);
+ };
// Adding some useful classes to step elements.
//
@@ -635,7 +688,8 @@
init: init,
goto: goto,
next: next,
- prev: prev
+ prev: prev,
+ showMenu: showMenu
});
};
Please sign in to comment.
Something went wrong with that request. Please try again.