Using Meny.js - Create 3D Nav Effect

Developer
Eric Tompkins
Size
3,191 Kb
Views
36,414

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 Previews
IQ Test

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">&nbsp;</p>	</article>	<footer>	&copy; 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	});
Using Meny.js - Create 3D Nav Effect - Script Codes
Using Meny.js - Create 3D Nav Effect - Script Codes
Home Page Home
Developer Eric Tompkins
Username _codemics
Uploaded August 27, 2022
Rating 3
Size 3,191 Kb
Views 36,414
Do you need developer help for Using Meny.js - Create 3D Nav Effect?

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!

Eric Tompkins (_codemics) Script Codes
Name
JQuery FullScreen Overlay
3D Rollover Sign-Up Form
JQuery - Easy Sticky Nav Bar
Menu Background Image Rollover
Responsive Email Template
A Pen by Eric Tompkins
Create amazing blog posts 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!