PracticeIO Circle Fan Menu

Developer
James Podles
Size
2,272 Kb
Views
22,264
  1. PracticeIO Circle Fan Menu Previews
  2. PracticeIO Circle Fan Menu HTML Codes
  3. PracticeIO Circle Fan Menu CSS Codes
  4. PracticeIO Circle Fan Menu JS Codes

How do I make an practiceio circle fan menu?

What is a practiceio circle fan menu? How do you make a practiceio circle fan menu? This script and codes were developed by James Podles on 23 November 2022, Wednesday.

PracticeIO Circle Fan Menu Previews
IQ Test

PracticeIO Circle Fan Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>PracticeIO Circle Fan Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="circle"> <div id="about" class="hold"> <div class="menu"></div> <a class="about">about</a> </div> <div id="home" class="hold"> <div class="menu"></div> <a class="home">home</a> </div> <div id="contact" class="hold"> <div class="menu"></div> <a class="contact">contact</a> </div> <div id="links" class="hold"> <div class="menu"></div> <a class="links">links</a> </div> <div id="bio" class="hold"> <div class="menu"></div> <a class="bio">bio</a> </div> <div id="store" class="hold"> <div class="menu"></div> <a class="store">store</a> </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>

PracticeIO Circle Fan Menu - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato);
body { font-family:'lato'; background-color:#E2E2E2;
}
div.wrapper { height:100%; width:100%;
padding-top: 15%;
padding-left: 30%;
}
.fan{ -webkit-transition:-webkit-transform 2s cubic-bezier(.49,.24,.32,.96); transition:-webkit-transform 2s cubic-bezier(.49,.24,.32,.96); transition:transform 2s cubic-bezier(.49,.24,.32,.96); transition: transform 2s cubic-bezier(.49,.24,.32,.96), -webkit-transform 2s cubic-bezier(.49,.24,.32,.96);
}
.hold { position:absolute; width:300px; height:300px; clip:rect(0px,200px,200px,100px);
}
.menu { position:absolute; width:300px; height:300px; clip:rect(0px,100px,200px,0px); border-radius:150px;
}
.menu.fill { -webkit-transform:rotate(180deg) !important; transform:rotate(180deg) !important;
}
#home.fan { -webkit-transform:rotate(0deg); transform:rotate(0deg);
}
#home .menu { background-color:#255D74; -webkit-transform:rotate(60deg); transform:rotate(60deg);
}
#about.fan { -webkit-transform:rotate(60deg); transform:rotate(60deg);
}
#about .menu { background-color:#DA353B; -webkit-transform:rotate(60deg); transform:rotate(60deg);
}
#contact.fan { -webkit-transform:rotate(120deg); transform:rotate(120deg);
}
#contact .menu { background-color:#F89F44; -webkit-transform:rotate(60deg); transform:rotate(60deg);
}
#links.fan { -webkit-transform:rotate(180deg); transform:rotate(180deg);
}
#links .menu { background-color:#78302C; -webkit-transform:rotate(60deg); transform:rotate(60deg);
}
#bio.fan { -webkit-transform:rotate(240deg); transform:rotate(240deg);
}
#bio .menu { background-color:#002B55; -webkit-transform:rotate(60deg); transform:rotate(60deg);
}
#store.fan { -webkit-transform:rotate(300deg); transform:rotate(300deg);
}
#store .menu { background-color:#207C6B; -webkit-transform:rotate(60deg); transform:rotate(60deg);
}
a { color: #FFFFFF; left: 122px; position: absolute; top: 10px; font-size:24px;
}
a.contact { left:110px
}
a.bio { left:130px
}
a.store { left:125px;
}
.menu:hover, a:hover { cursor:pointer;
}

PracticeIO Circle Fan Menu - Script Codes JS Codes

$(document).ready(function(){ $('.hold').addClass('fan');
});
PracticeIO Circle Fan Menu - Script Codes
PracticeIO Circle Fan Menu - Script Codes
Home Page Home
Developer James Podles
Username jpod
Uploaded November 23, 2022
Rating 4.5
Size 2,272 Kb
Views 22,264
Do you need developer help for PracticeIO Circle Fan 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!

James Podles (jpod) Script Codes
Name
The Safe of Mystery
Animated Fonts Awesome
JQuery Cousins Method
JQuery Tooltip Plugin
Scrambled City
Stack of Cards
PracticeIO Cello
Envelope Email Form
Photo Grid
Adaptive Text Color
Create amazing SEO content 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!