Menu

Developer
Ty Strong
Size
3,154 Kb
Views
34,408
  1. Menu Previews
  2. Menu HTML Codes
  3. Menu CSS Codes
  4. Menu JS Codes

How do I make an menu?

Cool Menu with arrow.. What is a menu? How do you make a menu? This script and codes were developed by Ty Strong on 11 August 2022, Thursday.

Menu Previews
IQ Test

Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu</title> <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! */ body {	background: #fff url(http://ugogreener.com/images/bg_stripes.gif);	color: #eee;	font-size: 16px;	font-family: greatFont, Arial, Helvetica, serif;	margin: 0;	border: 0;	padding: 0;
}
#menu-container, #closed-container {	position: fixed;	top: 0;	left: 0;	width: 100%;	height: 50px;	background: transparent;	transition-property: top;	transition-duration: 500ms;	z-index: 3;
}
#closed-container {	top: -50px;
}
.menu, .closed-menu {	display: block;	margin: 0 auto;	padding: 0;	width: 450px;	height: 40px;	background: #A0D468;	border-bottom-left-radius: 4px;	border-bottom-right-radius: 4px;	font-weight: 100;	color: #fff;
}
.closed-menu {	width: 100px;
}
.menu span {	transition-property: text-shadow;	transition-duration: 200ms;	text-shadow: 0 0 1px #333;
}
.arrow, .closed-arrow {	position: relative;	top: 2px;	background: transparent;	transition-property: border-width, top;	transition-duration: 300ms, 300ms;	margin: 0 auto;	width: 20px;	height: 20px;	border: solid #fff;	border-width: 0 2px 2px 0;	transform: rotate(45deg);
}
.closed-arrow {	top: 14px;	border-width: 2px 0 0 2px;
}
.closed-arrow-container:hover .closed-arrow {	top: 2px;	border-width: 0 2px 2px 0;
}
.arrow-container:hover .arrow {	top: 14px;	border-width: 2px 0 0 2px;
}
.closed-arrow-container, .arrow-container {	width: 50px;	height: 40px;	background: transparent;	margin: auto;
}
.menu-item {	float: left;	position: relative;	top: 9px; cursor: pointer;
}
.menu span:hover {	text-shadow: 0 0 5px #333;	text-decoration: underline;
}
#item1 {	left: 16px;
}
#item2 {	left: 50px;
}
#item3 {	left: 136px;
}
#item4 {	left: 156px;
}
@font-face { font-family: greatFont;	font-weight: 100;	src: url(http://ugogreener.com/fonts/Pluto-Light.otf) format("opentype");
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="menu-container"> <div id="pickme" class="menu"> <span id="item1" class="menu-item">Home</span> <span id="item2" class="menu-item">About Us</span> <span id="item3" class="menu-item">Solutions</span> <span id="item4" class="menu-item">Contact</span> <div class="arrow-container" onClick="hideMenu()"> <div class="arrow"> </div> </div> </div>
</div>
<div id="closed-container"> <div class="closed-menu"> <div class="closed-arrow-container" onClick="hideClosed()"> <div class="closed-arrow"></div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Menu - Script Codes CSS Codes

body {	background: #fff url(http://ugogreener.com/images/bg_stripes.gif);	color: #eee;	font-size: 16px;	font-family: greatFont, Arial, Helvetica, serif;	margin: 0;	border: 0;	padding: 0;
}
#menu-container, #closed-container {	position: fixed;	top: 0;	left: 0;	width: 100%;	height: 50px;	background: transparent;	transition-property: top;	transition-duration: 500ms;	z-index: 3;
}
#closed-container {	top: -50px;
}
.menu, .closed-menu {	display: block;	margin: 0 auto;	padding: 0;	width: 450px;	height: 40px;	background: #A0D468;	border-bottom-left-radius: 4px;	border-bottom-right-radius: 4px;	font-weight: 100;	color: #fff;
}
.closed-menu {	width: 100px;
}
.menu span {	transition-property: text-shadow;	transition-duration: 200ms;	text-shadow: 0 0 1px #333;
}
.arrow, .closed-arrow {	position: relative;	top: 2px;	background: transparent;	transition-property: border-width, top;	transition-duration: 300ms, 300ms;	margin: 0 auto;	width: 20px;	height: 20px;	border: solid #fff;	border-width: 0 2px 2px 0;	transform: rotate(45deg);
}
.closed-arrow {	top: 14px;	border-width: 2px 0 0 2px;
}
.closed-arrow-container:hover .closed-arrow {	top: 2px;	border-width: 0 2px 2px 0;
}
.arrow-container:hover .arrow {	top: 14px;	border-width: 2px 0 0 2px;
}
.closed-arrow-container, .arrow-container {	width: 50px;	height: 40px;	background: transparent;	margin: auto;
}
.menu-item {	float: left;	position: relative;	top: 9px; cursor: pointer;
}
.menu span:hover {	text-shadow: 0 0 5px #333;	text-decoration: underline;
}
#item1 {	left: 16px;
}
#item2 {	left: 50px;
}
#item3 {	left: 136px;
}
#item4 {	left: 156px;
}
@font-face { font-family: greatFont;	font-weight: 100;	src: url(http://ugogreener.com/fonts/Pluto-Light.otf) format("opentype");
}

Menu - Script Codes JS Codes

function hideMenu(){
document.getElementById("menu-container").style.top="-50px";
window.setTimeout(showClosed(),0)
}
function showClosed(){
document.getElementById("closed-container").style.top="0px";
}
function hideClosed(){
document.getElementById("closed-container").style.top="-50px";
window.setTimeout(showMenu(),0)
}
function showMenu(){
document.getElementById("menu-container").style.top="0px";
}
Menu - Script Codes
Menu - Script Codes
Home Page Home
Developer Ty Strong
Username tystrong
Uploaded August 11, 2022
Rating 3.5
Size 3,154 Kb
Views 34,408
Do you need developer help for 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!

Ty Strong (tystrong) Script Codes
Name
The Greatest.
Updated Personal Page
Rolling Circle
Info on Hover
Logo Cubes in Slim and SCSS
Another No Div Spinner
Colors and Media Queries
Heart Monitor
CSS Laptop
RADICAL
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!