Mode Menu

Developer
Kira
Size
3,966 Kb
Views
30,360
  1. Mode Menu Previews
  2. Mode Menu HTML Codes
  3. Mode Menu CSS Codes
  4. Mode Menu JS Codes

How do I make an mode menu?

What is a mode menu? How do you make a mode menu? This script and codes were developed by Kira on 25 August 2022, Thursday.

Mode Menu Previews
IQ Test

Mode Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mode Menu</title> <link href="https://fonts.googleapis.com/css?family=Oswald:400,500,600,700|Roboto:300,400,500,700,900" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div class="menu-list"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Ingredients</a> <a href="#">Shop</a> <a href="#">FAQ</a> <a href="#">Blog</a>
</div>
</body>
<div class="menu-content menu-content-one"> <div class="content-wrap"> <h1>Home</h1> <p>Developed by a team of food scientists, kinesilogists and athletes to provide clean and fresh performance. For everyone who takes their workouts, performance and health seriously - from pro athletes to weekend warriors.</p> <p>01</p><span class="list">Research based formula</span> </div>
</div>
<div class="menu-content menu-content-two"> <div class="content-wrap"> <h1>About</h1> <p>Our vision is to empower athlete to reach their potential and take fitness to the next level. We use all natural ingredients for the healthiest possible nutrition. Our products use scientific research for the most effective fitness formulas.</p> <p>01</p><span class="list">We're your Health and nutrition experts</span> </div>
</div>
<div class="menu-content menu-content-three"> <div class="content-wrap"> <h1>Ingredients</h1> <p>Developed by a team of food scientists, kinesilogists and athletes to provide clean and fresh performance. For everyone who takes their workouts, performance and health seriously - from pro athletes to weekend warriors.</p> <p>01</p><span class="list">Research based formula</span> </div>
</div>
<div class="menu-content menu-content-four"> <div class="content-wrap"> <h1>Shop</h1> <p>We have a sports nutrition drink for every step of your workout from warmup to cool down. For everyone who takes their workouts, performance and health seriously - from pro athletes to weekend warriors.</p> <p>01</p><span class="list">Browse our products</span> </div>
</div>
<div class="menu-content menu-content-five"> <div class="content-wrap"> <h1>FAQ</h1> <p>Mode has an easy ordering process and auto shipment delivery to make your life easier. We take out all the complexity so you can order without frustration.</p> <p>01</p><span class="list">Easy ordering process</span> </div>
</div>
<div class="menu-content menu-content-six"> <div class="content-wrap"> <h1>Blog</h1> <p>Get the latest news at Mode. Our blog provides information and tips on how to get the most out of your workout and stay healthy.</p> <p>01</p><span class="list">Latest Post: Marathon Training where Mode falls into place</span> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mode Menu - Script Codes CSS Codes

body { background: #111; font-family: 'Oswald', sans-serif; letter-spacing: 3px;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif;
}
p { font-family: 'Roboto mono', sans-serif; letter-spacing: .5px; font-weight: 400; display: inline-block; margin-right: 20px; line-height: 2;
}
.menu-list { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 24px;
}
.menu-list a { color: white; display: block; text-decoration: none; text-transform: uppercase; padding: 0 2em; line-height: 2.5em; position: relative; transition: all .15s ease;
}
.menu-list a:before { content: ""; height: 1px; width: 0px; background: yellow; position: absolute; left: 0; top: 50%; transition: all .15s ease;
}
.menu-list a:hover { color: yellow;
}
.menu-list a:hover:before { width: 20px;
}
.menu-content { display: none; position: absolute; top: 50%; right: 0; max-width: 60%; transform: translateY(-50%); padding: 30px; height: 70%; background-size: cover;
}
.menu-content:after { content: ""; position: absolute; height: 100%; width: 100%; background: #000; opacity: .85; top: 0; left: 0; z-index: -1;
}
.menu-content .list { text-transform: uppercase; letter-spacing: 5px; font-size: 10px; display: inline-block; font-weight: light;
}
.menu-content .content-wrap { top: 14%; left: -20%; position: relative;
}
.menu-content span { color: yellow; text-decoration: none; text-transform: uppercase; font-size: .7em; letter-spacing: 4px;
}
.menu-content h1 { color: white; font-family: 'Oswald', sans-serif; letter-spacing: 4px; text-transform: uppercase; font-size: 45px;
}
.menu-content p { color: white;
}
.menu-content-one { background: url(https://images.unsplash.com/photo-1483721310020-03333e577078); background-size: cover;
}
.menu-content-two { background: url(https://images.unsplash.com/photo-1480699132165-c222f12b6c66); background-size: cover;
}
.menu-content-three { background: url(https://images.unsplash.com/photo-1483721310020-03333e577078); background-size: cover;
}
.menu-content-four { background: url(https://images.unsplash.com/photo-1480699132165-c222f12b6c66); background-size: cover;
}
.menu-content-five { background: url(https://images.unsplash.com/photo-1483721310020-03333e577078); background-size: cover;
}
.menu-content-six { background: url(https://images.unsplash.com/photo-1480699132165-c222f12b6c66); background-size: cover;
}

Mode Menu - Script Codes JS Codes

$(".menu-list a:first-of-type").hover(	function () {	$( ".menu-content-one" ).fadeIn( "slow", function() { // Animation complete.	});	},	function () {	$( ".menu-content-one" ).fadeOut( "slow", function() { // Animation complete.	});	}
);
$(".menu-list a:nth-child(2)").hover(	function () {	$( ".menu-content-two" ).fadeIn( "slow", function() { // Animation complete.	});	},	function () {	$( ".menu-content-two" ).fadeOut( "slow", function() { // Animation complete.	});	}
);
$(".menu-list a:nth-child(3)").hover(	function () {	$( ".menu-content-three" ).fadeIn( "slow", function() { // Animation complete.	});	},	function () {	$( ".menu-content-three" ).fadeOut( "slow", function() { // Animation complete.	});	}
);
$(".menu-list a:nth-child(4)").hover(	function () {	$( ".menu-content-four" ).fadeIn( "slow", function() { // Animation complete.	});	},	function () {	$( ".menu-content-four" ).fadeOut( "slow", function() { // Animation complete.	});	}
);
$(".menu-list a:nth-child(5)").hover(	function () {	$( ".menu-content-five" ).fadeIn( "slow", function() { // Animation complete.	});	},	function () {	$( ".menu-content-five" ).fadeOut( "slow", function() { // Animation complete.	});	}
);
$(".menu-list a:nth-child(6)").hover(	function () {	$( ".menu-content-six" ).fadeIn( "slow", function() { // Animation complete.	});	},	function () {	$( ".menu-content-six" ).fadeOut( "slow", function() { // Animation complete.	});	}
);
Mode Menu - Script Codes
Mode Menu - Script Codes
Home Page Home
Developer Kira
Username kepixels
Uploaded August 25, 2022
Rating 3
Size 3,966 Kb
Views 30,360
Do you need developer help for Mode 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!

Kira (kepixels) Script Codes
Name
Sticky CTA Buttons
Rotated Text
Control Shape Hero
A Pen by Kira
Blog Images Sized and Centered
Parallax Scroll Demo
Simple Modal
Icon Loading Animation
Grid Box Animated Navigation
Fluid Grid
Create amazing art & images 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!