CSS - Circular drop menu

Developer
Oloman
Size
2,590 Kb
Views
38,456
  1. CSS - Circular drop menu Previews
  2. CSS - Circular drop menu HTML Codes
  3. CSS - Circular drop menu CSS Codes

How do I make an css - circular drop menu?

Menu with circle shape that appears when you hover it. What is a css - circular drop menu? How do you make a css - circular drop menu? This script and codes were developed by Oloman on 22 August 2022, Monday.

CSS - Circular drop menu Previews
IQ Test

CSS - Circular drop menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS - Circular drop menu</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
ul.abanico { position: relative; width: 500px; margin: 50px auto; height: 120px; overflow: hidden; list-style: none; font: normal 12px "arial narrow", sans-serif;
}
ul.abanico li { position: absolute; bottom: 0; left: 50%; width: 88px; height: 300px; margin-left: -44px; line-height: 300px; text-align: center; box-sizing: border-box; -moz-transform-origin: top center; -webkit-transform-origin: top center; transform-origin: top center; -moz-transition: all .6s ; -webkit-transition: all .6s ; transition: all .6s ;
}
ul.abanico li a { display: inline-block; width: 100%; height: 48px; text-decoration: none; background: blue; color: white; line-height: 40px; vertical-align: bottom; border: 4px solid #ddd; border-radius: 30px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: all .6s ; -webkit-transition: all .6s ; transition: all .6s ;
}
ul.abanico:hover li a { background: purple;
}
ul.abanico:hover li { opacity: 1;
}
ul.abanico:hover li:nth-of-type(6) { opacity: 0;
}
ul.abanico:hover li:nth-of-type(1) { -moz-transform: rotate(36deg); -webkit-transform: rotate(36deg); transform: rotate(36deg);
}
ul.abanico:hover li:nth-of-type(2) { -moz-transform: rotate(18deg); -webkit-transform: rotate(18deg); transform: rotate(18deg);
}
ul.abanico:hover li:nth-of-type(3) { -moz-transform: rotate(-18deg); -webkit-transform: rotate(-18deg); transform: rotate(-18deg);
}
ul.abanico:hover li:nth-of-type(4) { -moz-transform: rotate(-36deg); -webkit-transform: rotate(-36deg); transform: rotate(-36deg);
}
ul.abanico:hover li:nth-of-type(5) { z-index: 1; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="abanico"> <li><a href="">INICIO</a></li> <li><a href="">TRABAJOS</a></li> <li><a href="">REFERENCIAS</a></li> <li><a href="">CONTACTO</a></li> <li><a href="">ACERCA DE</a></li> <li><a href="javascript:void();">MENU</a></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS - Circular drop menu - Script Codes CSS Codes

ul.abanico { position: relative; width: 500px; margin: 50px auto; height: 120px; overflow: hidden; list-style: none; font: normal 12px "arial narrow", sans-serif;
}
ul.abanico li { position: absolute; bottom: 0; left: 50%; width: 88px; height: 300px; margin-left: -44px; line-height: 300px; text-align: center; box-sizing: border-box; -moz-transform-origin: top center; -webkit-transform-origin: top center; transform-origin: top center; -moz-transition: all .6s ; -webkit-transition: all .6s ; transition: all .6s ;
}
ul.abanico li a { display: inline-block; width: 100%; height: 48px; text-decoration: none; background: blue; color: white; line-height: 40px; vertical-align: bottom; border: 4px solid #ddd; border-radius: 30px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: all .6s ; -webkit-transition: all .6s ; transition: all .6s ;
}
ul.abanico:hover li a { background: purple;
}
ul.abanico:hover li { opacity: 1;
}
ul.abanico:hover li:nth-of-type(6) { opacity: 0;
}
ul.abanico:hover li:nth-of-type(1) { -moz-transform: rotate(36deg); -webkit-transform: rotate(36deg); transform: rotate(36deg);
}
ul.abanico:hover li:nth-of-type(2) { -moz-transform: rotate(18deg); -webkit-transform: rotate(18deg); transform: rotate(18deg);
}
ul.abanico:hover li:nth-of-type(3) { -moz-transform: rotate(-18deg); -webkit-transform: rotate(-18deg); transform: rotate(-18deg);
}
ul.abanico:hover li:nth-of-type(4) { -moz-transform: rotate(-36deg); -webkit-transform: rotate(-36deg); transform: rotate(-36deg);
}
ul.abanico:hover li:nth-of-type(5) { z-index: 1; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);
}
CSS - Circular drop menu - Script Codes
CSS - Circular drop menu - Script Codes
Home Page Home
Developer Oloman
Username oloman
Uploaded August 22, 2022
Rating 3
Size 2,590 Kb
Views 38,456
Do you need developer help for CSS - Circular drop 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!

Oloman (oloman) Script Codes
Name
CSS - Colorful fan menu
Book 3D
Before-After TwentyTwenty jQuery plugin
Scotch tape css effect
Responsive video loader
CSS Drop cards Social buttons
CSS responsive football pitch
CSS Responsive accordion social buttons
Testing. Backup feed main data
Simplest RWD jQuery slider
Create amazing Facebook ads 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!