May 5, 2015

Slide in and slide out box

Slide in and slide out box

I where trying out to put my social plugins to a container and make it fixed at the bottom. But this is not a good user experience. So i figured out a way.

As a good user experience i tried to collapse/hide the container. This can be done easily using jQuery/JavaScript. But i don't want to use jQuery/JavaScript. I wanted to do this using CSS alone and finally i have done it. I used checkbox which gives you two options, checked and not checked. If the checkbox is checked the container gets hidden, if it is unchecked the container gets visible.

HTML

<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"></label>

<div class="message">
  <h1>Hello, Content goes here...</h1>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Sans-serif;
  word-spacing: -2px;
}

.message {
  background: #181818;
  color: #FFF;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  padding: 20px;
  transition: bottom 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
  overflow: hidden;
  box-sizing: border-box;
}

#toggle {
  position: fixed;
  appearance: none;
  cursor: pointer;
  left: -100%;
  bottom: -100%;
}

#toggle + label {
  position: fixed;
  bottom: 250px;
  right: 20px;
  cursor: pointer;
  padding: 10px;
  background: #181818;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  width: 18px;
  color: #FFF;
  font-size: 16px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;  
  transition: all 500ms ease;
  transition: bottom 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

#toggle + label:after {
  content: "\f00d";
  font-family:FontAwesome;
}

#toggle:checked ~ .message {
  bottom: -250px;
}

#toggle:checked + label {
  bottom: 0;
}

#toggle:checked + label:after {
  content: "\f077";
  font-family:FontAwesome;
}

Attachments:

I have used external attachments.

//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
demo

No comments:

Post a Comment

Popular Posts

Views