그누보드 QA - 혹시 이런 가로메뉴 보신분

노는 김에 간단하게 만들어봤어요.
- https://dreamphp.com/program/20200809_menu.html
(링크는 언제 삭제될지 모릅니다.)
(태블릿으로 운영중인데 좀 느립니다. 페이지 뜨지 않으면, 시간을 두고 다시 접속해보세요.)

- PC 기준입니다.
Mobile은 세로 모드에서 폭이 좁고, 마우스 오버 이벤트가 아닌 터치 이벤트라서 패스.
- 메뉴를 보자마자 든 생각은 메인 메뉴가 많거나, 서브 메뉴가 많을 때의 문제인데
질문 내용엔 없는 부분이고, 처리 방법도 다양하기에 그냥 패스합니다.
- 굳이 자바스크립트가 필요치 않아 CSS로 처리했습니다.
CSS만으로도 펼쳐짐, 페이드 효과 등이 가능한데 패스.
- 줄바꿈 등으로 인한 여백 제거를 위한 간단한 팁 사용 [링크 참고]

↳ BiHon 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2020-08-11 11:40:28211.♡.♡.58

피드백이 없군요. 아무튼, 코드도 댓글로 남깁니다.


<style>
* { box-sizing: border-box; font-family: GulimChe; font-size: 12px; }
body { padding: 10px; margin: 0; }

/* 실제 필요한 메뉴 CSS */
#menu { width: 100%; background-color: #1b1b1b; padding: 15px; margin: 0; list-style: none; text-align: right; margin-bottom: 25px; }
#menu ul { list-style: none; padding: 0; margin: 0; display: none; white-space: nowrap; }
#menu li { display: inline-block; }
#menu ul li { background-color: #515151; margin-left: -1px; }
#menu ul:before { content: ''; padding: 10px; background-color: #515151; border-radius: 20px 0 0 20px; }
#menu ul:after { content: ''; padding: 10px; background-color: #515151; border-radius: 0 20px 20px 0; }
#menu a { display: inline-block; color: #fff; text-decoration: none; padding: 10px; font-weight: bold; }
#menu > li:hover ul { display: inline-block; }
</style>
<ul id="menu"><!--
  --><li><!--
    --><a href="#1">메뉴1</a><!--
    --><ul><!--
      --><li><a href="#">서브메뉴1</a></li><!--
      --><li><a href="#">서브메뉴2</a></li><!--
      --><li><a href="#">서브메뉴3</a></li><!--
      --><li><a href="#">서브메뉴4</a></li><!--
      --><li><a href="#">서브메뉴5</a></li><!--
    --></ul><!--
  --></li><!--
  --><li><!--
    --><a href="#1">메뉴2</a><!--
    --><ul><!--
      --><li><a href="#">서브메뉴6</a></li><!--
    --></ul><!--
  --></li><!--
  --><li><!--
    --><a href="#1">메뉴3</a><!--
  --></li><!--
  --><li><!--
    --><a href="#1">메뉴4</a><!--
    --><ul><!--
      --><li><a href="#">서브메뉴8</a></li><!--
      --><li><a href="#">서브메뉴9</a></li><!--
    --></ul><!--
  --></li><!--
--></ul>