깔끔한 어코디언메뉴 소스 어디없을까요?
본문
https://ecudemo84804.cafe24.com/
이 사이트의 좌측 카테고리메뉴에서 누르면 부드럽게 펼쳐지는 shop 부분만
구매하고 싶어서 판매자한테 메뉴부분만 구입문의했는데 답이 없더군요.
딱 shop부분만 필요한데 이런 소스 어디 없을까요?
구글링하면 어코디언메뉴 소스는 엄청 많은데 쓸데없이 색깔이나 아이콘
덕지덕지라서 소스코드만 커지고... 위처럼 깔끔한건 없더라구요.
위와 같은 소스 아시는분 좌표좀 부탁드립니다ㅜㅜ
답변 4
그 정도라면 다음 처럼 간단하게 만들어 사용하시면 될것도 같습니다만
취향을 알 수 없어... ㅎㅎ 참조만 하시죠.
<style>
#shopmenu { cursor:pointer; }
#shop_sub { display:none; list-style:none; }
</style>
<div id="shopmenu">SHOP
<ul id="shop_sub">
<li>OUTER</li>
<li>TOP</li>
<li>DRESS</li>
<li>BOTTOM</li>
</ul>
</div>
<script>
$( "#shopmenu" ).click(function() {
$( "#shop_sub" ).slideToggle( "slow" );
});
</script>
헉.. 댓글 감사합니다.
색이나 아이콘 없이 순수하게 딱 제가 원하는 스타일이에요.
근데 shop을 클릭하며 펼쳐지지는 않네요^^;;
물론 jquery를 불러오거나 삽입하셔야 작동합니다.
저는 잘되길래 올려 드렷는데......어디에 문제가 있나요?
제이쿼리 불러오니 잘 됩니다.
제가 많이 초보라서 신비님 링크 참고했어요.
진심 고맙습니다^^
그누보드에 넣어 사용하실 땐 제이쿼리 넣으시면 안 돼요.
중복이라 충돌 날 수 있습니다.
작동 모습을 보여드리기 위해 추가한 것 뿐입니다.
1.
먼저, 아코디언의 영어 단어를 찾습니다.
2.
해당 영어단어와 menu 키워드로 구글링 ^^
https://mdbootstrap.com/docs/jquery/javascript/accordion/
주로 애용하는 MD부트스트랩입니다.
아니면 직접 짜셔도..
jquery.shop.menu.js
혹은
jquery.menu.js
에서
$gnb.mouseover(function(){ })
$gnb.mouseout(function(){ })
부분에 클릭이벤트 어코디언으로 바꾸고싶으시면 테마head.php 에서 네비게이션에 a태그를 빼주셔야하고.. $gnb대신에 해당 a태그대신 다른 태그로 교체하신거에 클릭이벤트를 걸어서 해당 안에 있는 서브네비게이션에 toggleClass 혹은 if문으로 slideUp, slideDown 걸으시면 될듯해요
감사합니다 많은 도움이 되었습니다.
