diff --git a/README.md b/README.md
index 4cb15eb..ef3e406 100644
--- a/README.md
+++ b/README.md
@@ -186,6 +186,19 @@ It's easy to link between slides. The first example below targets the index of a
Link
Link
```
+
+You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when its a valid navigation route based on the current slide.
+
+```html
+
+
+
+
+
+
+```
+
+
### Fullscreen mode
Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
diff --git a/css/reveal.css b/css/reveal.css
index 2e72aca..c4c2991 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -346,14 +346,14 @@ body {
margin-top: 1px;
}
-.reveal .controls div.left {
+.reveal .controls div.navigate-left {
top: 42px;
border-right-width: 22px;
border-right-color: #eee;
}
-.reveal .controls div.right {
+.reveal .controls div.navigate-right {
left: 74px;
top: 42px;
@@ -361,14 +361,14 @@ body {
border-left-color: #eee;
}
-.reveal .controls div.up {
+.reveal .controls div.navigate-up {
left: 42px;
border-bottom-width: 22px;
border-bottom-color: #eee;
}
-.reveal .controls div.down {
+.reveal .controls div.navigate-down {
left: 42px;
top: 74px;
diff --git a/css/theme/beige.css b/css/theme/beige.css
index 5e40883..c8d38f2 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -110,39 +110,39 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: #8b743d;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: #8b743d;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: #8b743d;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: #8b743d;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #c0a86e;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #c0a86e;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #c0a86e;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #c0a86e;
}
diff --git a/css/theme/default.css b/css/theme/default.css
index 28ed7d3..30d7463 100644
--- a/css/theme/default.css
+++ b/css/theme/default.css
@@ -110,39 +110,39 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: #13daec;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: #13daec;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: #13daec;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: #13daec;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #71e9f4;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #71e9f4;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #71e9f4;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #71e9f4;
}
diff --git a/css/theme/serif.css b/css/theme/serif.css
index ece6124..3d406af 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -97,39 +97,39 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: #51483d;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: #51483d;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: #51483d;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: #51483d;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #8b7c69;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #8b7c69;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #8b7c69;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #8b7c69;
}
diff --git a/css/theme/simple.css b/css/theme/simple.css
index 6d0771a..cf4f042 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -99,39 +99,39 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: darkblue;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: darkblue;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: darkblue;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: darkblue;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #0000f1;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #0000f1;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #0000f1;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #0000f1;
}
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 18a4863..43bb4f4 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -103,39 +103,39 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: #3b759e;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: #3b759e;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: #3b759e;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: #3b759e;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #74a7cb;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #74a7cb;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #74a7cb;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #74a7cb;
}
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index 6a80b62..a818ec2 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -106,39 +106,39 @@ body {
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: $linkColor;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: $linkColor;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: $linkColor;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: $linkColor;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: $linkColorHover;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: $linkColorHover;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: $linkColorHover;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: $linkColorHover;
}
diff --git a/index.html b/index.html
index 82570f3..426b8cf 100644
--- a/index.html
+++ b/index.html
@@ -61,9 +61,9 @@
Slides can be nested inside of other slides,
- try pressing down.
+ try pressing down.
Vertical Slides