Code Module - Floating Action Menu

Developer
Andy Tran
Size
3,779 Kb
Views
26,312
  1. Code Module - Floating Action Menu Previews
  2. Code Module - Floating Action Menu HTML Codes
  3. Code Module - Floating Action Menu CSS Codes
  4. Code Module - Floating Action Menu JS Codes

How do I make an code module - floating action menu?

What is a code module - floating action menu? How do you make a code module - floating action menu? This script and codes were developed by Andy Tran on 18 August 2022, Thursday.

Code Module - Floating Action Menu Previews
IQ Test

Code Module - Floating Action Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Code Module - Floating Action Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Credits -->
<!-- Developer - Andy Tran (https://andytran.me) -->
<!-- Design - Andy Tran (https://andytran.me) -->
<div class="at-floating-navigation"> <button class="at-floating-navigation__button" type="button">+</button> <nav class="at-floating-navigation__menu"> <header class="at-floating-navigation__user"> <div class="at-floating-navigation__thumbnail"> <img alt="Andy Tran" src="https://en.gravatar.com/userimage/64217327/096c4ecedf5cf0259c707b7f5255246d.jpg?size=400" /> </div> <div class="at-floating-navigation__content"> <h2 class="at-floating-navigation__title">Andy Tran</h2> <p class="at-floating-navigation__description"> <a href="https://andytran.me">View Profile</a> </p> </div> </header> <a class="at-floating-navigation__item" href="https://andytran.me">Settings</a> <a class="at-floating-navigation__item" href="https://andytran.me">Help Desk</a> <a class="at-floating-navigation__item" href="https://andytran.me">Log Out</a> </nav>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Code Module - Floating Action Menu - Script Codes CSS Codes

.at-floating-navigation { z-index: 999999; position: fixed; right: 20px; bottom: 20px; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.at-floating-navigation * { pointer-events: none;
}
.at-floating-navigation__user { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; border-bottom: 1px solid #EEEEEE; padding: 20px; box-sizing: border-box;
}
.at-floating-navigation__thumbnail { width: 60px; max-width: 60px; min-width: 60px; border: 1px solid #EEEEEE; border-radius: 100%; margin: 0 20px 0 0; padding: 4px; box-sizing: border-box; overflow: hidden;
}
.at-floating-navigation__thumbnail img { display: block; width: 100%; max-width: 100%; border-radius: 100%;
}
.at-floating-navigation__title { color: #444444; margin: 0 0 2px; padding: 0; font-size: 14px !important;
}
.at-floating-navigation__description { margin: 0; padding: 0; color: #999999; font-size: 12px;
}
.at-floating-navigation__description a { color: inherit; text-decoration: none;
}
.at-floating-navigation__button { pointer-events: auto; outline: none; background: #FFFFFF; width: 40px; height: 40px; border: 1px solid #EEEEEE; border-radius: 100%; font-size: 12px; font-weight: 600; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: 200ms ease; transition: 200ms ease; cursor: pointer;
}
.at-floating-navigation__menu { position: absolute; right: 0; bottom: 100%; background: #FFFFFF; width: 240px; border: 1px solid #EEEEEE; border-radius: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); -webkit-transform: translateY(0); transform: translateY(0); opacity: 0; -webkit-transition: 200ms ease; transition: 200ms ease;
}
.at-floating-navigation__item { display: block; width: 100%; height: 40px; border-bottom: 1px solid #EEEEEE; padding: 0 20px; box-sizing: border-box; text-decoration: none; color: #444444; font-size: 12px; font-weight: 600; line-height: 40px;
}
.at-floating-navigation__item:last-child { border-bottom: 0;
}
.at-floating-navigation--active * { pointer-events: auto;
}
.at-floating-navigation--active .at-floating-navigation__button { -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.at-floating-navigation--active .at-floating-navigation__menu { -webkit-transform: translateY(-10px); transform: translateY(-10px); opacity: 1;
}

Code Module - Floating Action Menu - Script Codes JS Codes

'use strict';
jQuery('.at-floating-navigation__button').on('click', function (e) { e.preventDefault(); jQuery(this).parent().toggleClass('at-floating-navigation--active');
});
Code Module - Floating Action Menu - Script Codes
Code Module - Floating Action Menu - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded August 18, 2022
Rating 3.5
Size 3,779 Kb
Views 26,312
Do you need developer help for Code Module - Floating Action 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!

Andy Tran (andytran) Script Codes
Name
Material Login Form
Progress Bar
Macbook Pro Demo
Flat Login Form
Flat Pricing Table
Day 23 - Interactive Wallet
Flat Login Form 3.0
Sign Up Form
Article News Card
Flat Vertical Navigation 2.0
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!