css메뉴에서 마우스 hover효과를 잠시 사라지게하는 게 가능할까요?

css메뉴에서 마우스 hover효과를 잠시 사라지게하는 게 가능할까요?

QA

css메뉴에서 마우스 hover효과를 잠시 사라지게하는 게 가능할까요?

본문

b07cc3dc34cc136106ef7019d9ee34b8_1486022938_7738.gif
구글링을 통해 CSS 네비게이션 메뉴 소스를 찾아서 헤더에 심었습니다.

메뉴에 마우스 오버를 하면 하위 메뉴가 펼쳐지게끔 했는데,

 

 

문제는 해당 메뉴를 클릭하면 하위메뉴가 사라지지 않고 그대로 노출이 되는 까닭에

헤더 바로 하단에서 시작되는 분류의 제목이라던지 2차 분류 탭 등이

네비게이션 펼침메뉴에 가려져서 사용하기가 불편할 것으로 생각이 되고 있습니다.

 

정리하자면, 솔소님의 moon 테마(http://theme.sir.kr/youngcart5/shop/)에서 처럼 메뉴를 클릭하면 해당 메뉴로 페이지가 이동하면서 마우스 오버 효과가 잠시 사라지게 하는 방법이 있을지 궁금합니다. 

 

아래 소스는 css메뉴를 컨트롤 하는 js 파일 소스입니다.

 

-----------------------------------------------------------------------------------

 

/*global $ */

$(document).ready(function () {

 

    "use strict";

 

    $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');

    //Checks if li has sub (ul) and adds class for toggle icon - just an UI

 

 

    $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');

    //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)

 

    $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>");

 

    //Adds menu-mobile class (for mobile toggle menu) before the normal menu

    //Mobile menu is hidden if width is more then 959px, but normal menu is displayed

    //Normal menu is hidden if width is below 959px, and jquery adds mobile menu

    //Done this way so it can be used with wordpress without any trouble

 

    $(".menu > ul > li").hover(function (e) {

        if ($(window).width() > 943) {

            $(this).children("ul").stop(true, false).fadeToggle(150);

            e.preventDefault();

        }

    });

    //If width is more than 943px dropdowns are displayed on hover

 

    $(".menu > ul > li").click(function () {

        if ($(window).width() <= 943) {

            $(this).children("ul").fadeToggle(150);

        }

    });

    //If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)

 

    $(".menu-mobile").click(function (e) {

        $(".menu > ul").toggleClass('show-on-mobile');

        e.preventDefault();

    });

    //when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)

 

});

이 질문에 댓글 쓰기 :

답변 2

제대로 적용하셨다면 페이지 이동후에 하위메뉴가 사라져야 할텐데요?

임시방편으로 onclick 을 이용하여 해당 div 를 none 처리 해보는것은 어떨까요?

 

none 처리를 하게 되면 다시 메뉴에 마우스 오버했을 때 영영 하위메뉴가 사라지게 되는 게 아닌가요?

 

아울러 가능하시다면, 간단한 이벤트핸들러 소스 부탁드려도 될까요?^^;;;;;

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

회원로그인

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