Animated Menu

Developer
Una Kravets
Size
2,801 Kb
Views
36,432
  1. Animated Menu Previews
  2. Animated Menu HTML Codes
  3. Animated Menu CSS Codes
  4. Animated Menu JS Codes

How do I make an animated menu?

A simple menu for my portfolio. What is a animated menu? How do you make a animated menu? This script and codes were developed by Una Kravets on 04 August 2022, Thursday.

Animated Menu Previews
IQ Test

Animated Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="menu-section"> <div class="menu-toggle"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> <nav>	<ul role="navigation" class="hidden">	<li><a href="#">work</a></li>	<li><a href="#">about</a></li>	<li><a href="#">resume</a></li>	<li><a href="#">contact</a></li>	</ul>	</nav>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Menu - Script Codes CSS Codes

body { background: tomato; margin: 0; padding: 0;
}
.menu-toggle { width: 40px; height: 30px; position: absolute; top: 20px; right: 25px; cursor: pointer;
}
.menu-toggle.on .one { -moz-transform: rotate(45deg) translate(7px, 7px); -ms-transform: rotate(45deg) translate(7px, 7px); -webkit-transform: rotate(45deg) translate(7px, 7px); transform: rotate(45deg) translate(7px, 7px);
}
.menu-toggle.on .two { opacity: 0;
}
.menu-toggle.on .three { -moz-transform: rotate(-45deg) translate(8px, -10px); -ms-transform: rotate(-45deg) translate(8px, -10px); -webkit-transform: rotate(-45deg) translate(8px, -10px); transform: rotate(-45deg) translate(8px, -10px);
}
.one,
.two,
.three { width: 100%; height: 5px; background: white; margin: 6px auto; backface-visibility: hidden; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
}
nav ul { margin: 0; padding: 0; font-family: Open Sans; list-style: none; margin: 4em auto; text-align: center;
}
nav ul.hidden { display: none;
}
nav ul a { -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; text-decoration: none; color: white; font-size: 3em; line-height: 1.5; width: 100%; display: block;
}
nav ul a:hover { background-color: rgba(0, 0, 0, 0.5);
}
.menu-section.on { z-index: 10; width: 100%; height: 100%; display: block; background-color: rgba(0, 0, 0, 0.5); position: absolute;
}

Animated Menu - Script Codes JS Codes

$(".menu-toggle").on('click', function() { $(this).toggleClass("on"); $('.menu-section').toggleClass("on"); $("nav ul").toggleClass('hidden');
});
Animated Menu - Script Codes
Animated Menu - Script Codes
Home Page Home
Developer Una Kravets
Username una
Uploaded August 04, 2022
Rating 4.5
Size 2,801 Kb
Views 36,432
Do you need developer help for Animated 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!

Una Kravets (una) Script Codes
Name
Selective Coloring with CSS
Accidental cool effect 2
The Power of CSS Talk
CSS Custom Properties on Elements
Infrared Mixin
Jeff the Bug in Flight Mode
3D Effect Part 2
Sassy Shape Machine Mixin
WORK IT
CSS Parrot
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!