Fancy Menu

Developer
Jordan Checkman
Size
2,356 Kb
Views
8,096
  1. Fancy Menu Previews
  2. Fancy Menu HTML Codes
  3. Fancy Menu CSS Codes
  4. Fancy Menu JS Codes

How do I make an fancy menu?

For use with Fancy Table. WIP. What is a fancy menu? How do you make a fancy menu? This script and codes were developed by Jordan Checkman on 21 January 2023, Saturday.

Fancy Menu Previews
IQ Test

Fancy Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fancy Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--copyright PJM Interconnection-->
<html>	<head>	<link rel="stylesheet" type="text/css" href="ex_styles/features_menu.css">	<script type="text/javascript" src="ex_scripts/features_menu.js"></script>	</head>	<body>	<header>	<a href="#" id="menu_open"><span>Menu</span></a>	<ul>	<li>One</li>	<li>Two</li>	<li>Three</li>	</ul>	</header>	</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fancy Menu - Script Codes CSS Codes

body{	margin: 0;	height: 4000px;	background: rgb(48, 109, 153);	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;	text-rendering: optimizeLegibility;	-webkit-font-feature-settings: "liga";
}
header{	position: fixed; top: 0; right: 0; width: 100%; height: 100%; border-width: 0px; border-style: solid; border-color: #333; background-color: rgba(0,0,0,0); -webkit-transition: border-width 0.3s, background 0.3s, height 0s 0.3s;
}
#menu_open{	position: fixed;	top: 30px;	right: 30px;	display: block;	width: 50px;	height: 50px;	margin-top: -2px;	font-size: 0px;	-webkit-user-select: none;	-webkit-transition: background 0.3s;
}
#menu_open>span{	position: absolute;	top: 50%;	left: 0;	display: block;	width: 100%;	height: 4px;	margin-top: -2px;	background: rgba(255,255,255,.8);	font-size: 0px;	-webkit-user-select: none;	-webkit-transition: background 0.3s;
}
#menu_open>span:before,
#menu_open>span:after { position: absolute; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.8); content: ''; -webkit-transition: -webkit-transform 0.3s;
}
#menu_open>span:before{	-webkit-transform: translateY(-250%);
}
#menu_open>span:after{	-webkit-transform: translateY(250%);
}
#menu_open.triggered>span{	background: transparent;
}
#menu_open.triggered>span:before{ -webkit-transform: translateY(0) rotate(45deg);
}
#menu_open.triggered>span:after{ -webkit-transform: translateY(0) rotate(-45deg);
}
header>ul{	display: none;
}

Fancy Menu - Script Codes JS Codes

$(document).ready(function(){	$('#menu_open').click(function(){	if ($(this).hasClass('triggered')){	$(this).removeClass('triggered');	$('header').css('border-width', '0');	}	else{	$(this).addClass('triggered');	$('header').css('border-top', '100px solid #333');	}	});
});
Fancy Menu - Script Codes
Fancy Menu - Script Codes
Home Page Home
Developer Jordan Checkman
Username JordanC
Uploaded January 21, 2023
Rating 3
Size 2,356 Kb
Views 8,096
Do you need developer help for Fancy Menu?

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!

Jordan Checkman (JordanC) Script Codes
Name
Word Slider Demo
Carl Philippe Effect
Print Button
Pretty
RSW
Contenteditable Test
A Pen by Jordan Checkman
Awesome Reports
Create amazing sales emails 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!