CODEWITHSUNDEEP
jquerycss
logic ltd
logic ltd

Reputation: 65

How to create a bottom toggle bar?

I have created this drawer but I don't know how to move it in the bottom-right corner and when you open it the content to come from bottom.

http://jsfiddle.net/d150x4w1/

html {
  text-align: center;
  margin: 0;
}

.button {
  background-color: #a11544;
  width: 150px;
  height: 45px;
  float: right;
  -moz-border-radius-topleft: 25px 25px;
  -moz-border-radius-topright: 25px 25px;
  border-top-left-radius: 25px 25px;
  border-top-right-radius: 25px 25px;
  color:#fff;
  text-align: center;
}

.drawer-inside {
  height: 0;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  transition: height .4s ease;
  background: #c3c3c3;
}
.drawer-inside.openup {
  height: 210px;
  transition: height .7s ease;
}

Upvotes: 0

Views: 336

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196026

Move the button to the top (in the html)

Add the following css rules

.drawer {
    position:fixed;
    bottom:0;
    right:0;
    width:100%;
}
.drawer-appear{clear:both;}

Demo at http://jsfiddle.net/j5xoe8xg/

Upvotes: 1

pregunta
pregunta

Reputation: 138

just try the following and add it to the .button:

bottom:0px;
right:0px;
position:fixed;
overflow:hidden;

And the following to .drawer:

bottom:0px;
width:100%;
position:fixed; }

That should solve your problem.

Upvotes: 1

Related Questions