Nav animation exercise - START
How do I make an nav animation exercise - start?
What is a nav animation exercise - start? How do you make a nav animation exercise - start? This script and codes were developed by Val Head on 07 August 2022, Sunday.
Nav animation exercise - START - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nav animation exercise - START</title> <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="wrap"> <div class="navlist"> <svg id="hamb" class="hamb" viewBox="0 0 32.17 23.83" width="30"> <path id="line1" class="line" d="M31.17,2H1A1,1,0,0,1,1,0H31.17A1,1,0,0,1,31.17,2Z"/> <path id="line2" class="line" d="M31.17,12.92H1a1,1,0,0,1,0-2H31.17A1,1,0,0,1,31.17,12.92Z"/> <path id="line3" class="line" d="M31.17,23.83H1a1,1,0,0,1,0-2H31.17A1,1,0,0,1,31.17,23.83Z"/> </svg> </div> <div class="imghold"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/sleepy_stock_cat.jpg" alt="" /> </div> <div class="panel"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/close_icon.svg" class="close" alt="" /> <div class="panellist"> <ul> <li>Shop Our Store</li> <li>The News</li> <li>About</li> <li>Contact</li> <li>My Account</li> <li>My Wishlist</li> </ul> </div> </div> <script src="js/index.js"></script>
</body>
</html>
Nav animation exercise - START - Script Codes CSS Codes
@import "https://fonts.googleapis.com/css?family=Kreon:300";
/* ------- */
/* ------- */
.panel { -webkit-transition: all 1s; transition: all 1s; -webkit-transform: translateX(-100%); transform: translateX(-100%);
}
.panel .panellist li { -webkit-transform: translateX(-5%); transform: translateX(-5%); opacity: 0;
}
.panel.active { -webkit-transform: translateX(-10px); transform: translateX(-10px);
}
.panel.active .panellist li { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);
}
body { background: #333;
}
.wrap { width: 768px; height: 1024px; margin: 0 auto; overflow: hidden; position: relative; font-weight: 300; font-style: normal; font-family: 'Kreon', serif;
}
.navlist { height: 24px; position: absolute; left: 25px; top: 40px;
}
.panel { width: 300px; height: 1024px; background-color: #252525; position: absolute; bottom: 0; left: 0; z-index: 10;
}
.panel img.close { width: 24px; height: auto; position: absolute; top: 40px; left: 40px;
}
.panel img.close:hover { cursor: pointer;
}
.imghold { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/sleepy_stock_cat.jpg") -300px 0; background-size: cover; width: 768px; height: 1024px;
}
.panellist { color: white; font-size: 24px; font-weight: normal; padding: 20vh 0 0 10%;
}
ul { list-style: none; margin: 1em 0;
}
ul li { line-height: 1.8;
}
.hamb { fill: #fff;
}
.hamb:hover { cursor: pointer;
}
Nav animation exercise - START - Script Codes JS Codes
var hamb = document.querySelector('.hamb'), close = document.querySelector('.close'), panel = document.querySelector('.panel');
close.onclick = toggleIn;
hamb.onclick = toggleIn;
function toggleIn() { panel.classList.toggle('active');
}
Developer | Val Head |
Username | valhead |
Uploaded | August 07, 2022 |
Rating | 3 |
Size | 3,402 Kb |
Views | 48,576 |
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 |
Net magazine demo - Step 3 | 5,295 Kb |
500 coffee cup icons | 3,169 Kb |
Modal Relationship Examples | 4,612 Kb |
Playing a CSS animation on hover | 2,424 Kb |
Adding Items | 4,008 Kb |
Net magazine demo - Complete | 5,291 Kb |
3D dancing dots | 2,334 Kb |
Steps Sprite Animation | 1,942 Kb |
Geometric Pattern Mask | 2,527 Kb |
Hypno triangle | 2,371 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 |
Virtual vinyl | Davidpanik | 3,474 Kb |
RollOver Effect 2 | Lmack90 | 2,162 Kb |
Nice textured background | Hans | 2,659 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Simple Login Form Template | Banunn | 3,571 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
CSS Tooltips | Darylldoyle | 2,599 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
Material design - button rainbow circle | Kunukn | 3,652 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!