마크쿼리 웹 반응형 스킨 상단 메뉴 두 개 오른쪽 정렬
지금 제가 사용하고 있는 상단 메뉴 스타일입니다.
구독 메뉴랑 방명록 검색창을 오른쪽 정렬, 나머지 카테고리 등은 왼쪽 정렬하는 방법입니다.
- 오른쪽으로 정렬할 메뉴 선정?
- 오른쪽으로 보낼 <ul> ... </ul> 태그만들기
- <ul> nav-right와 같은 이름의 클래스를 지정
상단 메뉴에서 오른쪽으로 보낼 메뉴를 선택해야 되겠죠?
저는 구독 버튼이랑 방명록만 오른쪽으로 보내서 쓰다가 검색창을 제일 마지막 위치에 넣었어요.
이유는 모바일로 변화면 왼쪽부터 오른쪽 선으로 위에서 아래로 정렬돼서 검색창이 제일 마지막에 위치한 겁니다.
<ul class="nav-right" role="menubar"> <!-- 오른쪽 내비게이션 --> <li role="menuitem"><a href="/guestbook">방명록</a></li> </ul>
이렇게 만든 태그를 </nav>
바로 위에 붙여넣기 하고 더 필요한 부분을 <li role="menuitem"><a href="...">...</a></li> 이렇게 추가하면 됩니다.
상단 메뉴 설정 방법 http://blog-pleur.tistory.com/4
/* site navigation -------------------------------------------------- */ . . . .nav ul.nav-right { float:right; }
/* site navigation 부분을 찾아서 .nav ul.nav-right { float:right; } 소스 추가하기.
/* Small devices < 768px ------------------------- */ @media screen and (max-width: 767px) { . . . /* nav ------------------------- */ . . . .nav ul.nav-right { float:none; }
/* Small devices < 768px 부분에 /* nav 를 찾아서 .nav ul.nav-right { float:none;} 소스 추가하기.
위에 소스를 추가하고 나면 위에 그림처럼 결과를 볼 수 있습니다.^^
하지만. 메뉴가 많거나 메뉴 제목이 길면 아래처럼 나올 수도 있습니다.
이렇게 상단 메뉴가 두 겹으로 나옵니다.
그리고 이렇게 안 되려면 글자 크기를 줄이거나 제목 글 수를 줄이거나 해야 됩니다.
글자 크기 관련 http://blog-pleur.tistory.com/6
Plus
이 방법은 마크쿼리님 스킨에 보면 공유 버튼에 오른쪽 정렬돼있는 폰트 변경 글자 크기 보고 고치려고 하는데 마크쿼리님 홈페이지 질문 답변 게시판에 아바구님이 질문해서 마크쿼리님이 알려주신 방법입니다.
쉽게 쉽게 가자!!
잘 됐다 싶어서 바로 적용 아싸!!
암튼 잘 모르시거나 궁금하시면 방명록이나 댓글로 문의하세요 ^^
'Blog > 티스토리스킨' 카테고리의 다른 글
Spider’s Web 모바일 버튼 위치 크기 변경하기 수치만 변경하면 끝!! (6) | 2014.06.13 |
---|---|
원소스 멀티플레이 스킨 SpiderWeb 상단 내비게이션 고정하기 숨겨진 방법? (8) | 2014.06.12 |
마크쿼리 반응형 스킨 상단 메뉴바 색상, 글자 크기, 굵기 바꾸기? (2) | 2014.06.10 |
반응형 티스토리 스킨 상단 메뉴바에 검색창 위치 변경하기!!! (20) | 2014.06.09 |
웹 반응형 스킨 상단 내비게이션 기본 설정 잠깐이면 원하는 대로 만들 수 있다!! (12) | 2014.06.08 |