Wheel Menu
How do I make an wheel menu?
Wheel MenuCredits: thebabydino: http://dabblet.com/gist/3912488/ font-awesome: http://fontawesome.io/. What is a wheel menu? How do you make a wheel menu? This script and codes were developed by APinix on 11 January 2023, Wednesday.
Wheel Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wheel Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<nav> <ul> <li class='p1 slice'> <label><i class="fa fa-phone"></i></label> </li> <li class='p2 slice'> <label><i class="fa fa-video-camera"></i></label> </li> <li class='p3 slice'> <label> <i class="fa fa-camera-retro"></i></label> </li> <li class='p4 slice'> <label> <i class="fa fa-envelope"></i></label> </li> <li class='p5 slice'> <label><i class="fa fa-comment"></i></label> </li> <li class='p6 slice'> <label> <i class="fa fa-calendar-o"></i></label> </li> <li class='p7 slice'> <label> <i class="fa fa-music"></i></label> </li> <li class='inner-circle'></li> </ul>
</nav>
</body>
</html>
Wheel Menu - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
html { font: 200% "Montserrat", sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
body { background: #D8D8D8;
}
nav ul { position: absolute; width: 140px; height: 140px; top: 50%; left: 50%; margin-left: -60px; margin-top: -60px; list-style: none; border-radius: 50%; background: #D8D8D8; overflow: hidden; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
nav li { position: absolute;
}
.slice { overflow: hidden; position: absolute; top: -50%; left: -50%; width: 100%; height: 100%; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; color: #888; text-shadow: 0 1px 0 rgba(255,255,255, 0.8); text-decoration: none; text-align: center; border-radius: 4px; border: 1px solid #bcbcbc; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), color-stop(0.6, rgba(239,239,239,1)), to(rgba(225,223,226,1))); background-image: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(239,239,239,1) 60%, rgba(225,223,226,1) 100%); background-image: -moz-linear-gradient(rgba(255,255,255,1) 0%, rgba(239,239,239,1) 60%, rgba(225,223,226,1) 100%); background-image: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(239,239,239,1) 60%, rgba(225,223,226,1) 100%); background-image: linear-gradient(rgba(255,255,255,1) 0%, rgba(239,239,239,1) 60%, rgba(225,223,226,1) 100%); -webkit-transition: all .1s ease-in; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -ms-transition: all .1s ease-in; transition: all .1s ease-in;
}
.slice:hover { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), color-stop(0.6, rgba(255,255,255,1)), to(rgba(225,223,226,1))); background-image: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(225,223,226,1) 100%); background-image: -moz-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(225,223,226,1) 100%); background-image: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(225,223,226,1) 100%); background-image: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(225,223,226,1) 100%);
}
.slice:active { -webkit-box-shadow: inset 0 2px 30px rgba(0,0,0,0.5); box-shadow: inset 0 2px 30px rgba(0,0,0,0.5);
}
.inner-circle { top: 25%; left: 25%; width: 50%; height: 50%; background: #D8D8D8; border-radius: 50%; -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
nav label { cursor: pointer;
}
.slice label { display: block; width: 200%; height: 200%; -webkit-transform: skew(-39deg) rotate(-66deg); -moz-transform: skew(-39deg) rotate(-66deg); -o-transform: skew(-39deg) rotate(-66deg); -ms-transform: skew(-39deg) rotate(-66deg); transform: skew(-39deg) rotate(-66deg); /*opacity: .5;*/ line-height: 3.5; text-align: center; text-decoration: none; text-shadow: 0 2px 0 rgba(255,255,255, 1); -webkit-transition: all .1s ease-in; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -ms-transition: all .1s ease-in; transition: all .1s ease-in;
}
.slice label:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; color: #323a44;
}
nav .p1 { -webkit-transform: rotate(63deg) skewX(39deg) scale(.6); -moz-transform: rotate(63deg) skewX(39deg) scale(.6); -o-transform: rotate(63deg) skewX(39deg) scale(.6); -ms-transform: rotate(63deg) skewX(39deg) scale(.6); transform: rotate(63deg) skewX(39deg) scale(.6);
}
nav .p2 { -webkit-transform: rotate(114deg) skewX(39deg) scale(.6); -moz-transform: rotate(114deg) skewX(39deg) scale(.6); -o-transform: rotate(114deg) skewX(39deg) scale(.6); -ms-transform: rotate(114deg) skewX(39deg) scale(.6); transform: rotate(114deg) skewX(39deg) scale(.6);
}
nav .p3 { -webkit-transform: rotate(165deg) skewX(39deg) scale(.6); -moz-transform: rotate(165deg) skewX(39deg) scale(.6); -o-transform: rotate(165deg) skewX(39deg) scale(.6); -ms-transform: rotate(165deg) skewX(39deg) scale(.6); transform: rotate(165deg) skewX(39deg) scale(.6);
}
nav .p4 { -webkit-transform: rotate(217deg) skewX(39deg) scale(.6); -moz-transform: rotate(217deg) skewX(39deg) scale(.6); -o-transform: rotate(217deg) skewX(39deg) scale(.6); -ms-transform: rotate(217deg) skewX(39deg) scale(.6); transform: rotate(217deg) skewX(39deg) scale(.6);
}
nav .p5 { -webkit-transform: rotate(269deg) skewX(39deg) scale(.6); -moz-transform: rotate(269deg) skewX(39deg) scale(.6); -o-transform: rotate(269deg) skewX(39deg) scale(.6); -ms-transform: rotate(269deg) skewX(39deg) scale(.6); transform: rotate(269deg) skewX(39deg) scale(.6);
}
nav .p6 { -webkit-transform: rotate(321deg) skewX(39deg) scale(.6); -moz-transform: rotate(321deg) skewX(39deg) scale(.6); -o-transform: rotate(321deg) skewX(39deg) scale(.6); -ms-transform: rotate(321deg) skewX(39deg) scale(.6); transform: rotate(321deg) skewX(39deg) scale(.6);
}
nav .p7 { -webkit-transform: rotate(12deg) skewX(39deg) scale(.6); -moz-transform: rotate(12deg) skewX(39deg) scale(.6); -o-transform: rotate(12deg) skewX(39deg) scale(.6); -ms-transform: rotate(12deg) skewX(39deg) scale(.6); transform: rotate(12deg) skewX(39deg) scale(.6);
}
Developer | APinix |
Username | aPinix |
Uploaded | January 11, 2023 |
Rating | 3 |
Size | 2,626 Kb |
Views | 6,072 |
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 |
Pure CSS Tooltip | 2,815 Kb |
SASS Clock | 2,755 Kb |
Real Sass Line-Clamp | 4,023 Kb |
CSS Infinite 360 | 5,564 Kb |
Guided Tour Tooltip | 2,906 Kb |
Fire on Resize Finish | 1,952 Kb |
CSS Clock | 1,807 Kb |
Scroll Horizontal Edge Shadows | 3,765 Kb |
A Pen by aPinix | 3,573 Kb |
Blur Hover Effect | 2,995 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 |
Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
SVG hamburger menu button | Elifitch | 2,602 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Layout 11 | Altynai | 1,690 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
A Pen by Sooba | Sooba | 2,516 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!