Cool Future-like Interactive Dropdown

Size
3,692 Kb
Views
22,264

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 Previews

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
*/
Cool Future-like Interactive Dropdown - Script Codes
Cool Future-like Interactive Dropdown - Script Codes
Home Page Home
Developer AaronChuo (小狂)
Username aaronchuo
Uploaded September 11, 2022
Rating 4.5
Size 3,692 Kb
Views 22,264
Do you need developer help for Cool Future-like Interactive Dropdown?

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!

AaronChuo (小狂) (aaronchuo) Script Codes
Create amazing web 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!