Window Blinds Dropdown

Developer
Size
5,327 Kb
Views
8,096

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 Previews

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); }
});
Window Blinds Dropdown - Script Codes
Window Blinds Dropdown - Script Codes
Home Page Home
Developer Bryan
Username Brydave
Uploaded November 29, 2022
Rating 3
Size 5,327 Kb
Views 8,096
Do you need developer help for Window Blinds 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!

Bryan (Brydave) Script Codes
Create amazing sales emails 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!