Animated Floating Menu

Size
3,512 Kb
Views
12,144

How do I make an animated floating menu?

What is a animated floating menu? How do you make a animated floating menu? This script and codes were developed by Joseph Martucci on 25 October 2022, Tuesday.

Animated Floating Menu Previews

Animated Floating Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Floating Menu</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:800italic,400' rel='stylesheet' type='text/css'>
<h1>Animated Floating Menu</h1>
<nav> <a href="#" id="menu-opener">
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<path d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z" fill="#000000"></path>
</svg>
</a>
<ul> <li>New Message</li> <li>New Post</li> <li>New New Thing</li> <li>New Message</li> <li>New Post</li> <li>New New Thing</li>
</ul>
</nav> <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 Floating Menu - Script Codes CSS Codes

/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon";
*{ box-sizing: border-box;
}
html, body{ height: 100%; font-family: 'Open Sans', sans-serif;
}
h1{ font-weight: 900; font-style: italic; font-family: 'Open Sans', sans-serif; text-align: center; text-transform: uppercase; color: #555;
}
a#menu-opener{ @include transition(all .8s ease-in-out); @include radial-gradient(green, lighten(green, 10%)); position: absolute; right: 40px; top: -88px; width: 48px; height: 48px; border-radius: 50%; display: block; text-align: center; z-index: 900; svg{ @include transition(all .4s ease-in-out); margin-top: 8px; path{ fill: #FFFFFF; } } &.open{ @include transform(rotateX(180deg)); -webkit-filter: hue-rotate(-135deg); filter: hue-rotate(-135deg); top: 20px; svg{ @include transform(rotate(-405deg)); } }
}
nav{ @include transition(all .4s .2s); position: fixed; bottom: 0; left: 0; width: 100%; max-height: 0; &.open{ max-height: 300px; }
}
ul{ @include transition(all .4s ease-in-out); @include transform(scaleY(0)); @include transform-style(preserve3d); @include transform-origin(bottom); list-style: none; position: relative; bottom: 0; left: 0; width: 100%; padding: 0; margin: 0; li{ @include transition(all .2s); background: rgba(200,200,200, 1); display: block; padding: 6px 20px; color: #555; &:hover{ color: #f7486a; background: darken(rgba(200,200,200, 1), 10%); font-weight: 900; } } &.open{ @include transform(scaleY(1)); }
}

Animated Floating Menu - Script Codes JS Codes

$('#menu-opener').on('click', function(e){ e.preventDefault(); $(this).toggleClass('open'); $('ul').toggleClass('open'); $('nav').toggleClass('open');
})
Animated Floating Menu - Script Codes
Animated Floating Menu - Script Codes
Home Page Home
Developer Joseph Martucci
Username jjmartucci
Uploaded October 25, 2022
Rating 4.5
Size 3,512 Kb
Views 12,144
Do you need developer help for Animated Floating 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!

Joseph Martucci (jjmartucci) Script Codes
Create amazing marketing copy 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!