Window Blinds Dropdown
How do I make an window blinds dropdown?
An animated folding dropdown list using jQuery and CSS transitions. This was my first real foray into creating my own interactions with jQuery. I had some trouble setting the timeout function within the toggle function, then discovered I had to remove it so "i" would be copied and stored, rather than animated all at once.. What is a window blinds dropdown? How do you make a window blinds dropdown? This script and codes were developed by Bryan on 29 November 2022, Tuesday.
Window Blinds Dropdown - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Window Blinds Dropdown</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main"> <!-- wrapper that contains the number & .notifications --> <div class="link-wrapper" id="toggle"> <div class="linkcontainer"> <div class="wrapper"> <!-- this contains the notification number --><a class="click"><span class="number">3</span> <div class="plus">+</div></a><span class="arrow"></span> </div> </div> <div class="notification">Notifications.</div> </div> <!-- this contains the dropdown--> <div class="blinds clearfix"> <!-- you can add as many children as you want to your lists, just add the ".closed" class. --> <p class="closed one">New Notifications</p> <p class="closed"><span>1</span> New Message(s)</p> <p class="closed"><span>1</span> New Event Updates</p> <p class="closed"><span>1</span> Update Available</p> </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>
Window Blinds Dropdown - Script Codes CSS Codes
html { background: #e1e1e1;
}
.main { min-width: 100%; height: 100%;
}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;
}
.notification { display: inline-block; font-family: "Helvetica", helvetica, sans-serif; background: #FFF; padding: 11px; -webkit-top-right-border-radius: 3px; -moz-top-right-border-radius: 3px; -webkit-bottom-right-border-radius: 3px; -moz-bottom-right-border-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; cursor: pointer;
}
.link-wrapper { margin: 100px auto 0 auto; width: 155px;
}
.linkcontainer { background: #005f64; -webkit-top-left-border-radius: 3px; -moz-top-left-border-radius: 3px; -webkit-bottom-left-border-radius: 3px; -moz-bottom-left-border-radius: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border: #005f64; display: inline-block; height: 40px; width: 40px; -webkit-transition: all .2s ease-in-out; float: left; margin: 0 auto;
}
.linkcontainer:hover, .linkcontainer-hover { background: #2aa997; border: #2aa997;
}
span.arrow { position: absolute; top: 100%; left: 15px; border-top: 0px solid #005f64; border-left: 5px solid transparent; border-right: 5px solid transparent; -webkit-transition: all .1s ease-in-out; -webkit-transform: translateX(180deg); -webkit-transform-origin: top; -webkit-backface-visibility: hidden;
}
.linkcontainer:hover span.arrow { position: absolute; top: 100%; left: 15px; border-top: 5px solid #2aa997; border-left: 5px solid transparent; border-right: 5px solid transparent; -webkit-transform: translateX(0deg); -webkit-transform: border-top-color; -webkit-transform-origin: top;
}
.wrapper { height: 40px; overflow: hidden; width: 40px;
}
a { color: #ffffff; display: block; font-family: helvetica; font-weight: bold; height: 40px; margin: 0; position: relative; padding: 12px 0 0px 15px; text-decoration: none; width: 200px; transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); -webkit-transition: -webkit-transform .1s ease-in; -moz-transition: -moz-transform .1s ease-in; -o-transition: -o-transform .1s ease-in; transition: transform .1s ease-in; cursor: pointer;
}
span.number { color: #ffffff; margin-right: 80px; width: 20px;
}
.plus { color: #ffffff; width: auto; position: relative; right: 4px; bottom: 1px; display: inline-block; transition: all .3s; transform-origin: center;
}
.plus.rotate { -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ transform: rotate(45deg);
}
a:hover, .link-hover { transform: translateX(-89px); -ms-transform: translateX(-89px); -webkit-transform: translateX(-89px); -webkit-transition: -webkit-transform .1s ease-in; -moz-transition: -moz-transform .1s ease-in; -o-transition: -o-transform .1s ease-in; transition: transform .1s ease-in;
}
.blinds { margin: 25px auto; width: 250px; perspective: 1000px;
}
h1 { padding: 20px; background: #FFF; font-size: 20px; font-family: "helvetica" helvetica, sans-serif;
}
p { transform: rotateX(-95deg); transform-origin: top; height: 0; display: block; transition: all .2s; color: transparent; background: transparent;
}
p span { color: #FFF; background: #c1c1c1; border-radius: 50%; font-weight: bold; font-size: .9em; margin-right: 5px; display: inline-block; padding: 4px 7.5px; width: 23px; height: 23px; background: transparent; color: transparent;
}
p.one { text-transform: uppercase;
}
p.one:before { content: ""; display: block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; top: -10px; left: 55px;
}
.closed { padding: 0 20px; background: #999;
}
.open { transform: rotateX(0); padding: 20px; display: block; height: auto; color: #000; background: #FFF; background: #FFF; font-family: "helvetica" helvetica, sans-serif; border-bottom: 1px solid #f2f2f2; position: relative;
}
.open.one:before { border-bottom: 10px solid white;
}
.open span { background: #c1c1c1; color: #fff;
}
Window Blinds Dropdown - Script Codes JS Codes
var kids = [];
// push all the children of .blinds into the array
$(".blinds").children().each(function() { kids.push(this);
});
// delay the foldering on dropdown to create the "blinds" effect
function foldDelay(i) { setTimeout(function() { $(kids).eq(i).toggleClass("open"); }, i * 100);
}
// when hovering over the .notification div, toggle the hoverstate for the number indicator
$(".notification").hover(function() { $(".linkcontainer").toggleClass("linkcontainer-hover"); $(".click").toggleClass("link-hover");
});
$("#toggle").click(function() {
// toggle the hoverstate for the number indicator $(".linkcontainer").addClass("linkcontainer-hover"); $(".click").addClass("link-hover"); $(".plus").toggleClass("rotate");
// iterate through the array. Use the foldDelay function to open them consecutively instead of all at once. for (i = 0; i < kids.length; i++) { foldDelay(i); }
});
Developer | Bryan |
Username | Brydave |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 5,327 Kb |
Views | 8,096 |
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 |
A Pen by Bryan | 2,286 Kb |
CSS Animated Hamburger Icon | 2,657 Kb |
Contact Card | 6,033 Kb |
JQuery Slider Practice | 2,848 Kb |
Dollar Amount Input UI Test | 3,298 Kb |
Everyone, just calm down... | 3,704 Kb |
Dollar Amount Input UI Test - Firefox Compatibility | 3,337 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 |
Import shader in three.js | Khangeldy | 2,636 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
Reading Grid | Tappily | 4,306 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Fluid Grid 12 | Alexoliverwd | 2,309 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!