Navcube
How do I make an navcube?
My simple nav cube. Goals: minimal HTML markup, functional and beautiful even with JavaScript disabled. Since this will be used on a page full of content, the animation must not be distracting.. What is a navcube? How do you make a navcube? This script and codes were developed by Woodrow Barlow on 31 July 2022, Sunday.
Navcube - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Navcube</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Quicksand:300'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Comfortaa'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav> <ul> <li><a href="about"><span class="fa fa-user"> </span><span>About</span></a></li> <li><a href="blog"><span class="fa fa-paragraph"> </span><span>Articles</span></a></li> <li><a href="projects"><span class="fa fa-bug"> </span><span>Projects</span></a></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Navcube - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
body { background-color: #222; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkJFx8eusR8DAAAANNJREFUOMudk7sKhDAQRU8eYiEIWpjCKv//ZzYRIWjAmK1clsVsdG+VDEwyM+eOAFLbtgzDwHEc3JGUkmmaWJYF3fc9xhj2feeuhBCM44jWGmmtRQhBjPH2AzFGhBBYa9HzPJNS4qm2bSOEgPwn+VRKCfmrz6vzt3QuOYSAcw6Aruuo6/qyVZ0rzTmH9/4dM8ZcI70KKqVQSmXvxQqAN+fz95xPdI5zVVVYawFY1zXrE13ifM7kEYXPYRb3osS55BPRNE36xbnkE+m9xzn3aB8+ffICH2tsiRxpms4AAAAASUVORK5CYII=");
}
header { height: 100px; margin-top: 25px; margin-bottom: 75px; background-color: #ddd;
}
header h1, header h2 { color: #222; font-family: Quicksand;
}
nav:before { content: ""; display: block; position: absolute; width: 0; height: 0; margin-left: -75px; margin-top: -37.5px; border: 150px solid #ddd; border-radius: 150px; box-shadow: 0 0 50px #000;
}
nav { position: absolute; top: 50px; left: 50%; margin-left: -75px; perspective: 600px; perspective-origin: 50% 75px;
}
nav ul { list-style: none; position: relative; width: 150px; transform-style: preserve-3d; transform: rotateX(40deg) translateY(-10px); transition: transform 1s ease-in-out; /* "about" - bottom */ /* "articles" - left */ /* "projects" - right */
}
nav ul > li > a { position: absolute; width: 150px; height: 150px; text-align: center;
}
nav ul > li > a span:nth-child(2) { position: absolute; top: 0; left: 0; width: 100%; margin-top: 85px; font-size: 30px; font-family: Comfortaa; color: transparent; transition: color 0.5s ease-in-out;
}
nav ul > li > a .fa { color: #000; opacity: 0.3; font-size: 140px; padding-top: 7px; transition: opacity 0.25s ease-in-out;
}
nav ul > li { transition: transform 0.5s ease-in-out;
}
nav ul > li:hover a .fa { opacity: 0.5;
}
nav ul > li:hover a span:nth-child(2) { color: #ddd;
}
nav ul > li:nth-child(1) { transform: rotateX(-90deg) rotateZ(45deg) translateX(75px) translateZ(150px);
}
nav ul > li:nth-child(1) > a { background-color: #002338;
}
nav ul > li:nth-child(2) { transform: rotateY(-45deg) translateX(-75px);
}
nav ul > li:nth-child(2) > a { background-color: #003351;
}
nav ul > li:nth-child(3) { transform: rotateY(45deg) translateX(75px);
}
nav ul > li:nth-child(3) > a { background-color: #004975;
}
nav ul:hover { /* "about" - bottom */ /* "articles" - left */ /* "projects" - right */
}
nav ul:hover > li:nth-child(1) { transform: rotateX(-90deg) rotateZ(45deg) translateX(75px) translateZ(155px);
}
nav ul:hover > li:nth-child(2) { transform: rotateY(-45deg) translateX(-75px) translateZ(5px);
}
nav ul:hover > li:nth-child(3) { transform: rotateY(45deg) translateX(75px) translateZ(5px);
}
Navcube - Script Codes JS Codes
$(window).on('mousemove', function(event) { var width = $(window).width(); var vert_start = 100; var vert_stop = 0.7 * $(window).height(); var mouseX = event.pageX - (width * 0.5); var yAngle = (mouseX / width) * 25; var xTranslate = (mouseX / width) * 50; var mouseY = 0; if(event.pageY > vert_start) mouseY = event.pageY-vert_start < vert_stop ? event.pageY-vert_start : vert_stop; var xAngle = ((mouseY / vert_stop) * -12.5) + 40; var yTranslate = (mouseY / vert_stop) * 15 - 10; $('nav ul')[0].style.transform = "rotateX("+(xAngle)+"deg) rotateY("+(yAngle)+"deg) translateX("+(xTranslate)+"px) translateY("+(yTranslate)+"px)";
});
Developer | Woodrow Barlow |
Username | wbarlow |
Uploaded | July 31, 2022 |
Rating | 3 |
Size | 4,775 Kb |
Views | 40,480 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Frontpage | 5,486 Kb |
Responsive Menu App | 7,887 Kb |
Fedora 20 Login | 14,833 Kb |
Fedora Logo SVG | 2,450 Kb |
Github Octocat SVG | 1,579 Kb |
Summer Day | 4,637 Kb |
Card Stack Loading Animation | 3,092 Kb |
Card Game Showcase | 4,134 Kb |
Material Design Form | 6,996 Kb |
The Lounge - A Mafia Game | 9,285 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS Tooltips | Darylldoyle | 2,599 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
A Pen by Kevin | Kevinkenger | 2,642 Kb |
Canvas stripes | Adrianparr | 1,948 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!