Sass Off Canvas Nav

Developer
Tyler Fowle
Size
4,534 Kb
Views
26,312
  1. Sass Off Canvas Nav Previews
  2. Sass Off Canvas Nav HTML Codes
  3. Sass Off Canvas Nav CSS Codes
  4. Sass Off Canvas Nav JS Codes

How do I make an sass off canvas nav?

Practicing some Sass mixin techniques for creating cleaner code.based on this video -> http://www.creativebloq.com/web-design/how-write-cleaner-css-and-smarter-sass-41514637. What is a sass off canvas nav? How do you make a sass off canvas nav? This script and codes were developed by Tyler Fowle on 12 August 2022, Friday.

Sass Off Canvas Nav Previews
IQ Test

Sass Off Canvas Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sass Off Canvas Nav</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='button'> <div class='fa fa-bars'></div>
</div>
<div class='menu'> <nav> <ul> <li> <a href='home_is_visible'>Home</a> </li> <li> <a href='aboutus_is_visible'>About</a> </li> <li> <a href='clients_is_visible'>Clients</a> </li> <li> <a href='contactus_is_visible'>Contact Us</a> </li> </ul> </nav>
</div>
<div class='content home'> <h1>OffCanvas Nav</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p>
</div>
<div class='content aboutus'> <h1>About Us</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p>
</div>
<div class='content clients'> <h1>Clients</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p>
</div>
<div class='content contactus'> <h1>Contact Us</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend %leo</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>

Sass Off Canvas Nav - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Poiret+One);
* { box-sizing: border-box;
}
.button { position: absolute; top: 10px; left: 10px; z-index: 10000; color: white; padding: 10px; font-size: 30px; cursor: pointer;
}
.button .fa { -webkit-transition: color 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: color 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: .75s; transition-delay: .75s;
}
html { overflow-x: hidden;
}
body { color: #fff; font-family: 'Poiret One', cursive; position: relative; background: crimson; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: -webkit-transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menu { position: absolute; top: 0; left: 0; bottom: 0; width: 400px; padding-left: 0; -webkit-transform: translateX(-150%); transform: translateX(-150%); -webkit-transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: .2s; transition-delay: .2s;
}
.content { position: absolute; margin: 0 auto; padding: 30px 20%; font-size: 18px; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: color 1s ease 1s, background 0.5s ease 1s, -webkit-transform 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s; transition: color 1s ease 1s, background 0.5s ease 1s, -webkit-transform 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s; transition: color 1s ease 1s, background 0.5s ease 1s, transform 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s; transition: color 1s ease 1s, background 0.5s ease 1s, transform 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s, -webkit-transform 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
}
h1 { font-size: 60px;
}
p { margin-bottom: 100px; line-height: 2.4;
}
ul { margin: 0; padding: 20px 0; list-style: none;
}
li { margin: 0; padding: 0;
}
a { text-decoration: none; display: block; padding: 10px 20px; padding-left: 120px;
}
a:hover { background: slategrey;
}
.home_is_visible .home, .aboutus_is_visible .aboutus, .clients_is_visible .clients, .contactus_is_visible .contactus { -webkit-transform: translateX(0); transform: translateX(0);
}
.home_is_visible .home, .aboutus_is_visible .aboutus, .clients_is_visible .clients, .contactus_is_visible .contactus { z-index: 5000;
}
.home_is_visible .home { color: white; background: cadetblue;
}
.home_is_visible .button .fa { color: white;
}
.home_is_visible a { color: white;
}
.aboutus_is_visible .aboutus { color: black; background: salmon;
}
.aboutus_is_visible .button .fa { color: black;
}
.aboutus_is_visible a { color: black;
}
.clients_is_visible .clients { color: white; background: darkgoldenrod;
}
.clients_is_visible .button .fa { color: white;
}
.clients_is_visible a { color: white;
}
.contactus_is_visible .contactus { color: black; background: sandybrown;
}
.contactus_is_visible .button .fa { color: black;
}
.contactus_is_visible a { color: black;
}
body.nav_is_visible { -webkit-transform: translateX(300px); transform: translateX(300px);
}
body.nav_is_visible .menu { -webkit-transform: translateX(-100%); transform: translateX(-100%);
}

Sass Off Canvas Nav - Script Codes JS Codes

$('body').addClass('home_is_visible');
$('.button').on("click", function(){ $('body').toggleClass('nav_is_visible');
});
function removeClasses() { $(".menu ul li").each(function() { var link = $(this).find('a').attr('href'); $('body').removeClass(link); });
}
$('.menu a').on("click", function(e){ e.preventDefault(); removeClasses(); var link = $(this).attr('href'); $('body').addClass(link); $('body').removeClass('nav_is_visible');
});
Sass Off Canvas Nav - Script Codes
Sass Off Canvas Nav - Script Codes
Home Page Home
Developer Tyler Fowle
Username tylerfowle
Uploaded August 12, 2022
Rating 4.5
Size 4,534 Kb
Views 26,312
Do you need developer help for Sass Off Canvas Nav?

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!

Tyler Fowle (tylerfowle) Script Codes
Name
Watch_Dogs
One Page Scroller
Flexbox Slider
Fixed Navigation
3d Sticky Nav
Material Cards
Sticky Sections
Nicescroll
Flexbox Footer
Timeline Slider Navigation
Create amazing video scripts 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!