Responsive 3D Flip Navigation

Developer
Nicholas M. Smith
Size
4,402 Kb
Views
36,432
  1. Responsive 3D Flip Navigation Previews
  2. Responsive 3D Flip Navigation HTML Codes
  3. Responsive 3D Flip Navigation CSS Codes
  4. Responsive 3D Flip Navigation JS Codes

How do I make an responsive 3d flip navigation?

What is a responsive 3d flip navigation? How do you make a responsive 3d flip navigation? This script and codes were developed by Nicholas M. Smith on 27 August 2022, Saturday.

Responsive 3D Flip Navigation Previews
IQ Test

Responsive 3D Flip Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive 3D Flip Navigation</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> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400' rel='stylesheet' type='text/css'>
<div class="page-wrap"> <!-- menu icon --> <div class="menu-icon-container"> <div class="menu-icon"> <div class="menu-global menu-top"></div> <div class="menu-global menu-middle"></div> <div class="menu-global menu-bottom"></div> </div> </div> <!-- main content --> <div class="flip-container"> <div class="flip-inner"> <div class="front"> <div class="content"> <h1>Flip Navigation</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eius obcaecati suscipit maxime ducimus! Qui illum adipisci accusamus consectetur magnam cumque quo voluptatem dolorem perferendis libero ullam possimus atque maxime.</p> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eius obcaecati suscipit maxime ducimus! Qui illum adipisci accusamus consectetur magnam cumque quo voluptatem dolorem perferendis libero ullam possimus atque maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eius obcaecati suscipit maxime ducimus! Qui illum adipisci accusamus consectetur magnam cumque quo voluptatem dolorem perferendis libero ullam possimus atque maxime.</p> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eius obcaecati suscipit maxime ducimus! Qui illum adipisci accusamus consectetur magnam cumque quo voluptatem dolorem perferendis libero ullam possimus atque maxime.</p> </div><!-- end content --> </div> <!-- end front --> <!-- navigation --> <div class="back"> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Work</a></li> <li><a href="">Reviews</a></li> <li><a href="">Careers</a></li> <li><a href="">Contact</a></li> </ul> </nav> </div><!-- end back --> </div><!-- end flip-inner --> </div><!-- end flip container -->
</div><!-- end page-wrap --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive 3D Flip Navigation - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: #3f434e; font-family: 'Source Sans Pro', sans-serif; font-weight: 100;
}
h1 { font-size: 3em; color: white;
}
p { color: white; font-size: 1.1em; font-weight: 100; letter-spacing: 0.1em; line-height: 1.5em; padding: 10px 0;
}
hr { border-color: #515664;
}
img { height: auto; vertical-align: middle; max-width: 100%;
}
.flip-container { height: 100%; -webkit-perspective: 1000px; perspective: 1000px; position: relative; width: 100%;
}
.flip-inner { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: 0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%;
}
.flip-inner-active { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg);
}
.front, .back { -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 100%; position: absolute; width: 100%;
}
.front { z-index: 2;
}
.back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.content { background: #3f434e; padding: 10px; opacity: 1; -webkit-transition: all 0.55s linear; transition: all 0.55s linear; width: 100%;
}
.content-not-active { opacity: 0; -webkit-transition: all 0.15s linear; transition: all 0.15s linear;
}
ul { list-style: none; margin: 0; padding: 0; text-align: center; width: 100%;
}
ul li { border-bottom: 1px solid #4d515e; display: inline-block; font-size: 2em; text-align: center; width: 100%;
}
ul li:last-child { border: none;
}
ul a { color: white; display: inline-block; padding: 20px 0; text-decoration: none; width: 100%;
}
ul a:hover { background: #383b45; -webkit-transition: all 0.15s linear; transition: all 0.15s linear;
}
.menu-icon-container { background: #6d9bb9; box-shadow: 0 1px 3px 0 #333; display: block; height: 65px; margin: 0 auto; position: relative; width: 100%; z-index: 999999;
}
.menu-icon { cursor: pointer; height: 40px; position: relative; top: 15px; left: 15px; width: 40px; -webkit-transition: all 0.15s linear; transition: all 0.15s linear;
}
.menu-rotate { top: 8px; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transition: all 0.15s linear; transition: all 0.15s linear;
}
.menu-global { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-top: 6px solid white; left: 0; position: absolute; width: 100%; -webkit-transition: all 0.15s linear; transition: all 0.15s linear;
}
.menu-top { top: 0px;
}
.menu-middle { top: 12px;
}
.menu-bottom { top: 24px;
}
.menu-top-click { top: 19px; -webkit-transform: rotate(48deg); transform: rotate(48deg);
}
.menu-middle-click { opacity: 0;
}
.menu-bottom-click { top: 19px; -webkit-transform: rotate(-48deg); transform: rotate(-48deg);
}
@media screen and (min-width: 37.5em) { ul li { display: inline-block; float: left; width: 50%; } ul li:first-child { border-right: 1px solid #4d515e; } ul li:last-child { border-bottom: 1px solid #4d515e; } ul li:nth-child(odd) { border-right: 1px solid #4d515e; } .content { margin: 0 auto; width: 100%; max-width: 700px; }
}
@media screen and (min-width: 56.25em) { ul li { border-right: 1px solid #4d515e; display: inline-block; float: left; font-size: 1.8em; width: 50%; } ul li:last-child { border-bottom: 1px solid #4d515e; border-right: none; }
}

Responsive 3D Flip Navigation - Script Codes JS Codes

var Menu = { el: { menuIcon: $('.menu-icon'), menuTop: $('.menu-top'), menuMiddle: $('.menu-middle'), menuBottom: $('.menu-bottom'), flipInner: $('.flip-inner'), content: $('.content') }, init: function() { Menu.bindUIactions(); }, bindUIactions: function() { Menu.el.menuIcon .on( 'click', function(event) { Menu.activateMenu(event); event.preventDefault(); } ); }, activateMenu: function() { Menu.el.menuTop.toggleClass('menu-top-click'); Menu.el.menuMiddle.toggleClass('menu-middle-click'); Menu.el.menuBottom.toggleClass('menu-bottom-click'); Menu.el.menuIcon.toggleClass('menu-rotate'); Menu.el.flipInner.toggleClass('flip-inner-active'); Menu.el.content.toggleClass('content-not-active'); }
};
Menu.init();
Responsive 3D Flip Navigation - Script Codes
Responsive 3D Flip Navigation - Script Codes
Home Page Home
Developer Nicholas M. Smith
Username icutpeople
Uploaded August 27, 2022
Rating 4.5
Size 4,402 Kb
Views 36,432
Do you need developer help for Responsive 3D Flip 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!

Nicholas M. Smith (icutpeople) Script Codes
Name
CSS Modal
Blur Image Hovers
Mobile First Responsive Table
Hover Effects
Flip Navicon
SVG Hand Drawn Navicon
Wordpress 3.8 loader
Flexbox Test
Tooltip
Button
Create amazing captions 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!