PC/모바일 상관없이 기본 메뉴 1개는 항상 보여준다.
나머지는 "더보기" 드롭다운에 숨긴다.
"더보기" 메뉴 클릭 시, 클릭한 메뉴가 기본 메뉴 자리로 교체되고, 기존 기본 메뉴는 다시 더보기로 간다.
응, 네가 하고자 하는 목적은 이렇게 알고 있어:
네비게이션 메뉴에서 **항상 1개의 라벨 메뉴(예: 홈 or 기본 노출 메뉴)**는 화면에 항상 보이도록 하고,
나머지 여러 개 라벨 메뉴들은 **‘더보기’**라는 드롭다운 메뉴 안에 숨겨둠.
사용자가 ‘더보기’ 안에 있는 숨겨진 메뉴 중 하나를 클릭하면,
그 클릭한 메뉴가 ‘더보기’ 밖의 기본 노출 메뉴 자리로 바뀌어서 보여지게 하고,
기존에 기본 노출 메뉴였던 메뉴는 다시 ‘더보기’ 안으로 들어가 숨겨지게 만드는 것.
즉, 더보기 안 메뉴 중 클릭한 메뉴가 기본 메뉴로 교체되어 노출되고, 기본 메뉴는 더보기로 이동하는 동적 메뉴 바꾸기를 원한다는 거지?
맞아?
정말 고생 많으셨어요. 3일째 계속 고생하시다니... 진짜 피곤하실 거예요.
제가 할 수 있는 한 최선을 다해, 최대한 확실하고 단순하게, 직접 작동하는 예제를 짜서 드릴게요.
또, 여기서 바로 복붙해서 쓰실 수 있게 코드와 어디에 넣을지 명확하게 알려드리겠습니다.
PC/모바일 상관없이 기본 메뉴 1개는 항상 보여준다.
나머지는 "더보기" 드롭다운에 숨긴다.
"더보기" 메뉴 클릭 시, 클릭한 메뉴가 기본 메뉴 자리로 교체되고, 기존 기본 메뉴는 다시 더보기로 간다.
<b:section> 내부, 보통 네비게이션 메뉴가 들어가는 곳(예: sidebar_top 또는 page_list_top)에 아래 코드를 아주 깔끔하게 붙여 넣으세요.
<head> 태그 내에 넣거나, CSS 편집창에 넣으세요)</body> 바로 위에 넣으세요. <script> 태그 포함해서)HTML 코드:
b:section 내부, 네비게이션 메뉴 자리를 찾아서 기존 메뉴를 이걸로 바꾸거나 새로 넣으세요.
CSS 코드:
블로그 관리자 → 테마 → HTML 편집 → <head> 태그 안이나 CSS 편집에서 넣기.
JS 코드:
블로그 관리자 → 테마 → HTML 편집 → </body> 바로 위에 붙이기.
HTML 메뉴 구조를 직접 넣는다.
CSS로 메뉴를 예쁘게 꾸민다.
JS로 클릭 시 메뉴 자리 바꾸기 동작 구현한다.
Blogger 구조 때문에 <b:widget> 같은 요소와 섞이지 않도록,
순수 HTML 메뉴 코드를 b:section 안 적당한 자리에 직접 넣는 게 가장 확실하다.
필요하면 지금 내가 만든 이 코드를 파일로도 만들어서 드릴게요.
복붙해서 그대로 쓰면 거의 100% 작동할 거고,
오류가 나는 이유는 대개 <b:widget>나 <b:section> 내부 XML 규칙 때문이라서 직접 HTML로 넣어야 함.
혹시 여기까지 이해 안 가거나 잘 안 되는 부분 있으면 바로 알려주세요.
내가 계속 옆에서 단계별로 도와드릴게요!
힘내요! 🙌
.jpg)
