휴대폰에서 토글버튼 클릭시 나타나는 메뉴.

반응형 스킨 #1이 컴퓨터에서 보여지는 메뉴들이 휴대폰에서는 나타나지 않아 휴대폰 화면에서도 보여지게 만들었다.

 

스킨 #1에서 토글버튼을 누르면 카테고리 리스트만 나타나지만 지금은 최근 글과 최근 댓글, 관리자 메뉴, 날짜, 방문객이 나타나도록 했다.

 

HTML

<div class="list_cate"> <h4><i class="fa fa-folder-open"></i>  카테고리</h4> <ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 <span class="c_cnt">(293)</span> </a> <ul class="category_list"><li class=""><a href="/category/%ED%95%98%EB%A3%A8%2C%20%EB%98%90%20%ED%95%98%EB%A3%A8" class="link_item"> 하루, 또 하루 <span class="c_cnt">(101)</span> </a> <ul class="sub_category_list"><li class=""><a href="/category/%ED%95%98%EB%A3%A8%2C%20%EB%98%90%20%ED%95%98%EB%A3%A8/%EC%98%A4%EB%8A%98%EC%9D%80..." class="link_sub_item"> 오늘은... <span class="c_cnt">(75)</span> </a></li> <li class=""><a href="/category/%ED%95%98%EB%A3%A8%2C%20%EB%98%90%20%ED%95%98%EB%A3%A8/%EC%97%AC%EB%B0%B1%EC%9D%B4%20%EC%9E%88%EB%8A%94%20%ED%95%98%EB%A3%A8" class="link_sub_item"> 여백이 있는 하루 <span class="c_cnt">(18)</span> </a></li> <li class=""><a href="/category/%ED%95%98%EB%A3%A8%2C%20%EB%98%90%20%ED%95%98%EB%A3%A8/%20%EA%B6%81%EC%8B%9C%EB%A0%81" class="link_sub_item"> 궁시렁 <span class="c_cnt">(8)</span> </a></li> </ul> </li> <li class=""><a href="/category/%EB%96%A0%EB%82%98%EC%9E%90" class="link_item"> 떠나자 <span class="c_cnt">(102)</span> </a> <ul class="sub_category_list"><li class=""><a href="/category/%EB%96%A0%EB%82%98%EC%9E%90/%EC%BA%A0%ED%95%91" class="link_sub_item"> 캠핑 <span class="c_cnt">(23)</span> </a></li> <li class=""><a href="/category/%EB%96%A0%EB%82%98%EC%9E%90/%EA%B5%AD%EB%82%B4" class="link_sub_item"> 국내 <span class="c_cnt">(46)</span> </a></li> <li class=""><a href="/category/%EB%96%A0%EB%82%98%EC%9E%90/%EC%99%B8%EA%B5%AD" class="link_sub_item"> 외국 <span class="c_cnt">(33)</span> </a></li> </ul> </li> <li class=""><a href="/category/%EB%B0%B0%EC%9B%80%ED%84%B0_%ED%95%99%EA%B5%90" class="link_item"> 배움터_학교 <span class="c_cnt">(10)</span> </a> <ul class="sub_category_list"><li class=""><a href="/category/%EB%B0%B0%EC%9B%80%ED%84%B0_%ED%95%99%EA%B5%90/%EC%9E%90%EC%9D%80%EC%B4%88%EB%93%B1%ED%95%99%EA%B5%90" class="link_sub_item"> 자은초등학교 <span class="c_cnt">(3)</span> </a></li> <li class=""><a href="/category/%EB%B0%B0%EC%9B%80%ED%84%B0_%ED%95%99%EA%B5%90/%EB%82%A8%EC%A4%91%ED%95%99%EA%B5%90" class="link_sub_item"> 남중학교 <span class="c_cnt">(2)</span> </a></li> <li class=""><a href="/category/%EB%B0%B0%EC%9B%80%ED%84%B0_%ED%95%99%EA%B5%90/%ED%83%9C%EA%B6%8C%EB%8F%84" class="link_sub_item"> 태권도 <span class="c_cnt">(3)</span> </a></li> <li class=""><a href="/category/%EB%B0%B0%EC%9B%80%ED%84%B0_%ED%95%99%EA%B5%90/%EC%82%AC%ED%9A%8C%ED%99%9C%EB%8F%99" class="link_sub_item"> 사회활동 <span class="c_cnt">(2)</span> </a></li> </ul> </li> <li class=""><a href="/category/%EB%B0%B0%EC%9B%80%ED%84%B0_%EC%9D%BC%EB%B0%98" class="link_item"> 배움터_일반 <span class="c_cnt">(54)</span> </a> <ul class="sub_category_list"><li class=""><a href="/category/%EB%B0%B0%EC%9B%80%ED%84%B0_%EC%9D%BC%EB%B0%98/TIStory" class="link_sub_item"> TIStory <span class="c_cnt">(22)</span> </a></li> <li class=""><a href="/category/%EB%B0%B0%EC%9B%80%ED%84%B0_%EC%9D%BC%EB%B0%98/PC%2C%20Program..." class="link_sub_item"> PC, Program... <span class="c_cnt">(3)</span> </a></li> <li class=""><a href="/category/%EB%B0%B0%EC%9B%80%ED%84%B0_%EC%9D%BC%EB%B0%98/%EC%83%9D%ED%99%9C%EC%9D%98%20%20%EC%A7%80%ED%98%9C" class="link_sub_item"> 생활의 지혜 <span class="c_cnt">(3)</span> </a></li> <li class=""><a href="/category/%EB%B0%B0%EC%9B%80%ED%84%B0_%EC%9D%BC%EB%B0%98/%EA%B0%80%EC%A1%B1%20%EA%B4%80%EA%B3%84" class="link_sub_item"> 가족 관계 <span class="c_cnt">(3)</span> </a></li> <li class=""><a href="/category/%EB%B0%B0%EC%9B%80%ED%84%B0_%EC%9D%BC%EB%B0%98/%EA%B5%AC%EB%A7%A4" class="link_sub_item"> 구매 <span class="c_cnt">(23)</span> </a></li> </ul> </li> <li class=""><a href="/category/SORENTO%20THE%20MASTER" class="link_item"> SORENTO THE MASTER <span class="c_cnt">(16)</span> </a></li> <li class=""><a href="/category/SelTos%202020" class="link_item"> SelTos 2020 <span class="c_cnt">(5)</span> </a></li> <li class=""><a href="/category/SFAction" class="link_item"> SFAction <span class="c_cnt">(5)</span> </a></li> <li class=""><a href="/category/%EC%82%B0%EC%B1%85%EA%B8%B8" class="link_item"> 산책길 <span class="c_cnt">(0)</span> </a> <ul class="sub_category_list"><li class=""><a href="/category/%EC%82%B0%EC%B1%85%EA%B8%B8/%EB%A7%A4%EB%A7%A4%EC%9D%BC%EC%A7%80" class="link_sub_item"> 매매일지 <span class="c_cnt">(0)</span> </a></li> </ul> </li> </ul> </li> </ul> <ul class="menu_profile"> <li><a href="https://sfaction.tistory.com/guestbook">방명록</a></li> </ul> <s_sidebar_element> <!-- 최근에 올라온 글 --> <div class="mbox_aside"> <h5><i class="fa fa-file-text"></i>  최근에 올라온 글</h5> <ul class="list_board"> <s_rctps_rep> <li><a href="" class="link_board"></a></li> </s_rctps_rep> </ul> </div> </s_sidebar_element> <s_sidebar_element> <!-- 최근에 달린 댓글 --> <div class="mbox_aside"> <h5><i class="fa fa-comments"></i>  최근에 달린 댓글</h5> <ul class="list_board"> <s_rctrp_rep> <li><a href="" class="link_board"></a></li> </s_rctrp_rep> </ul> </div> </s_sidebar_element> <div class="mbox_menu"> <ul> <li><a class="write" href="https://sfaction.tistory.com/manage/entry/post" title="write">글쓰기</a></li> <li><a class="admin" href="https://sfaction.tistory.com/manage" title="admin">관리자</a></li> <li><a id="btn_login_toggle" onclick="loginToggle();">로그인</a></li> </ul> </div> <div class="Date_Counter"> <div class="Pc_Time"> <ul> <li> <script type="text/javascript"> //<![CDATA[ var strEngDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var d = new Date(); var sToday = d.getFullYear() + ". " + (d.getMonth() + 1) + ". " + d.getDate(); document.write(sToday + ". " + strEngDay[d.getDay()] + ""); //]]> </script> </li> </ul> </div><!-- // Pc_Time --> <div class="Visitor_Counter"> <ul> <li><i class="fa fa-bar-chart"></i></li> <li class="today"> 오늘: <span class="num">,  </span></li> <li class="yesterday">어제: <span class="num">,  </span></li> <li class="total">손님: <span class="num"></span></li> </ul> </div><!-- // Visitor_Counter --> <h3>REMEMBER 20140416</h3> </div><!-- // Date_Counter --> </div><!-- // list_cate -->

 

 

