마크쿼리 웹 반응형 스킨 모바일 메뉴 크기 변경?
모바일에서 왼쪽 상단에 아이콘 눌렀을 때 왼쪽에서 나오는 메뉴의 크기 변경하는 방법입니다?
이것까지 바꿔서 쓰는 사람이 있을지는 모르겠지만...
제가 변경을 했기에 혹시나 필요하신 분 있을까 싶어서 포스팅해봅니다.
크기 변경한 이유는 상단 메뉴에서 제목이 길어서 모바일에서 두 줄로 보이길래? 수정한 겁니다.
이 블로그랑 테스트 블로그 두 개의 모바일 메뉴 크기 변경하고 다음 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-
이런 걸 보고 삽질이라고 하나요?
수정 안 해도 될 부분을 수정해서 고생하는 것 말입니다. ㅎㅎ
위치랑 색상 등등, 수정이 가능한데 귀찮아서 크기만 변경한 겁니다.
암튼 필요하신 분에게 도움이 되길 바랍니다 ^^
설명이 답답해서 죄송하고 ㅎㅎ 궁금하시면 방명록이 댓글로 문의하세요 '';;
'Blog > 티스토리스킨' 카테고리의 다른 글
티스토리 사이드바 오른쪽에서 왼쪽으로 옮기기 본문 영역은 왼쪽으로!! (8) | 2014.06.15 |
---|---|
웹 반응형 스킨 스파이더웹 커버 이미지 사용 안 하고 없애기 (5) | 2014.06.14 |
원소스 멀티플레이 스킨 SpiderWeb 상단 내비게이션 고정하기 숨겨진 방법? (8) | 2014.06.12 |
스파이더웹 or 두 비두 상단 메뉴 일정 부분 오른쪽 정렬하기 방법 (6) | 2014.06.11 |
마크쿼리 반응형 스킨 상단 메뉴바 색상, 글자 크기, 굵기 바꾸기? (2) | 2014.06.10 |