"creative drop down"
Bootstrap 4.1.1 Snippet by koshikojha

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div class="drop-down"> <div class="one"> <span>Do you know</span> <div></div> </div> <div class="two"> <span>In this huge, big universe</span> <span>Unlike apps</span> </div> <div class="three"> <span>There is only</span> </div> <section> <p>ONE VERSION OF YOU THAT EXIST.</p> </section> </div> <div class="pull-down"> <span class="pull"></span> <div class="curve"> <span></span> <span></span> </div> <span class="text">Feeling down? Click Me!!!</span> </div> </body>
*{ box-sizing:border-box; font-family:arial; } html, body{ position:absolute; width:100%; height:100%; margin:0; padding:0; overflow:hidden; background:skyblue; } .drop-down{ width:100%; height:0%; overflow:hidden; background-color:#444; border-bottom:10px solid dimgray; position:relative; display:flex; justify-content:center; align-items:center; transition:height 1s ease-in; } .drop-down section{ width:100%; height:100%; position:absolute; display:flex; justify-content:center; align-items:center; } section p{ text-align:center; padding:10px; border:5px solid #eee; font-weight:bold; font-size:18px; color:#fff; opacity:0; } @keyframes fade{ from{opacity:0;} to{opacity:1} } .fade{ animation:fade 1s 11s ease-in both; } .one, .two, .three{ width:200px; height:200px; position:relative; z-index:1; flex:0 1 200px; margin:0px 5px; font-weight:bold; font-size:18px; color:#fff; box-shadow:1px 1px 5px 1px #222; transform:translateY(250%); display:flex; flex-flow:column; justify-content:center; align-items:center; } .drop-down div > span{ padding:4px; text-align:center; } @keyframes slide-up{ from{transform:translateY(250%);} to{transform:translateY(0%);} } .classforone{animation:slide-up 1s 1s both ease-in, slide-up 1s 9s ease-out reverse forwards;} .classfortwo{animation:slide-up 1s 2s both ease-in, slide-up 1s 10s ease-out reverse forwards;} .classforthree{animation:slide-up 1s 3s both ease-in, slide-up 1s 8s ease-out reverse forwards;} .one{ width:200px; background-color:#F44336; } .two{ width:200px; background-color:#E91E63; justify-content:space-around; } .three{ width:200px; background-color:#9C27B0; } .pull-down{ position:absolute; right:0; width:160px; height:110px; } .pull-down span{ display:block; } .pull{ width:10px; height:90px; background-color:#eee; margin: 0 auto; position:relative; z-index:1; animation:stretch 2s cubic-bezier(0.35, 0.05, 0.61, 1.04) infinite both .5s; cursor:pointer; } .curve{ width:50px; height:50px; border-radius:50px; background-color:#eee; position:relative; top:-26px; left:35px; cursor:pointer; } @keyframes stretch{ 0%{height:90px;} 25%{height:110px;} 50%{height:60px;} 75%{height:100%;} 100%{height:90px;} } .curve span:nth-child(1){ width:30px; height:30px; border-radius:50%; background-color:skyblue; position:relative; top:10px; left:10px; right:10px; bottom:10px; } .curve span:nth-child(2){ width:50px; height:50px; background-color:skyblue; display:block; position:absolute; top:-25px; left:0; } .text{ font-size:15px; font-weight:bold; color:brown; margin-right:10px; margin-top:10px; position:relative; top:-20px; text-align:center; cursor:pointer; }
var pull = document.querySelector("span.pull"); var curve = document.querySelector("div.curve"); var text = document.querySelector("span.text"); var drop_down = document.querySelector("div.drop-down"); var section = document.querySelector("section"); var section_p = section.querySelector("p"); var drop_down_kids = Array.from(document.querySelectorAll(".drop-down > div")); pull.addEventListener("click", function(){ pullDown(); }); curve.addEventListener("click", function(){ pullDown(); }); text.addEventListener("click", function(){ pullDown(); }); section.addEventListener("click", function(){ drop_down.style.height = "0%"; //Remove animation classes from children and the other drop_down_kids[0].classList.remove("classforone"); drop_down_kids[1].classList.remove("classfortwo"); drop_down_kids[2].classList.remove("classforthree"); section_p.classList.remove("fade"); }); function pullDown(){ drop_down.style.height = "100%"; //Add animation classes to children and the other drop_down_kids[0].classList.add("classforone"); drop_down_kids[1].classList.add("classfortwo"); drop_down_kids[2].classList.add("classforthree"); section_p.classList.add("fade"); }

Related: See More


Questions / Comments: