How to Make a Cool HTML5/CSS3 3D Bubble Floating Menu

How to Make a Cool HTML5/CSS3 3D Bubble Floating Menu: BY Phillip1 Dec,2020; Tags:
CSS3 Menu

Introduction

Before, we have shared all kinds of web menus, some based on jQuery, some based on HTML5 and CSS3, many of them are cool and useful. Today we are going to bring you another cool HTML5 3D menu, each menu item is a 3D style floating bubble, click on the menu item to activate the current menu.

How to Make a Cool HTML5/CSS3 3D Bubble Floating Menu

Instructions

HTML Body Code

<li>
			<a href="#phone" data-item="0">
				<svg version="1.1" xmlns="https://www.xxx.com/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64">
					<path fill="none" stroke="#fff" stroke-width="6" stroke-miterlimit="10" d="M46.671,57.375c0,2.003-1.643,3.625-3.667,3.625
						H20.997c-2.026,0-3.668-1.622-3.668-3.625V6.625C17.329,4.624,18.971,3,20.997,3h22.007c2.024,0,3.667,1.624,3.667,3.625V57.375z">
					<line fill="none" stroke="#fff" stroke-width="6" stroke-miterlimit="10" x1="20" y1="47" x2="44" y2="47">
					<line fill="none" stroke="#fff" stroke-width="6" stroke-miterlimit="10" x1="20" y1="12" x2="44" y2="12">
					<circle fill="#fff" cx="32" cy="54" r="3">
				</svg>
				<span>Phone</span>
			</a>
		</li>

Css Code

body {
  background-color: #002;
  background-image: radial-gradient(circle at center, #045, #002);
  color: #fff;
  font: 1em "Open Sans", sans-serif;
  height: 100vh;
  line-height: 1.5;
}

nav, ul, li {
  transform-style: preserve-3d;
}

nav, li {
  position: absolute;
  top: 50%;
  left: 50%;
}

nav, li a {
  border-radius: 50%;
}

nav {
  width: 18em;
  height: 18em;
  transform: translate(-50%, -50%) rotateX(75deg);
}

ul, li a {
  width: 100%;
  height: 100%;
}

Js Code

document.addEventListener("DOMContentLoaded", function(){
	let rise = function(trigEl) {
			trigEl.blur();

			let ul = document.querySelector("ul");

			ul.classList.add("rise");
			trigEl.classList.add("pop");

			setTimeout(function(){
				trigEl.focus();

				ul.classList.remove("rise");
				trigEl.classList.remove("pop");
			}, 1000);
		};

	this.querySelectorAll("li a").forEach(function(el){
		let rt = document.querySelector(":root"),
			di = +el.getAttribute("data-item");

		el.addEventListener("blur",function(){
		});
		el.addEventListener("focus",function(){
			rt.style.setProperty("--rotateTimes",di);
		});
		el.addEventListener("dblclick",function(){
			rise(this);
		});
		el.addEventListener("keyup",function(e){
			if (e.keyCode === 13) {
				rise(this);
			}
		});
	});
});

VIEW NOW