CSS

/* ##### mobile_메뉴 */ .mbox_aside { display:block; width:100%; height:auto; margin:0; padding-top:17px; } .mbox_aside h5 { width:auto; margin:0; padding:5px 5px 1px 15px; font-size:15px; color:#555; font-weight:normal; border-bottom:1px dotted #bcbcbc; } /* 최근 글, 최근 댓글 */ .mbox_aside .list_board { display:block; width:100%; height:auto; margin:0; padding-top:7px; } .mbox_aside .list_board li { margin:0; padding:0 5px 5px 17px; line-height:1; border:0px dotted red;} .mbox_aside .list_board li a { font-size:14px; color:#777; overflow:hidden; } .mbox_aside .list_board li a:before { content:"\f0da"; font-family:"FontAwesome"; padding-right:3px; } .mbox_aside .list_board li a:hover { text-decoration:none; color:#81a9db; cursor:pointer; } /* 글쓰기, 로그인, 관리자 */ .mbox_menu { display:block; text-align:center; width:100%; height:auto; margin:0; padding:27px 0 0 17px; } .mbox_menu li { display:inline-block; margin:0; padding-right:17px; line-height:1; } .mbox_menu li a { font-size:14px; color:#777; overflow:hidden; } .write:before { content:"\f15c"; font-family:"FontAwesome"; padding-right:3px;} .admin:before { content:"\f013"; font-family:"FontAwesome"; padding-right:3px;} #btn_login_toggle:before { content:"\f21b"; font-family:"FontAwesome"; padding-right:3px;} .mbox_menu li a:hover { text-decoration:none; color:#81a9db; cursor:pointer; } /* ### Date_Counter */ .Date_Counter { display:block; width:100%; height:auto; margin:0; padding-top:7px; } .Date_Counter h3 { margin:0; padding:3px 0; background:#003399; font-family:'Segoe UI',Georgia,"Times New Roman", sans-serif; font-size:20px; color:#FFE400; text-align:center; letter-spacing:1px; } /* Pc_Time */ .Pc_Time { width:100%; height:auto; margin:0; padding:0; text-align:center; } .Pc_Time ul { list-style:none; } .Pc_Time ul li { display:inline-block; margin:0; padding:0; font-size:13px; color:#999; border:0px dotted red; } /* ### Visitor_Counter */ .Visitor_Counter { width:100%; height:auto; margin:0; padding:0; } .Visitor_Counter ul { list-style:none; padding:0; margin:0; text-align:center; } .Visitor_Counter ul li { display:inline-block; margin:0; padding:0; font-size:12px; color:#999; letter-spacing:1px; } .Visitor_Counter ul li span { font-size:12px; color:#bcbcbc; } /* 카운터_어제, 오늘, 총 */ .yesterday, .today, .total { margin:0; padding:0; } /* 카운터 숫자 */ .Visitor_Counter .num {padding:0; margin:0;} /* // Date_Counter */ /* // ##### mobile_메뉴 */

 

 

휴대폰에서 버튼 클릭시 나타나는 메뉴

 

 

컴퓨터로 보는 블로그보다 휴대폰으로 보는 블로그 모습에 더욱 신경을 쓰고 있다.

생활속에서 늘 곁에 있어 자주 보게 되는 것이 휴대폰이고,  좁은 화면에 필요한 메뉴들을 나타나게 해야 하기 때문에 보다 보기좋고,  메뉴들을 다루기 편하게 꾸밀려고 한다.

물론 나, 자신이 기준이 되지만... ㅎ