footer slide up - footer 바닥에 고정 방법

footer slide up - footer 바닥에 고정 방법

QA

footer slide up - footer 바닥에 고정 방법

본문

http://cssdeck.com/labs/u7yjabp9

연결된 사이트는 footer가 버튼을 클릭하면 슬아이드 다운/업 되는데요...
처음으로 페이지에 들어가면 슬라이드업 되어있는 상태입니다.
 
혹시 처음으로 페이지에 들어가면 슬라이드를 다운 상태로 만들 수 있을까요???
도와주세요.

이 질문에 댓글 쓰기 :

답변 2

<style>
*{ margin: 0; padding: 0; }

#footer {
  bottom: 0;
  position: fixed;
  z-index:999;
 
  width:100%;
  height:200px;
  background-color:#3498db;
  display: none;
  animation: slideUp 1s;
  -webkit-animation: slideUp 1s;
  overflow: hidden;
}

#footer ul {  width:90%; margin:25px auto; }

#footer ul li {
  margin-right: 5%;
  list-style: none;
  width: 45%;
  float: left;
  text-align: justify;
  color: rgba(0, 0, 0, .7);
}

#footer ul li p { font-size: 13px; }

.last-child{margin-right: 0;}

.btn {
  width: 30px;
  height: 30px;
  bottom: 200px;
  right: 10px;
  position: fixed;
  display: block;
   
  background: #2c3e50;
  border-radius: 5px 5px 0 0;
  z-index: 9999;
  color: white;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  font-size: 20px;
  cursor: pointer;
 
  -webkit-user-select: none;
  -moz-user-select: none;
   user-select: none;
}
.btn:hover {background: #34495e;}
.btn:before {
  content: "+";
}

.btn-read {
  float: right;
  margin-top: 10px;
  padding: 2px 10px;
  right: 10px;
  z-index: 9999;
 
  background: #2ecc71;
  border-radius: 5px;
  box-shadow:inset 0 -2px 0 rgba(0, 0, 0, .2);
  border: 1px solid rgba(0, 0, 0, .25);
  color: rgba(255, 255, 255, .9);
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  font-size: 14px;
  cursor: pointer;
 
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* Show Footer */
input[type=checkbox]:checked ~ #footer {
     display: block;
}

/* Change Icon */
input[type=checkbox]:checked ~ .btn:before {
    content: "x";
}

/* Slide Button */
input[type=checkbox]:not(:checked) ~ .btn {
     bottom: 0px;
    -webkit-animation: slideUpBtn 1s;
}

/* Hack Checkbox */
.toogle-hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
   visibility: hidden;
}

/* Animate Footer and Button */
@-webkit-keyframes slideUpBtn {
  from {bottom: 200px;}
  to {bottom: 0px;}
}

@-webkit-keyframes slideUp {
  from {bottom: -200px;}
  to {bottom: 0px;} 
}

#lorem-bg {width:500px;text-align:justify; margin:100px auto;}
</style>


제가 수정을 해 보았는데 익스11에서는 정상적으로 작동합니다. 다른것으로는 확인 안 해 봐서 정확히 되는지는 모르겠습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 126,626 | RSS
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT