SloZiga SloZiga - 2 months ago 18
CSS Question

Pure CSS on click footer slides from bottom up, click does not stay active

I'm trying to make a full width clickable bar on the fixed bottom page when on click the box would slide from the bottom (previously hidden) up.

I have made the sliding and the bar but when I click on the bar I have to press and hold the button to stay up how do I make it on click to stay active and then click anywhere out ow that bar and box it would go back down.

If at all possible to do with pure CSS.



#slideout p {
text-align:center;
}
#slideout {
position:fixed;
bottom: 0px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
width:100%;
background:#555;
height:60px;
}
#slideout_inner {
bottom:-100px;
position: fixed;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
background:#333;
color:#fff;
}
#slideout:active{
bottom: 300px;
}

#slideout:active #slideout_inner {
bottom: 150px;
position:fixed;
}

<div id="slideout">
<p>TEXT</p>
<div id="slideout_inner">
[form code goes here]
</div>
</div>




Answer

In pure CSS, you can do it using radio button/checkbox and their corresponding layout to work like a click.

  1. Use a hidden checkbox and #slideout as its label.

  2. Replace your active style to these:

    input[type=checkbox] {
      display: none;
    }
    input[type=checkbox]:checked + label#slideout {
      bottom: 300px;
    }
    input[type=checkbox]:checked + label div#slideout_inner {
      bottom: 150px;
      position: fixed;
    }
    

See example below:

#slideout p {
  text-align: center;
}
#slideout {
  position: fixed;
  bottom: 0px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  width: 100%;
  background: #555;
  height: 60px;
}
#slideout_inner {
  bottom: -100px;
  position: fixed;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background: #333;
  color: #fff;
}
/*
#slideout:active{
  bottom: 300px;
}

#slideout:active #slideout_inner {
  bottom: 150px;
    position:fixed;
}
*/

input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked + label#slideout {
  bottom: 300px;
}
input[type=checkbox]:checked + label div#slideout_inner {
  bottom: 150px;
  position: fixed;
}
<input type="checkbox" id="slideout_checkbox" />
<label id="slideout" for="slideout_checkbox">
  <p>TEXT</p>
  <div id="slideout_inner">
    [form code goes here]
  </div>
</label>

Let me know your feedback on this. Thanks!