Pure CSS3 Flyout Navigation

Developer
EY-Intuitive
Size
3,500 Kb
Views
6,072
  1. Pure CSS3 Flyout Navigation Previews
  2. Pure CSS3 Flyout Navigation HTML Codes
  3. Pure CSS3 Flyout Navigation CSS Codes

How do I make an pure css3 flyout navigation?

Flyout navigation utilizing pure CSS3 animations with keyframes. Works in mobile browsers too.. What is a pure css3 flyout navigation? How do you make a pure css3 flyout navigation? This script and codes were developed by EY-Intuitive on 17 January 2023, Tuesday.

Pure CSS3 Flyout Navigation Previews
IQ Test

Pure CSS3 Flyout Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 Flyout Navigation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .navigation { position: fixed; padding: 0; bottom: 20px; right: 0; list-style: none; width: 230px; height: 200px; background: url(https://s27.postimg.org/e2rcktbpf/colorbar.jpg) no-repeat right;
}
.navigation li { width: 230px;
}
.navigation li:hover a { -moz-animation-name: flyInNav; -moz-animation-iteration-count: once; -moz-animation-timing-function: ease-in; -moz-animation-duration: 0.25s; -moz-animation-fill-mode: forwards; -webkit-animation-name: flyInNav; -webkit-animation-iteration-count: once; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 0.25s; -webkit-animation-fill-mode: forwards; animation-name: flyInNav; animation-iteration-count: once; animation-timing-function: ease-in; animation-duration: 0.25s; animation-fill-mode: forwards;
}
.navigation li a { display: block; padding-top: 50px; width: 230px; height: 0; overflow: hidden; opacity: .8; -moz-animation-name: flyOutNav; -moz-animation-iteration-count: once; -moz-animation-timing-function: ease-in; -moz-animation-duration: 0.5s; -moz-animation-fill-mode: forwards; -webkit-animation-name: flyOutNav; -webkit-animation-iteration-count: once; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-name: flyOutNav; animation-iteration-count: once; animation-timing-function: ease-in; animation-duration: 0.5s; animation-fill-mode: forwards;
}
@-moz-keyframes flyOutNav { 0% { transform: translateX(0px); }
}
@-webkit-keyframes flyOutNav { 0% { transform: translateX(0px); } 100% { transform: translateX(230px); }
}
@keyframes flyOutNav { 0% { transform: translateX(0px); } 100% { transform: translateX(230px); }
}
@-moz-keyframes flyInNav { 0% { transform: translateX(230px); } 100% { transform: translateX(0px); }
}
@-webkit-keyframes flyInNav { 0% { transform: translateX(230px); } 100% { transform: translateX(0px); }
}
@keyframes flyInNav { 0% { transform: translateX(230px); } 100% { transform: translateX(0px); }
}
.navigation .home a { background: url(https://s30.postimg.org/c09eqci3l/home.png) no-repeat top right;
}
.navigation .confidential a { background: url(https://s27.postimg.org/qb50vsjgj/confidential.png) no-repeat top right;
}
.navigation .photos a { background: url(https://s9.postimg.org/vvzw6ym27/photos.png) no-repeat top right;
}
.navigation .about a { background: url(https://s28.postimg.org/bqp9zjqtp/about.png) no-repeat top right;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav> <ul class="navigation"> <li class="home scroll"><a href="#intro" title="Home">Home</a></li> <li class="confidential scroll"><a href="#second" title="Confidential">Confidential</a></li> <li class="photos scroll"><a href="#third" title="Photos">Photos</a></li> <li class="about scroll"><a href="#fifth" title="About">About</a></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Pure CSS3 Flyout Navigation - Script Codes CSS Codes

.navigation { position: fixed; padding: 0; bottom: 20px; right: 0; list-style: none; width: 230px; height: 200px; background: url(https://s27.postimg.org/e2rcktbpf/colorbar.jpg) no-repeat right;
}
.navigation li { width: 230px;
}
.navigation li:hover a { -moz-animation-name: flyInNav; -moz-animation-iteration-count: once; -moz-animation-timing-function: ease-in; -moz-animation-duration: 0.25s; -moz-animation-fill-mode: forwards; -webkit-animation-name: flyInNav; -webkit-animation-iteration-count: once; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 0.25s; -webkit-animation-fill-mode: forwards; animation-name: flyInNav; animation-iteration-count: once; animation-timing-function: ease-in; animation-duration: 0.25s; animation-fill-mode: forwards;
}
.navigation li a { display: block; padding-top: 50px; width: 230px; height: 0; overflow: hidden; opacity: .8; -moz-animation-name: flyOutNav; -moz-animation-iteration-count: once; -moz-animation-timing-function: ease-in; -moz-animation-duration: 0.5s; -moz-animation-fill-mode: forwards; -webkit-animation-name: flyOutNav; -webkit-animation-iteration-count: once; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-name: flyOutNav; animation-iteration-count: once; animation-timing-function: ease-in; animation-duration: 0.5s; animation-fill-mode: forwards;
}
@-moz-keyframes flyOutNav { 0% { transform: translateX(0px); }
}
@-webkit-keyframes flyOutNav { 0% { transform: translateX(0px); } 100% { transform: translateX(230px); }
}
@keyframes flyOutNav { 0% { transform: translateX(0px); } 100% { transform: translateX(230px); }
}
@-moz-keyframes flyInNav { 0% { transform: translateX(230px); } 100% { transform: translateX(0px); }
}
@-webkit-keyframes flyInNav { 0% { transform: translateX(230px); } 100% { transform: translateX(0px); }
}
@keyframes flyInNav { 0% { transform: translateX(230px); } 100% { transform: translateX(0px); }
}
.navigation .home a { background: url(https://s30.postimg.org/c09eqci3l/home.png) no-repeat top right;
}
.navigation .confidential a { background: url(https://s27.postimg.org/qb50vsjgj/confidential.png) no-repeat top right;
}
.navigation .photos a { background: url(https://s9.postimg.org/vvzw6ym27/photos.png) no-repeat top right;
}
.navigation .about a { background: url(https://s28.postimg.org/bqp9zjqtp/about.png) no-repeat top right;
}
Pure CSS3 Flyout Navigation - Script Codes
Pure CSS3 Flyout Navigation - Script Codes
Home Page Home
Developer EY-Intuitive
Username ey_intuitive
Uploaded January 17, 2023
Rating 3
Size 3,500 Kb
Views 6,072
Do you need developer help for Pure CSS3 Flyout Navigation?

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!

EY-Intuitive (ey_intuitive) Script Codes
Name
Hidden Push Nav with Flyouts
Draggable Timeline Demo
Facebook Paper Inspired Menu
Awesome Search Button with Input Animation
Reading Interaction
Awesome Full Page Menu Nav
Jquery Flyout Navigation
Dynamic Height Animated Menu
Progress Button Animation
Handlebars Templates - Example 2
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!