CSS로만 미끄러져 나오는 메뉴 만들기

날마다 조금씩 블로그 살결을 바꾸고 있다. 오늘은 옆에서 미끄러져 나오는 메뉴 만들기를 소개한다. 수업 시간에 쓸 목적으로 만든 블로그라 목록이 많다. 사이드바가 길어지는 것이 맘에 들지 않아 카테고리만 따로 뗴어내 감춰두고 필요할 때 보이게 하고 싶어졌다. 찾아보니 자바스크립트(javascript)나 제이쿼리(jquery)로 만든 것이 많다. 아무래도 씨에스에스(CSS)로만 만든 것이 맘에 들어서 골랐다.

 

먼저 skin.html파일 윗부분에 아래와 같은 태그를 넣고 style.css파일에 이어지는 코드를 넣어서 완성하였다. 나름대로 보기 좋다.

     <div id=check-menu>
     <input id="toggle" type="checkbox"><label for="toggle">&equiv;</label>
      <div class="slide-menu">
         <nav id="category">
         

• 전체 (1521)
  • 수학이야기 (665)
    • 중학수학1 (30)
    • 중학수학2 (32)
    • 중학수학3 (47)
    • 고등수학 (10)
    • 미적분 (63)
    • 기하벡터 (63)
    • 확률통계 (27)
    • 면접논술 (29)
    • 유클리드원론 (22)
    • Calculus (105)
    • 수학능력시험 (15)
    • 수학자 (21)
  • 사는이야기 (856)
    • 여행음식 (176)
    • 레고 (40)
    • 들꽃 (219)

    
           </nav>
        </div> 
      </div>

 

 

/* ---------------------------------------------- */
/* menu*/
/* --------------------------------------------- */
input[type=checkbox] {
   position: absolute;
   opacity: 0;
}
label {
   position: fixed;
   top: 20px;
   left: 10px;
   z-index: 1;
   display: block;
   font-size:2em;
   color: #444;
   cursor: pointer;
   transform: translate3d(0, 0, 0);
   transition: transform .4s;
}
input[type=checkbox]:checked ~ label {
   transform: translate3d(250px, 0, 0) rotate(90deg);
}
.check-menu {
   width:100%;
   padding: 40px;
   background: #f2f2f2;
   transform: translate3d(0, 0, 0);
   transition: transform .4s;
}
input[type=checkbox]:checked ~ .content {
   transform: translate3d(250px, 0, 0);
}
input[type=checkbox]:checked ~ .slide-menu {
   transform: translate3d(0, 0, 0);
}
input[type=checkbox]:checked ~ .slide-menu .menu li {
   width: 100%;
}
.slide-menu {
   background-color: #f9f9f9;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   transform: translate3d(-250px, 0, 0);
   position: absolute;
   width: 250px;
   color: #ddd;
   left: 0;
   height: 100%;
   transition: all .4s;
  z-index:100;
}
.slide-menu ul li{
  margin-top:10px;
}
.slide-menu h1 {
 font:0.8em daum;
 color:#999;
  margin: 10px;
 }
.menu {
   list-style: none;
   padding: 0;
   margin: 0;
}
.menu a {
   display: block;
   text-decoration: none;
   color: #fff;
   font-size: 0.9em;
   padding: 15px;
}

The above code will result in the menu sliding in from the left hand side of the page, if however you would prefer the menu on the right hand side of the page, just change the following code.

label {
   right: 40px;
}
input[type=checkbox]:checked ~ label {
   transform: translate3d(250px, 0, 0) rotate(90deg);
}
input[type=checkbox]:checked ~ .content {
   transform: translate3d(250px, 0, 0);
}
.slide-menu {
   transform: translate3d(-250px, 0, 0);
   right: 0;
}

 

transform을 잘 활용하면 근사한 일을 할 수 있을 것 같다. 그림이나 글씨가 90도 회전하는 것이 신기하다. 이러다 자바스립트는 별로 쓸 일이 없어지지 않을까 여겨진다. 혹시나 이 블로그 스킨을 쓰고 싶다면 맨 아래 연결고리를 따라 가시라...

/* ------------------------------------------------- */
/* 카테고리 */
/* ------------------------------------------------- */
#category ul {
  font : 0.9em daum, malgun gothic, verdana;
 font-weight:bold;
  padding:6px 10px;
}
#category li {padding:3px 0px;
 margin-left:5px;
  list-style:none;
}
#category li:before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 5px;
    color: #999; /* Or a color you prefer */
}

#category a:hover { color:#027878; text-decoration:none;}
/*2depth*/
#category ul li ul li  { padding:3px 10px;
 list-style:none;
}

#category ul li ul li a {
 list-style:square;}

/*3depth*/
#category ul li ul li ul li { padding:3px 10px;
 font-weight:normal;
 border-bottom:1px dotted #ddd;
 list-style:none;
}
#category ul li ul li ul li a {
 list-style:square;}