혹시 이런 가로메뉴 보신분

혹시 이런 가로메뉴 보신분

QA

혹시 이런 가로메뉴 보신분

본문

32362851_1596915035.2131.png

 

 

이미지처럼 메뉴1에 마우스를 올리면 숨어있던 서브메뉴가 좌측으로 펼쳐지는 스크립트 소스 혹시 보신분

링크 좀 부탁드립니다......

검색을 나름대로 햇는데 도통 찾을수가 없네요 ;;

이 질문에 댓글 쓰기 :

답변 3

간단하게 만들어도 되겠으나, 만들기 어려우면 Accordion으로 검색해서 비슷한 형태의 메뉴 찾아 수정해보면 되겠네요.

예를 들면, 아래 메뉴에서 우측 정렬이나 마우스 이벤트 등 수정하면 되겠네요.

- https://uicookies.com/css-accordion/

  - https://codepen.io/rrenula/full/DGrhf

  - https://codepen.io/valaxin/full/reQMXp

- https://www.jqueryscript.net/accordion/Simple-Vertical-Horizontal-Accordion-Plugin-with-jQuery-asAccordion.html

:

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

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

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


<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>

css 로도 가능합니다.

마우스오버 후 나오는 메뉴를 width:0 으로 잡고 opacity:0 , visibility: hidden; , display:none 등을 활용하여 숨김처리를 한 후,

마우스오버 시 width:100% (원하는 수치만큼) opacity:1, visibility:visible , display:block 등을 활용하여

보이게끔 하면 됩니다.

이제 여기서 자연스러운 효과를 위해 애니메이션 딜레이를 걸어주면 됩니다.

transition:all 0.2s ease;  또는 키프레임을 이용하여 만들수도 있습니다.

 

답변을 작성하시기 전에 로그인 해주세요.
전체 408
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT