스파이더웹 or 두 비두 상단 메뉴 일정 부분 오른쪽 정렬하기 방법

마크쿼리 웹 반응형 스킨 상단 메뉴 두 개 오른쪽 정렬

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

지금 제가 사용하고 있는 상단 메뉴 스타일입니다.
구독 메뉴랑 방명록 검색창을 오른쪽 정렬, 나머지 카테고리 등은 왼쪽 정렬하는 방법입니다.

1. 오른쪽으로 정렬할 메뉴 선정?
2. 오른쪽으로 보낼 <ul> ... </ul> 태그만들기
3. <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;} 소스 추가하기.

Download 상단메뉴오른쪽정렬.txt

위에 소스를 추가하고 나면 위에 그림처럼 결과를 볼 수 있습니다.^^
하지만. 메뉴가 많거나 메뉴 제목이 길면 아래처럼 나올 수도 있습니다.

이렇게 상단 메뉴가 두 겹으로 나옵니다.
그리고 이렇게 안 되려면 글자 크기를 줄이거나 제목 글 수를 줄이거나 해야 됩니다.

글자 크기 관련 http://blog-pleur.tistory.com/6

Plus

정리해보면

이 방법은 마크쿼리님 스킨에 보면 공유 버튼에 오른쪽 정렬돼있는 폰트 변경 글자 크기 보고 고치려고 하는데 마크쿼리님 홈페이지 질문 답변 게시판에 아바구님이 질문해서 마크쿼리님이 알려주신 방법입니다.
쉽게 쉽게 가자!!
잘 됐다 싶어서 바로 적용 아싸!!
암튼 잘 모르시거나 궁금하시면 방명록이나 댓글로 문의하세요 ^^