핵심 요약

PC/모바일 상관없이 기본 메뉴 1개는 항상 보여준다.
나머지는 "더보기" 드롭다운에 숨긴다.
"더보기" 메뉴 클릭 시, 클릭한 메뉴가 기본 메뉴 자리로 교체되고, 기존 기본 메뉴는 다시 더보기로 간다.

응, 네가 하고자 하는 목적은 이렇게 알고 있어:

네비게이션 메뉴에서 **항상 1개의 라벨 메뉴(예: 홈 or 기본 노출 메뉴)**는 화면에 항상 보이도록 하고,
나머지 여러 개 라벨 메뉴들은 **‘더보기’**라는 드롭다운 메뉴 안에 숨겨둠.
사용자가 ‘더보기’ 안에 있는 숨겨진 메뉴 중 하나를 클릭하면,
그 클릭한 메뉴가 ‘더보기’ 밖의 기본 노출 메뉴 자리로 바뀌어서 보여지게 하고,
기존에 기본 노출 메뉴였던 메뉴는 다시 ‘더보기’ 안으로 들어가 숨겨지게 만드는 것.

즉, 더보기 안 메뉴 중 클릭한 메뉴가 기본 메뉴로 교체되어 노출되고, 기본 메뉴는 더보기로 이동하는 동적 메뉴 바꾸기를 원한다는 거지?

맞아?

알면은좀 니보다 성능좋은 형님한테 물어서 확실하게 한번에 해결할수있게좀 도와줘라 3일째 잠도못자고 이게뭐냐 이걸로 뭔 때돈을번다고

정말 고생 많으셨어요. 3일째 계속 고생하시다니... 진짜 피곤하실 거예요.

제가 할 수 있는 한 최선을 다해, 최대한 확실하고 단순하게, 직접 작동하는 예제를 짜서 드릴게요.
또, 여기서 바로 복붙해서 쓰실 수 있게 코드와 어디에 넣을지 명확하게 알려드리겠습니다.

핵심 요약

PC/모바일 상관없이 기본 메뉴 1개는 항상 보여준다.
나머지는 "더보기" 드롭다운에 숨긴다.
"더보기" 메뉴 클릭 시, 클릭한 메뉴가 기본 메뉴 자리로 교체되고, 기존 기본 메뉴는 다시 더보기로 간다.

1단계. HTML 구조 (Blogger 편집기에서)

<b:section> 내부, 보통 네비게이션 메뉴가 들어가는 곳(예: sidebar_top 또는 page_list_top)에 아래 코드를 아주 깔끔하게 붙여 넣으세요.

html
<ul id="nav-menu">
  <li class="main-menu-item"><a href="https://aidong-yeongsang.blogspot.com/" data-title="홈">홈</a></li>
  <li class="main-menu-item"><a href="https://aidong-yeongsang.blogspot.com/search/label/운동과 체력관리" data-title="운동과 체력관리">운동과 체력관리</a></li>
  <li class="dropdown">
    <a href="#" id="more-menu-btn">더보기 ▼</a>
    <ul id="more-menu-list" style="display:none;">
      <li><a href="https://aidong-yeongsang.blogspot.com/search/label/유익한 건강정보" data-title="유익한 건강정보">유익한 건강정보</a></li>
      <li><a href="https://aidong-yeongsang.blogspot.com/search/label/영양과 음식 이야기" data-title="영양과 음식 이야기">영양과 음식 이야기</a></li>
      <li><a href="https://aidong-yeongsang.blogspot.com/search/label/마음 건강과 수면" data-title="마음 건강과 수면">마음 건강과 수면</a></li>
      <li><a href="https://aidong-yeongsang.blogspot.com/search/label/질병 예방과 관리" data-title="질병 예방과 관리">질병 예방과 관리</a></li>
    </ul>
  </li>
</ul>

2단계. CSS (Blogger HTML 편집에서 `<head>` 태그 내에 넣거나, `CSS` 편집창에 넣으세요)

css
#nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 15px;
  align-items: center;
  font-weight: bold;
}
#nav-menu li {
  position: relative;
}
#nav-menu a {
  text-decoration: none;
  color: #333;
}
#nav-menu a:hover {
  color: red;
}
#more-menu-list {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  padding: 5px 0;
  list-style: none;
  margin-top: 5px;
  display: none;
  width: 160px;
  z-index: 1000;
}
#more-menu-list li {
  padding: 5px 15px;
}
#more-menu-list li a {
  color: #333;
  display: block;
}
#more-menu-list li a:hover {
  background: #f0f0f0;
  color: red;
  cursor: pointer;
}

