Cool Future-like Interactive Dropdown
How do I make an cool future-like interactive dropdown?
Future-styled and interactive dropdown by CSS only. Move your mouse over it and its sub-menu, get cool feedback from UI.. What is a cool future-like interactive dropdown? How do you make a cool future-like interactive dropdown? This script and codes were developed by AaronChuo (小狂) on 11 September 2022, Sunday.
Cool Future-like Interactive Dropdown - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cool Future-like Interactive Dropdown</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="scifiUI"> <h1>Scifi Dropdown</h1> <ul> <li>Interactive</li> <li>Animated</li> <li>Scifi-styled</li> <li>Maintainable</li> <li>Scalability</li> <li>Cool</li> <li>Fun</li> </ul>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Cool Future-like Interactive Dropdown - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Rajdhani:300);
html, body { overflow: hidden; background: url(http://aaronchuo.cc/assets/images/ironwall.jpg) #000 top center no-repeat; background-size: 100% 100%; width: 100%; height: 100%; font-family: 'Rajdhani', sans-serif; font-size: 18px; letter-spacing: .1em;
}
.glow, .scifiUI:hover h1, .scifiUI:hover ul li { box-shadow: 0 0 25px #00dcdc, 0 1px 5px #212121; border-color: #00dcdc; background: #00dcdc; color: rgba(33, 33, 33, 0.7);
}
.scifiUI { width: 300px; margin: 100px auto;
}
.scifiUI:hover h1:after { border-top-color: rgba(33, 33, 33, 0.7);
}
.scifiUI:hover ul li { -webkit-transform: skew(0); transform: skew(0); width: 300px; height: 50px;
}
.scifiUI:hover ul li:nth-child(1) { left: 0;
}
.scifiUI:hover ul li:nth-child(2) { left: 0;
}
.scifiUI:hover ul li:nth-child(3) { left: 0;
}
.scifiUI:hover ul li:nth-child(4) { left: 0;
}
.scifiUI:hover ul li:nth-child(5) { left: 0;
}
.scifiUI:hover ul li:nth-child(6) { left: 0;
}
.scifiUI:hover ul li:nth-child(7) { left: 0;
}
.scifiUI * { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
}
.scifiUI h1 { position: relative; display: block; width: 300px; height: 50px; line-height: 50px; border: 1px solid #00bebe; background: rgba(0, 190, 190, 0.2); color: #00bebe; font-size: 1.6em; text-align: center; cursor: pointer;
}
.scifiUI h1:after { content: ''; display: block; position: absolute; top: 20px; right: 15px; border-top: 10px solid #00bebe; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 0;
}
.scifiUI ul { list-style: none; position: relative; top: -20px;
}
.scifiUI ul li { -webkit-transform: skew(45deg) scaleY(-3); transform: skew(45deg) scaleY(-3); box-shadow: 0 3px 0 5px #212121 inset; position: absolute; display: block; width: 200px; height: 50px; line-height: 50px; border: 1px solid #00bebe; background: #00dcdc; text-align: center; font-size: 1.6em; cursor: pointer;
}
.scifiUI ul li:nth-child(1) { top: 0px; left: -500%;
}
.scifiUI ul li:nth-child(2) { top: 50px; left: 500%;
}
.scifiUI ul li:nth-child(3) { top: 100px; left: -500%;
}
.scifiUI ul li:nth-child(4) { top: 150px; left: 500%;
}
.scifiUI ul li:nth-child(5) { top: 200px; left: -500%;
}
.scifiUI ul li:nth-child(6) { top: 250px; left: 500%;
}
.scifiUI ul li:nth-child(7) { top: 300px; left: -500%;
}
.scifiUI ul li:hover { -webkit-transform: scale(1.08); transform: scale(1.08); font-size: 1.8em; z-index: 99;
}
Cool Future-like Interactive Dropdown - Script Codes JS Codes
/* If I use JavaScript, I'll tell you */
/*
Another Scifi UI:
Radio-based Tab - https://codepen.io/aaronchuo/pen/AcvkI
Web Form - https://codepen.io/aaronchuo/pen/adErn
*/
Developer | AaronChuo (小狂) |
Username | aaronchuo |
Uploaded | September 11, 2022 |
Rating | 4.5 |
Size | 3,692 Kb |
Views | 22,264 |
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 |
Apple Watch Bubble-like UI | 3,765 Kb |
The Rocket | 2,651 Kb |
Scifi-style Radio-based Tab | 4,427 Kb |
Fly to Future | 4,940 Kb |
Animated Ability Chart | 4,994 Kb |
I drink and I know things | 2,218 Kb |
The Heart | 2,405 Kb |
Poached Egg by pure CSS | 3,161 Kb |
Scifi-style Interative Form | 4,566 Kb |
Gradient Color Spin | 2,986 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 |
A form arranged using automatic placement. | Vikasford | 2,103 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Loading animation | Codeams | 2,408 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
Sticky div | Kaslab | 2,225 Kb |
Find The Penguin | Lelder | 2,212 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!