Expanding Circle Menu
How do I make an expanding circle menu?
What is a expanding circle menu? How do you make a expanding circle menu? This script and codes were developed by Tim Normington on 05 December 2022, Monday.
Expanding Circle Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Expanding Circle Menu</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header"> <button id="nav-toggle" class="fab fab-primary nav-toggle"> <i class="fa fa-bars"></i> <i class="fa fa-close"></i> </button>
</header>
<nav class="nav" id="nav"> <ul class="nav-list"> <li><a href="#">Blog</a></li> <li><a href="#">About Us</a></li> <li><a href="#">The Podcast</a></li> <li><a href="#">Contact</a></li> </ul>
<!-- <button class="fab fab-close"> <i class="fa fa-close"></i> </button> -->
</nav>
<div class="nav-circle" id="nav-circle"></div>
<div class="ripple inner-ripple" id="inner-ripple"></div>
<div class="ripple middle-ripple" id="middle-ripple"></div>
<div class="ripple outer-ripple" id="outer-ripple"></div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Expanding Circle Menu - Script Codes CSS Codes
html { overflow: hidden;
}
body { background-color: #F3F8D8; position: relative; font-family: 'Open Sans', sans-serif;
}
a { text-decoration: none; color: #2679ED; border: 1px solid transparent; transition: all 0.15s ease-out;
}
a:hover { color: #A6DDED; border-bottom: 1px solid #2679ED;
}
.header { height: 100vh; position: relative;
}
.nav { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 8; pointer-events: none; width: 25em; text-align: center;
}
.nav-list { list-style-type: none; padding: 0; margin: 0; line-height: 3.5em;
}
.nav-list li { opacity: 0; transform: translateX(-100px);
}
.nav-circle { width: 10px; height: 10px; position: absolute; background-color: #710911; background-image: radial-gradient(#b80f1b, #710911); top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); border-radius: 50%; z-index: 5;
}
.nav a { color: white; font-size: 2em; font-weight: 100; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; position: relative; border: none;
}
.nav a:after { left: 50%; bottom: 0%; transform: translateX(-50%); content: ''; display: block; height: 2px; background-color: white; position: absolute; width: 0; transition: all 0.15s ease-out;
}
.nav a:hover { border: none;
}
.nav a:hover:after { content: ''; display: block; width: 100%; height: 2px; background-color: white; position: absolute;
}
.fab { z-index: 10; border-radius: 50%; outline: 0; border: 0; padding: 1em; width: 3em; height: 3em; display: flex; align-items: center; justify-content: center; font-size: 1.2em; -webkit-tap-highlight-color: transparent; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.25); transition: all 0.15s ease-out;
}
.fab:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.65);
}
.fab:active { transform: translateX(-50%) translateY(-50%) scale(0.9); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.fab:focus { outline: none;
}
.fab.fab-primary { background-color: #2679ED; color: #A6DDED;
}
.fab.fab-primary:hover { color: #0d4aa0;
}
.fab.fab-primary:active { background-color: #1160cf;
}
.fab.fab-close { background-color: #E71322; color: white;
}
.fab.fab-close:hover { color: white;
}
.nav-toggle { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); display: flex; flex-wrap: wrap; overflow: hidden; transition: all 0.25s ease-out;
}
.nav-toggle i { width: 3em; height: 3em; transition: all 0.25s ease-out;
}
.nav-toggle.open { background-color: white; color: #2679ED; top: 75%; transform: translateY(100%) translateX(-50%);
}
.nav-toggle.open i { transform: translateY(-3em);
}
.nav-toggle.open:active { transform: translateX(-50%) translateY(100%) scale(0.9); background-color: #A6DDED;
}
.ripple { width: 0; height: 0; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) scale(1); border-radius: 50%; z-index: 4; animation: pulse 4s infinite; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.inner-ripple { background-color: rgba(38, 121, 237, 0.5); width: 100px; height: 100px;
}
.middle-ripple { background-color: rgba(38, 121, 237, 0.25); width: 200px; height: 200px; animation-delay: 0.35s;
}
.outer-ripple { background-color: rgba(38, 121, 237, 0.15); width: 350px; height: 350px; animation-delay: 0.75s;
}
@keyframes pulse { 0% { opacity: 0; transform: scale(1) translateX(-50%) translateY(-50%); } 30% { opacity: 0.5; } 100% { transform: scale(1.5) translateX(-33.3%) translateY(-33.3%); opacity: 0; }
}
Expanding Circle Menu - Script Codes JS Codes
$(document).ready(function() { var $nav_toggle = $('#nav-toggle'); // var $nav_toggle_after = $('#nav-toggle::after'); var $nav_circle = $('#nav-circle'); var $nav = $('#nav'); var $nav_list_items = $nav.find('li'); // var $nav_links = $ var $ripples = $('.ripple'); TweenMax.set($nav_list_items, { transformOrigin: 'center center', }); // TweenMax.set($ripples, { // transformOrigin: 'center center', // }); $nav_toggle.click(function() { if($(this).hasClass('open')) { // NAV CLOSES TweenMax.to($nav_circle, 1, { width: '10px', height: '10px', ease: Power4.easeOut, }); TweenMax.set($nav, { pointerEvents: 'none', }); TweenMax.to($nav_list_items, 0.5, { opacity: '0', // x: '-100px', }); TweenMax.set($nav_list_items, { x: '-100px', delay: 0.5, }); } else { // NAV OPENS TweenMax.to($nav_circle, 1, { width: '400vw', height: '400vw', ease: Power4.easeOut, }); TweenMax.set($nav, { pointerEvents: 'auto', }); TweenMax.staggerTo($nav_list_items, 0.5, { opacity: '100', x: 0, ease: Power4.easeOut, }, 0.15); TweenMax.to($ripples, 0.5, { opacity: '0', }); } $(this).toggleClass('open'); });
});
Developer | Tim Normington |
Username | tnormington |
Uploaded | December 05, 2022 |
Rating | 3 |
Size | 4,753 Kb |
Views | 10,120 |
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!
Name | Size |
Image gallery | 2,434 Kb |
Mobile Dropdown Top Nav | 3,183 Kb |
Mobile Drop Down | 4,856 Kb |
Twitch Notification Concept | 2,589 Kb |
Animate Dom Manipulation | 3,205 Kb |
Color Picker | 2,956 Kb |
Google Inbox Header | 3,221 Kb |
Diagonal Mega Menu | 5,288 Kb |
Parellelogram Link Hover Effect | 2,618 Kb |
Online Banking Interface | 2,919 Kb |
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!
Name | Username | Size |
Simple personal profile | Miroot | 2,856 Kb |
Vue.js Starter | Andymerskin | 1,268 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Tab panels | Accessibility | 0 Kb |
Objects | Bonzaipenguin | 2,616 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!