Fab menu v1

Developer
David Bellotti
Size
3,487 Kb
Views
14,168
  1. Fab menu v1 Previews
  2. Fab menu v1 HTML Codes
  3. Fab menu v1 CSS Codes
  4. Fab menu v1 JS Codes

How do I make an fab menu v1?

What is a fab menu v1? How do you make a fab menu v1? This script and codes were developed by David Bellotti on 30 October 2022, Sunday.

Fab menu v1 Previews
IQ Test

Fab menu v1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fab menu v1</title> <link rel='stylesheet prefetch' href='css/rpblvd.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='main'> <h1>Material FAB</h1> <h4> v1 <a href="https://codepen.io/dbellotti/pen/LEoOJb" target="_blank">v2</a> </h4> <div class="btn-container"> <div class="btn btn-primary"></div> <div class="btn btn-secondary"></div> <div class="btn btn-tertiary"></div> </div>
</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>

Fab menu v1 - Script Codes CSS Codes

/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon";
$diameter: 60px;
$sub-diameter: 50px;
$space: 10px;
$sub-push: ($diameter - $sub-diameter) / 2;
@mixin shadow($depth: 3px) { box-shadow: 0 $depth 6px 0 rgba(0,0,0,0.4);
}
.btn-container { position: absolute; left: 120px; &.active { .btn-secondary { $translation: ($diameter + $space) * 1; transform: translateY($translation) scale(1); opacity: 1; } .btn-tertiary { $translation: ($diameter + $space - $sub-push) * 2; transform: translateY($translation) scale(1); opacity: 1; } }
}
.btn { @include shadow; @include base-transition; background-color: orangered; border-radius: 50%; width: $diameter; height: $diameter; position: absolute; top: 0;
}
.btn-primary { z-index: 3; @include shadow; }
.btn-secondary { z-index: 2; margin-left: $sub-push; width: $sub-diameter; height: $sub-diameter; transform: scale(0.4); opacity: 0; }
.btn-tertiary { z-index: 1; margin-left: $sub-push; width: $sub-diameter; height: $sub-diameter; transform: scale(0.4); opacity: 0; }
.main { width: 300px; margin: auto; text-align: center; position: relative;
}

Fab menu v1 - Script Codes JS Codes

$('.btn-container').on('click', function() { $(this).toggleClass('active');
});
Fab menu v1 - Script Codes
Fab menu v1 - Script Codes
Home Page Home
Developer David Bellotti
Username dbellotti
Uploaded October 30, 2022
Rating 3
Size 3,487 Kb
Views 14,168
Do you need developer help for Fab menu v1?

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!

David Bellotti (dbellotti) Script Codes
Name
Snack time
Multi range slider with gradient
Pivotal Labs Animated Logo
Centered Box
JQuery ui material design datepicker
Red Curtain
Scroll Detection
Princess Mononoke Forest Spirits - WIP
Combinator
FAB menu v2
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!