Angled nav reveal

Developer
Andrew Canham
Size
4,687 Kb
Views
44,528
  1. Angled nav reveal Previews
  2. Angled nav reveal HTML Codes
  3. Angled nav reveal CSS Codes
  4. Angled nav reveal JS Codes

How do I make an angled nav reveal?

Simple navigation reveal using CSS skew. What is a angled nav reveal? How do you make a angled nav reveal? This script and codes were developed by Andrew Canham on 23 August 2022, Tuesday.

Angled nav reveal Previews
IQ Test

Angled nav reveal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angled nav reveal</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="navigation"> <a href="#" class="toggleNav"> <span class="row1"></span> <span class="row2"></span> <span class="row3"></span> </a> <ul class="sideNavLink"> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Downloads</a> </li> <li> <a href="#">Contact Us</a> </li> </ul> <div class="sideNav"> </div>
</div>
<div class="content"> <h1>Page content</h1> <p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus tempor velit. Sed mollis felis sollicitudin dolor rhoncus, eu suscipit nunc aliquet.</p> <p>Donec commodo, diam ut commodo aliquam, neque purus finibus eros, at dictum purus odio sed nulla. Vestibulum sit amet nulla ex. Aliquam non nibh ultricies, varius felis et, porttitor neque. Vivamus ornare finibus massa, eget pretium velit varius ac. Suspendisse potenti. Nulla finibus porta nibh, nec congue mauris viverra quis. Sed dictum massa nulla, sed viverra felis molestie tristique.</p> <p>Proin consequat quis enim ut accumsan. Nam mi mauris, fringilla ut varius non, posuere id orci. In viverra sed nibh ac suscipit. Integer quis sem ac mi ornare mollis. Mauris interdum at ipsum a commodo.</p> <p>Quisque vestibulum finibus est, id tincidunt lorem aliquet luctus. Sed gravida condimentum justo ac fermentum. Cras lacinia nunc in dui accumsan, eget facilisis felis vulputate. Maecenas arcu metus, porta nec mollis ac, consequat maximus lectus.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Angled nav reveal - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900);
@font-face { font-family: 'BLOKKNeue-Regular'; src: url('http://andrewcanham.com/fonts/blokk/BLOKKNeue-Regular.eot'); src: url('http://andrewcanham.com/fonts/blokk/BLOKKNeue-Regular.eot?#iefix') format('embedded-opentype'), url('http://andrewcanham.com/fonts/blokk/BLOKKNeue-Regular.woff') format('woff'), url('http://andrewcanham.com/fonts/blokk/BLOKKNeue-Regular.svg#BLOKKNeue-Regular') format('svg'); font-weight: normal; font-style: normal;
}
body,
html { background: #fafaf4; color: #404749; font-family: 'Source Sans Pro'; margin: 0; padding: 0;
}
div.navigation { left: 0; position: fixed; top: 0;
}
ul.sideNavLink { font-family: "BLOKKNeue-Regular"; position: absolute; z-index: 20; margin: 46px 9px 0; padding: 0; width: 200px;
}
ul.sideNavLink li { display: block; margin: 10px; padding: 0; -webkit-transform: translate3D(-100%, 0, 0) rotate(45deg); transform: translate3D(-100%, 0, 0) rotate(45deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
ul.sideNavLink li a { color: #d3d8da; display: block; padding: 10px 20px 10px 0; text-decoration: none; text-transform: uppercase;
}
ul.sideNavLink li a:before { background: transparent; border: 2px solid #d3d8da; border-radius: 100px; content: ""; display: inline-block; margin: 0 10px -4px 0; height: 16px; width: 16px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
ul.sideNavLink li a:hover:before { box-shadow: inset 0 0 0 10px red;
}
ul.sideNavLink li:nth-child(1) { -webkit-transition-delay: .3s; transition-delay: .3s;
}
ul.sideNavLink li:nth-child(2) { -webkit-transition-delay: .2s; transition-delay: .2s;
}
ul.sideNavLink li:nth-child(3) { -webkit-transition-delay: .1s; transition-delay: .1s;
}
ul.sideNavLink li:nth-child(4) { -webkit-transition-delay: .0s; transition-delay: .0s;
}
ul.sideNavLink.on li { -webkit-transform: translate3D(0, 0, 0) rotate(0deg); transform: translate3D(0, 0, 0) rotate(0deg);
}
ul.sideNavLink.on li:nth-child(1) { -webkit-transition-delay: 0s; transition-delay: 0s;
}
ul.sideNavLink.on li:nth-child(2) { -webkit-transition-delay: .1s; transition-delay: .1s;
}
ul.sideNavLink.on li:nth-child(3) { -webkit-transition-delay: .2s; transition-delay: .2s;
}
ul.sideNavLink.on li:nth-child(4) { -webkit-transition-delay: .3s; transition-delay: .3s;
}
div.sideNav { background: #fafaf4; box-shadow: inset -5px 0 20px rgba(0, 0, 0, 0.15), 2px 0 2px rgba(0, 0, 0, 0.015); height: 100vh; width: 200px; -webkit-transform: translate3D(-60%, 0, 0) skew(-22.75deg); transform: translate3D(-60%, 0, 0) skew(-22.75deg); -webkit-transform-origin: top; transform-origin: top; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
div.sideNav.on { box-shadow: inset -1px 0 6px rgba(0, 0, 0, 0.05); -webkit-transform: translate3D(0, 0, 0) skew(0deg); transform: translate3D(0, 0, 0) skew(0deg); -webkit-transition-delay: 0s; transition-delay: 0s;
}
a.toggleNav { display: block; height: 20px; left: 20px; position: absolute; top: 20px; width: 20px; z-index: 10;
}
a.toggleNav span { background: #d3d8da; border-radius: 2px; display: block; height: 2px; margin: 0 auto; width: 20px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform-origin: left; transform-origin: left;
}
a.toggleNav span.row1 { margin-bottom: 7px;
}
a.toggleNav span.row2 { margin-bottom: 7px;
}
a.toggleNav.on span.row1 { -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 25px;
}
a.toggleNav.on span.row3 { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 25px;
}
a.toggleNav.on span.row2 { width: 2px;
}
div.content { color: #787f82; padding: 60px 100px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transition-delay: .2s; transition-delay: .2s;
}
div.content h1 { color: #404749; font-size: 60px; letter-spacing: -0.05em;
}
div.content p.intro { font-size: 30px; line-height: 24px; max-width: 18em;
}
div.content p { color: #d3d8da; font-family: "BLOKKNeue-Regular"; line-height: 20px; max-width: 24em;
}
div.content.on { -webkit-transform: translate3D(200px, 0, 0); transform: translate3D(200px, 0, 0); -webkit-transition-delay: 0s; transition-delay: 0s;
}

Angled nav reveal - Script Codes JS Codes

$(document).ready(function() { $("a.toggleNav").click(function(e){ e.preventDefault(); $(this).toggleClass("on"); $("div.sideNav").toggleClass("on"); $("ul.sideNavLink").toggleClass("on"); $("div.content").toggleClass("on"); });
});
Angled nav reveal - Script Codes
Angled nav reveal - Script Codes
Home Page Home
Developer Andrew Canham
Username candroo
Uploaded August 23, 2022
Rating 3
Size 4,687 Kb
Views 44,528
Do you need developer help for Angled nav reveal?

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!

Andrew Canham (candroo) Script Codes
Name
Hover flower
3D List expansion
Faux 3D grid
Spread cards
3D cube - hover rotate
Cube grid
Cloxperiment
Hover effect
Social media footer
Color hover buttons
Create amazing love letters with AI!

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!