Using Meny.js - Create 3D Nav Effect
How do I make an using meny.js - create 3d nav effect?
Playing with meny.js to create 3D menu effects.Download: http://lab.hakim.se/meny/. What is a using meny.js - create 3d nav effect? How do you make a using meny.js - create 3d nav effect? This script and codes were developed by Eric Tompkins on 27 August 2022, Saturday.
Using Meny.js - Create 3D Nav Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Using Meny.js - Create 3D Nav Effect </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- links to meny.js script file -- download at http://lab.hakim.se/meny/ -->
<script type="text/javascript" src="http://goo.gl/df30Ys"></script>
<html> <head> <meta charset="UTF-8"> <title>3D Navigation with CSS3 and Meny.JS</title> </head> <body> <div class="menu"> <nav> <div id="handle"><div class="downarrow"></div></div> <ul> <li><a href="#" title="Click here to..." class="active">HOME</a></li> <li><a href="#" title="Click here to...">LEARN</a></li> <li><a href="#" title="Click here to...">TEACH</a></li> <li><a href="#" title="Click here to...">CONTACT</a></li> </ul> </nav> </div> <div class="container"> <header> <section id="video-header"> <iframe class="video" src="//player.vimeo.com/video/95415863" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </section> </header> <article> <section class="box1"> <h2>LEARNING</h2> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p> <a class="calltoaction" title="Click here to...">SIGN-UP</a> </section> <section class="box2"> <h2>TEACHING</h2> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p> <a class="calltoaction" title="Click here to...">SIGN-UP</a> </section> <section class="box3"> <h2>SUPPORT</h2> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p> <a class="calltoaction" title="Click here to...">CONTACT US</a> </section> <p class="blurb"> </p> </article> <footer> © 2014 SOME COMPANY. ALL RIGHTS RESERVED. </footer> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>
Using Meny.js - Create 3D Nav Effect - Script Codes CSS Codes
body { background: #383838; color: #fff; font-family: helvetica, arial, sans-serif; font-size: 62.5%; line-height: 2.1em; margin: 0; padding: 0; } a { color: #fc0000; } header, article, footer { margin: 0; padding: 0; display: block; width: 960px; margin: auto; box-shadow: 0px 0px 10px #000; background: #000; font-size: 1.2em; } nav { position: relative; border-bottom: 2px solid #fc0000; background: #000; color: #fc0000; height: 50px; display: block; box-shadow: 0px 0px 10px #000; z-index: 1; } nav ul { position: relative; margin: 0; padding: 0; text-align: right; z-index: 100; background: #000; padding-right: 100px; } nav ul li { list-style: none; margin: 0; padding: 5px 10px; display: inline-block; line-height: 35px; z-index: 100; } nav ul li a { text-decoration: none; font-size: 1.2em; color: #fc0000; z-index: 100; } nav ul li a.active, nav ul li a:hover { color: #fff; } nav #handle { width: 20px; height: 20px; border-radius: 10px; position: absolute; top: 40px; left: 50%; margin-left: -10px; background: #000; z-index: 1; } nav #handle .downarrow { border: 5px solid transparent; border-top: 8px solid #fc0000; position: absolute; left: 5px; bottom: 0px; } #video-header { overflow: hidden; height: 400px; } .video { margin-top: 20px; } #logo { width: 340px; float: left; margin-left: 40px; margin-top: 100px; margin-right: 40px; } #logo a.calltoaction { font-size: 0.8em; } #logo h1 { width: 320px; height: 80px; overflow: hidden; text-indent: -10000px; background: transparent url(logo.png) no-repeat top left; } article { padding-top: 40px; min-height: 500px; } article section { width: 263px; background: transparent url(image.png) repeat-x top left; min-height: 200px; border-right: 1px solid #1a1a1a; float: left; margin-left: 10px; padding: 20px; } a.calltoaction { font-weight: bold; color: #fc0000; text-align: right; text-transform: uppercase; float: right; display: block; cursor: pointer; } .blurb { clear: both; } footer { padding: 40px; width: 880px; color: #999; }
Using Meny.js - Create 3D Nav Effect - Script Codes JS Codes
var meny = Meny.create({ menuElement: document.querySelector( '.menu' ), contentsElement: document.querySelector( '.container' ), position: 'top', height: 50 });
Developer | Eric Tompkins |
Username | _codemics |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 3,191 Kb |
Views | 36,432 |
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 |
JQuery FullScreen Overlay | 2,252 Kb |
3D Rollover Sign-Up Form | 3,727 Kb |
JQuery - Easy Sticky Nav Bar | 2,551 Kb |
Menu Background Image Rollover | 2,147 Kb |
A Pen by Eric Tompkins | 1,243 Kb |
Responsive Email Template | 4,175 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 |
Two Element Typeface | Chrisota | 4,942 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
RollOver Effect 2 | Lmack90 | 2,162 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
Parallax.js | Zmeeey5 | 2,330 Kb |
Process Accordion | Devilskitchen | 31,432 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!