답변 3개
css 로도 가능합니다.
마우스오버 후 나오는 메뉴를 width:0 으로 잡고 opacity:0 , visibility: hidden; , display:none 등을 활용하여 숨김처리를 한 후,
마우스오버 시 width:100% (원하는 수치만큼) opacity:1, visibility:visible , display:block 등을 활용하여
보이게끔 하면 됩니다.
이제 여기서 자연스러운 효과를 위해 애니메이션 딜레이를 걸어주면 됩니다.
transition:all 0.2s ease; 또는 키프레임을 이용하여 만들수도 있습니다.
댓글을 작성하려면 로그인이 필요합니다.
간단하게 만들어도 되겠으나, 만들기 어려우면 Accordion으로 검색해서 비슷한 형태의 메뉴 찾아 수정해보면 되겠네요.
예를 들면, 아래 메뉴에서 우측 정렬이나 마우스 이벤트 등 수정하면 되겠네요.
- https://uicookies.com/css-accordion/
- https://codepen.io/rrenula/full/DGrhf
- https://codepen.io/valaxin/full/reQMXp
:
답변에 대한 댓글 2개
[code]
<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>
[/code]
댓글을 작성하려면 로그인이 필요합니다.
제일 비슷한 것이 http://jsfiddle.net/AC8XK/">http://jsfiddle.net/AC8XK/
https://stackoverflow.com/questions/13736005/jquery-horizontal-slide-toggle-navigation">https://stackoverflow.com/questions/13736005/jquery-horizontal-slide-toggle-navigation
제대로 동작은 안하네요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
- https://dreamphp.com/program/20200809_menu.html
(링크는 언제 삭제될지 모릅니다.)
(태블릿으로 운영중인데 좀 느립니다. 페이지 뜨지 않으면, 시간을 두고 다시 접속해보세요.)
- PC 기준입니다.
Mobile은 세로 모드에서 폭이 좁고, 마우스 오버 이벤트가 아닌 터치 이벤트라서 패스.
- 메뉴를 보자마자 든 생각은 메인 메뉴가 많거나, 서브 메뉴가 많을 때의 문제인데
질문 내용엔 없는 부분이고, 처리 방법도 다양하기에 그냥 패스합니다.
- 굳이 자바스크립트가 필요치 않아 CSS로 처리했습니다.
CSS만으로도 펼쳐짐, 페이드 효과 등이 가능한데 패스.
- 줄바꿈 등으로 인한 여백 제거를 위한 간단한 팁 사용 [링크 참고]