블로그스팟 햄버거 메뉴 꾸미기: 마우스 오버 시 '메뉴 펼치기' 툴팁 넣기

블로그스팟의 밋밋한 메뉴 버튼, 몇 번의 시도 끝에 성공한, 햄버거 아이콘에 마우스를 대면 '메뉴 펼치기' 안내가 나타나는 툴팁 적용법을 소개한다. 제미나이 스타일의 다크 그레이 배경과 Noto Sans KR 폰트를 적용해 세련미를 더했다.

햄버거 아이콘에 메뉴 펼치기 안내 글자 넣기 (제미나이 스타일 툴팁)

1. CSS (디자인 입히기)

블로그스팟 [테마] > [맞춤설정] > [고급] > [CSS 추가]에 아래 코드를 복사해서 붙여 넣는다.

CSS


/* 1. 툴팁을 띄울 버튼 설정 */
.sidebar-toggle, [data-tooltip] {
    position: relative !important;
}

/* 2. 마우스를 올렸을 때 나타나는 커스텀 툴팁 (제미나이 스타일) */
.sidebar-toggle:hover::after, [data-tooltip]:hover::after {
    content: attr(data-tooltip); /* title 대신 data-tooltip 사용 */
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #202124; /* 제미나이 다크 그레이 */
    color: #ffffff !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 11px !important;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 99999;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    pointer-events: none;
    display: block !important;
}

2. 자바스크립트

블로그스팟 [레이아웃] > 왼쪽 상단 헤더 부분 [가젯 추가]를 누르고, [HTML/자바스크립트]를 선택한다.

제목은 비워두고, 내용(콘텐츠)에 아래 코드를 복사해서 붙여 넣는다.

HTML


<script>
  setInterval(function() {
    var btns = document.querySelectorAll('button, .sidebar-toggle, [role="button"]');
    btns.forEach(function(btn) {
      // 메뉴 아이콘을 포함한 버튼을 찾으면
      if (btn.innerHTML.includes('ic_menu')) {
        // 기존 title이 있다면 data-tooltip으로 옮기고 title은 삭제 (중복 방지)
        if (btn.hasAttribute('title')) {
          btn.setAttribute('data-tooltip', btn.getAttribute('title'));
          btn.removeAttribute('title');
        } 
        // 아예 없다면 바로 생성
        else if (!btn.hasAttribute('data-tooltip')) {
          btn.setAttribute('data-tooltip', '메뉴 펼치기');
        }
      }
    });
  }, 1000);
</script>

마무리 및 팁

위 단계를 모두 마치면, 이제 블로그 왼쪽 상단의 햄버거 메뉴 아이콘에 마우스를 올렸을 때 깔끔한 검은색 배경의 '메뉴 펼치기' 안내가 나타난다.

※ 만약 툴팁의 글자 크기가 너무 작게 느껴진다면, 위에서 넣었던 CSS 코드 부분을 수정해 보자.

font-size: 11px !important; → font-size: 13px !important; (글자 크기)
padding: 6px 12px; → padding: 8px 14px; (여백)

하나 더!

'메뉴 펼치기'의 글자를 바꾸고 싶다면 따옴표(' ')안의 글자만 바꾸면 된다.

'메뉴', 'Menu' 등

오늘의 한마디

마우스를 햄버거 아이콘 메뉴에 올렸을 때 이렇게 보인다면, 성공!

햄버거 아이콘에 마우스를 올리면 메뉴 펼치기 글자 보이는 예시 화면

맘에 들어?

이 블로그 검색

더한스픽