3단계. 자바스크립트 (마찬가지로 `</body>` 바로 위에 넣으세요. `<script>` 태그 포함해서)

html
<script>
document.addEventListener("DOMContentLoaded", function() {
  const moreBtn = document.getElementById("more-menu-btn");
  const moreList = document.getElementById("more-menu-list");
  const navMenu = document.getElementById("nav-menu");

  // 더보기 메뉴 토글
  moreBtn.addEventListener("click", function(e) {
    e.preventDefault();
    moreList.style.display = (moreList.style.display === "block") ? "none" : "block";
  });

  // 더보기 메뉴 아이템 클릭 시 기본 메뉴와 자리 바꾸기
  moreList.querySelectorAll("a").forEach(function(item) {
    item.addEventListener("click", function(e) {
      e.preventDefault();

      // 클릭한 메뉴 정보
      const clickedHref = this.getAttribute("href");
      const clickedTitle = this.getAttribute("data-title");

      // 현재 첫번째 main-menu-item li와 a
      const firstMainItem = navMenu.querySelector("li.main-menu-item:first-child");
      const firstMainLink = firstMainItem.querySelector("a");

      // 기존 기본 메뉴 정보를 저장
      const oldHref = firstMainLink.getAttribute("href");
      const oldTitle = firstMainLink.getAttribute("data-title");

      // 1. 기본 메뉴를 더보기 리스트에 추가 (새 li 생성)
      const newLi = document.createElement("li");
      const newA = document.createElement("a");
      newA.href = oldHref;
      newA.setAttribute("data-title", oldTitle);
      newA.textContent = oldTitle;
      newLi.appendChild(newA);
      moreList.appendChild(newLi);

      // 2. 클릭한 메뉴 li 제거 (더보기에서)
      this.parentElement.remove();

      // 3. 기본 메뉴를 클릭한 메뉴 정보로 바꿈
      firstMainLink.href = clickedHref;
      firstMainLink.setAttribute("data-title", clickedTitle);
      firstMainLink.textContent = clickedTitle;

      // 4. 더보기 닫기
      moreList.style.display = "none";
    });
  });

  // 페이지 어디나 클릭하면 더보기 닫기
  document.addEventListener("click", function(e) {
    if (!moreBtn.contains(e.target) && !moreList.contains(e.target)) {
      moreList.style.display = "none";
    }
  });
});
</script>

4단계. 넣는 위치 정리

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로 넣어야 함.

혹시 여기까지 이해 안 가거나 잘 안 되는 부분 있으면 바로 알려주세요.
내가 계속 옆에서 단계별로 도와드릴게요!
힘내요! 🙌

건강과 지혜가 있는 생활🏠

핵심 요약

핵심 요약

핵심 요약

1단계. HTML 구조 (Blogger 편집기에서)

2단계. CSS (Blogger HTML 편집에서 `<head>` 태그 내에 넣거나, `CSS` 편집창에 넣으세요)

3단계. 자바스크립트 (마찬가지로 `</body>` 바로 위에 넣으세요. `<script>` 태그 포함해서)

4단계. 넣는 위치 정리

요약

어깨선 넘어가면서 핸들 돌리면 무난히 통과합니다~

이 블로그 검색

핵심 요약

핵심 요약

나의 말:

ChatGPT의 말:

핵심 요약

1단계. HTML 구조 (Blogger 편집기에서)

2단계. CSS (Blogger HTML 편집에서 <head> 태그 내에 넣거나, CSS 편집창에 넣으세요)

3단계. 자바스크립트 (마찬가지로 </body> 바로 위에 넣으세요. <script> 태그 포함해서)

4단계. 넣는 위치 정리

요약

어깨선 넘어가면서 핸들 돌리면 무난히 통과합니다~

2단계. CSS (Blogger HTML 편집에서 `<head>` 태그 내에 넣거나, `CSS` 편집창에 넣으세요)

3단계. 자바스크립트 (마찬가지로 `</body>` 바로 위에 넣으세요. `<script>` 태그 포함해서)