Bootstrap Snippet creative drop down using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
*{
  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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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");
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"creative drop down"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"creative drop down" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"creative drop down"
Bootstrap 4.1.1 Snippet by koshikojha