본문 바로가기

Blog/티스토리스킨

Spider’s Web 모바일 버튼 위치 크기 변경하기 수치만 변경하면 끝!!

마크쿼리 웹 반응형 스킨 모바일 메뉴 크기 변경?

Spider’s Web 3.0.5 기준으로 작성했습니다.

모바일에서 왼쪽 상단에 아이콘 눌렀을 때 왼쪽에서 나오는 메뉴의 크기 변경하는 방법입니다?
이것까지 바꿔서 쓰는 사람이 있을지는 모르겠지만...
제가 변경을 했기에 혹시나 필요하신 분 있을까 싶어서 포스팅해봅니다.
크기 변경한 이유는 상단 메뉴에서 제목이 길어서 모바일에서 두 줄로 보이길래? 수정한 겁니다.


모바일메뉴크기변경 비교


이 블로그랑 테스트 블로그 두 개의 모바일 메뉴 크기 변경하고 다음 Troy 사이트를 이용해서 비교해 놓은 겁니다.
오른쪽은 테스트 블로그, 왼쪽은 지금 이 블로그입니다.

트로이 홈페이지 http://troy.labs.daum.net/



/* nav
------------------------- */
.
.
.
#menu-layout { position: relative; padding-left: 0; }
  #menu-layout.active { position: relative; left: 150px; }
  #menu-layout.active #menu { left: 150px; width: 150px; }
  #menu-layout.active .menu-link { left: 150px; }
  #menu {
    margin-left: -150px; 
    width: 150px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; 
    background: #191818;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* nav */ 부분을 찾아서 수정하면 됩니다.
하나씩 이쪽 용어 말고 간단하게 말하면서 설명할게요 '';;



여기서 left: 150px;를 수정하면 모바일에서 메뉴 버튼을 누르면 본문이 오른쪽으로 밀리는 조정하는 겁니다.



이부분은 left: 150px;왼쪽에서 메뉴가 얼마나 밀리나고, width: 150px; 모바일 메뉴바 눌렀을 때 크기입니다.



여기에 left: 150px; 부분은 모바일 메뉴 버튼이 터치나 눌렀을 때 위치입니다.

#menu {...} 부분은 안 건들어도 될 거 같습니다.

밑에는 제가 적용한 방법 입니다.


적용예


Plus

정리해보면

수치만 조금 수정해서 크기를 변경할 수 있는 건 좋은데 -0-
이런 걸 보고 삽질이라고 하나요?
수정 안 해도 될 부분을 수정해서 고생하는 것 말입니다. ㅎㅎ
위치랑 색상 등등, 수정이 가능한데 귀찮아서 크기만 변경한 겁니다.
암튼 필요하신 분에게 도움이 되길 바랍니다 ^^

설명이 답답해서 죄송하고 ㅎㅎ 궁금하시면 방명록이 댓글로 문의하세요 '';;