Skip to content

Instantly share code, notes, and snippets.

@audreyfeldroy

audreyfeldroy/index.html

Last active December 20, 2015 15:08
Show Gist options
  • Save audreyfeldroy/6151852 to your computer and use it in GitHub Desktop.
Save audreyfeldroy/6151852 to your computer and use it in GitHub Desktop.
Download ZIP
rotatingnav in action
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotating Nav Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="rotatingnav.css" rel="stylesheet">
</head>
<body>
<div class="rotatingnav-container">
<div class="rotatingnav slide">
<div class="rotatingnav-inner">
<div class="item active">
<a href="TODO">Apples</a><br/>
<a href="TODO">Apples 2</a><br/>
<a href="TODO">Apples 3</a><br/>
<a href="TODO">Bacon</a><br/>
<a href="TODO">Bananas</a><br/>
<a href="TODO">Bananas 2</a><br/>
<a href="TODO">Banananananas</a><br/>
</div>
<div class="item active2">
<a href="TODO">Cheese</a><br/>
<a href="TODO">Cheesecake</a><br/>
<a href="TODO">Cherries</a><br/>
<a href="TODO">Cherries 2</a><br/>
<a href="TODO">Dates</a><br/>
<a href="TODO">Eggshells</a><br/>
<a href="TODO">French Fries</a><br/>
</div>
<div class="item">
<a href="TODO">Grapes</a><br/>
<a href="TODO">Goulash</a><br/>
<a href="TODO">Guavas</a><br/>
<a href="TODO">Hungry</a><br/>
<a href="TODO">Ice cream</a><br/>
<a href="TODO">Jackfruit</a><br/>
<a href="TODO">Jam and Pancakes</a><br/>
</div>
<div class="item">
<a href="TODO">Kitchen</a><br/>
<a href="TODO">Lychee</a><br/>
<a href="TODO">Lychee 2</a><br/>
<a href="TODO">Lycheeeeeeeee</a><br/>
<a href="TODO">Lycheeeeeeeeeeee</a><br/>
<a href="TODO">Mandarin Orange</a><br/>
<a href="TODO">Meat (vegetarian)</a><br/>
</div>
<div class="item">
<a href="TODO">Napkins</a><br/>
<a href="TODO">Nice</a><br/>
<a href="TODO">Nothing Left For You</a><br/>
<a href="TODO">Olive Oil</a><br/>
<a href="TODO">Orange</a><br/>
<a href="TODO">Pancake</a><br/>
<a href="TODO">Panini</a><br/>
</div>
<div class="item">
<a href="TODO">Perishables</a><br/>
<a href="TODO">Pizza</a><br/>
<a href="TODO">Popcorn</a><br/>
<a href="TODO">Perishables</a><br/>
<a href="TODO">Pizza</a><br/>
<a href="TODO">Popcorn</a><br/>
<a href="TODO">Powder Puffs</a><br/>
</div>
<div class="item">
<a href="TODO">Toffee (Hard)</a><br/>
<a href="TODO">Toffee (Soft)</a><br/>
<a href="TODO">Toffee (Hard)</a><br/>
<a href="TODO">Toffee (Soft)</a><br/>
<a href="TODO">Toffee (Hard)</a><br/>
<a href="TODO">Toffee (Soft)</a><br/>
<a href="TODO">Toffee (Hard)</a><br/>
</div>
<div class="item">
<a href="TODO">Waffles</a><br/>
<a href="TODO">Yellow Popcorn</a><br/>
<a href="TODO">Waffles</a><br/>
<a href="TODO">Yellow Popcorn</a><br/>
<a href="TODO">Waffles</a><br/>
<a href="TODO">Yellow Popcorn</a><br/>
<a href="TODO">Yellow Popcorn 2</a><br/>
</div>
</div>
<a class="left rotatingnav-control">
<span class="icon-prev"></span>
</a>
<a class="right rotatingnav-control">
<span class="icon-next"></span>
</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="rotatingnav.js"></script>
</body>
</html>
Raw
rotatingnav.css
/**
* Pull an element left
* From utilities.less
*/
.pull-left {
float: left;
}
/**
* Temporary styles to be removed
*/
.rotatingnav-container {
max-width: 940px;
margin: 0 auto;
}
/**
* Main styles
*/
.rotatingnav {
position: relative;
}
.rotatingnav-inner {
position: relative;
overflow: hidden;
width: 100%;
background-color: #f0f0f0;
}
.rotatingnav-inner > .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
width: 18.8%;
margin-left: 1%;
margin-right: 1%;
}
.rotatingnav-inner > .item > a {
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
color: #1a1a1a;
letter-spacing: 1px;
text-transform: uppercase;
}
.rotatingnav-inner > .active,
.rotatingnav-inner > .active2,
.rotatingnav-inner > .next,
.rotatingnav-inner > .prev {
display: inline-block;
}
.rotatingnav-inner > .active,
.rotatingnav-inner > .active2 {
left: 4%;
}
.rotatingnav-inner > .next,
.rotatingnav-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.rotatingnav-inner > .next {
left: 100%;
}
.rotatingnav-inner > .prev {
left: -100%;
}
.rotatingnav-inner > .next.left,
.rotatingnav-inner > .prev.right {
left: 0;
}
.rotatingnav-inner > .active.left {
left: -100%;
}
.rotatingnav-inner > .active.right {
left: 100%;
}
.rotatingnav-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4%;
font-size: 20px;
color: #ffffff;
background-color: #000000;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.rotatingnav-control.right {
left: auto;
right: 0;
}
.rotatingnav-control:hover,
.rotatingnav-control:focus {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.rotatingnav-control .glyphicon,
.rotatingnav-control .icon-prev,
.rotatingnav-control .icon-next {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
font-family: serif;
}
.rotatingnav-control .icon-prev:before {
content: '\2039';
}
.rotatingnav-control .icon-next:before {
content: '\203a';
}
@media screen and (min-width: 768px) {
.rotatingnav-control .icon-prev,
.rotatingnav-control .icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
}
}
Raw
rotatingnav.js
var activeHead = 0;
var activeTail = 3;
var panelHead = 0;
var panelTail = 7;
function shiftForward() {
// Press right arrow
console.log("Shifting forward");
activeHead++;
activeTail++;
if (activeTail > panelTail) {
activeTail = panelHead;
}
if (activeHead > panelTail) {
activeHead = panelHead;
}
updateActive();
}
function shiftBackward() {
// Press left arrow
console.log("Shifting backward");
activeHead--;
activeTail--;
if (activeHead < panelHead) {
activeHead = panelTail;
}
if (activeTail < panelHead) {
activeTail = panelTail;
}
updateActive();
}
function isActive(index) {
if (activeHead < activeTail &&
activeHead <= index &&
index <= activeTail) {
return true;
} else if (activeHead > activeTail &&
!(activeTail < index &&
index < activeHead)) {
return true;
} else {
return false;
}
}
function updateActive() {
console.log("activeHead " + activeHead + ", activeTail " + activeTail);
$('.item').removeClass('pull-left');
$('.item').removeClass('active');
$('.item').each(function(index){
if (isActive(index)) {
$(this).addClass('active');
$(this).show();
if (index > activeTail) {
$(this).addClass('pull-left');
}
} else {
$(this).hide();
}
});
}
$(function() {
updateActive();
$('.left.rotatingnav-control').click(shiftForward);
$('.right.rotatingnav-control').click(shiftForward);
$('body').keypress(function (event) {
if (event.which == 102) { // f - forward
shiftForward();
} else if (event.which == 98) { // b - backward
shiftBackward();
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment