스크롤 시 색이 변하는 고정 메뉴

---

▒ 스크롤 시 색이 변하는 고정 메뉴

메뉴는 상단에 계속 고정되며 스크롤 시 색과 크기가 부드럽게 변한다.

 

 

스크롤 전

스크롤 후

 

 

- 사용방법은 아래와 같다.

<!--css-->

  <style>
  .header {
      position:fixed;
      top:0;
      left:0;
      width:100%;
      background:rgba(0,0,0,0.5); /*스크롤 전 헤더 배경색*/
      z-index:1000;
      height:100px; /*메뉴영역 세로사이즈*/
      overflow:hidden;
      line-height:100px;
      -webkit-transition: height 0.3s;
      -moz-transition: height 0.3s;
      transition: height 0.3s;
    }
      
  .header.roll {
    height: 85px;  /*스크롤 후 헤더 사이즈(세로)*/
    line-height:85px;
    background : rgba(242, 109, 125, 0.65); /*스크롤 후 헤더 배경색*/
  }

  .header .navi {
    width:1200px; /*메뉴영역 가로사이즈*/
    margin:0 auto;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  
  .header.roll .navi {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }

  .header h1 {float:left;} /* 로고 */
  .navi ul{margin:0 auto;padding:0;list-style:none;}
  .navi ul li{float:left;font-size:17px;font-weight:bold;}
  .navi ul li a  {color:#fff;height:105px;display:block;padding:0 35px;} /*스크롤 전*/
  .header .roll .navi ul li a  {height: 85px;} /* 스크롤 후*/
  
  </style>
  
  
  
  <!--메뉴-->
<div class="header">
  <div class="navi">
    <h1><a href=""><img src="" alt="로고"></a></h1>
    <ul>
      <li><a href="">메뉴1</a></li>
      <li><a href="">메뉴2</a></li>
      <li><a href="">메뉴3</a></li>
    </ul>
  </div>
</div>
  

 

CSS와 메뉴쪽만 자신의 디자인에 맞게 컬러 와 크기를 변경하면 된다.

전체 소스는 첨부파일을 다운받는다.

---

| 예제소스

soharu.html

0.00MB