1

When I click the back side of a rotateY'ed div, the clicks pass through to the next div inside the body tag, instead of registering on the div I'm actually clicking on. Does anyone know what is going on here and how to fix it?

The problem can be seen here. It does not work in Chrome, specifically.

If you click on Packages in the menu on the left, the sub menu will flip out from behind the main menu, and then if you try to click a sub menu item, it closes the menu because the browser thinks you're clicking on off-canvas-wrapper which closes the menu. Even if I remove the jquery click event from off-canvas-wrapper, click events still pass through this flipped div.

Thank you for taking a look at this.

HTML:

    <div id="menu" class="menu">
        <img src="http://test.peoples1.com/wp-content/themes/JointsWP-master/library/images/menu-est-icon.png">
        <div class="menu-phone">
            <p>800-325-6598</p>
        </div>
        <ul class="menu-main">
            <li class=""><a href="/home">Home</a></li>
            <li class=""><a href="/about">About</a></li>
            <li class="menu-item-packages"><a href="#">Packages</a></li>
            <li class=""><a href="/quick-ownership">Quick<br>Ownership</a></li>
            <li><a href="/corporate-housing">Corporate<br>Housing</a></li>
            <li><a href="/home-staging">Home<br>Staging</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </div>

    <div class="menu-button">
        <a href="#" class="menu-button-icon"> </a>
        <a href="#" class="menu-button-text"> MENU</a>
    </div>

    <div class="card flipped-reset">
        <ul class="sub-menu menu-packages">
            <li><a href="/packages/economy">Economy</a></li>
            <li><a href="/packages/standard">Standard</a></li>
            <li><a href="/packages/executive">Executive</a></li>
        </ul>
    </div>

<div class="off-canvas-wrap" data-offcanvas="">

CSS:

.card {
    position: absolute;
    top: 0px;
    left: 0px;

    height: 100%;
    width: $menu-width;

    z-index: 9;
    background-color: $menu-sub-background;

    -ms-transform-origin: right;
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.8s;
    -moz-transform-style: preserve-3d;
    -moz-transition: 0.8s;
    -ms-transform-style: preserve-3d;
    -ms-transition: 0.8s;
    -o-transform-style: preserve-3d;
    -o-transition: 0.8s;
    transform-style: preserve-3d;
    transition: 0.8s;

    -webkit-perspective: 500;
    -webkit-backface-visibility: hidden;

 }

.card:after {
    background-color: $menu-sub-background;
}

 .menu-packages { 
    height: 100%;
    width: 100%;
    margin: 0px;
    padding-top: 20em;

    background-color: $menu-sub-background;
    list-style-type: none;

    transform:rotatey(-180deg);
    -ms-transform:rotatey(-180deg); /* IE 9 */
    -moz-transform:rotatey(-180deg); /* Firefox */
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
    -o-transform:rotatey(-180deg); /* Opera */

    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

.flipped {
    transform:rotatey(-180deg);
    -ms-transform:rotatey(-180deg); /* IE 9 */
    -moz-transform:rotatey(-180deg); /* Firefox */
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
    -o-transform:rotatey(-180deg); /* Opera */

    perspective: 500px;
}

Jquery:

/* card flip */
        $(document).ready(function() {

            $(".menu-main > li").hover(function() {
                if (!($(this).hasClass("active"))) {
                    $(this).toggleClass("menu-active-item");
                }
            }, function() {
                if (!($(this).hasClass("active"))) {
                    $(this).toggleClass("menu-active-item");
                }
            });

            //Main Menu Functions
            $(".menu-button").click(function(){
                $(".menu").toggleClass("menu-active");
                $(".menu-button").toggleClass("menu-button-menu-active");
            });

            //Menu Button Functions
            $("div.menu-button").hover(function(){
                $(this).toggleClass("menu-button-hover");
                $(".menu-button-icon").toggleClass("menu-button-icon-hover");
                $(".menu-button-text").toggleClass("menu-button-icon-text");
            }, function() {
                $(this).toggleClass("menu-button-hover");
                $(".menu-button-icon").toggleClass("menu-button-icon-hover");
                $(".menu-button-text").toggleClass("menu-button-icon-text");
            });

            //Sub Menu Functions
            $(".menu-item-packages").click(function(){
                $(this).addClass("menu-active-item");
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                    //This function needs to increase the width of the menu wrapper in order for the submenu links to work.
                    $(".menu-wrapper").width(170);
                }
                else {
                    $(this).addClass("active");                        
                    $(".menu-wrapper").width(340);
                }
                //$(".card").offset({left: 0});
                $(".card").removeClass("flipped-reset");
                $(document).find(".card").toggleClass("flipped");
                $(".menu-button").toggleClass("menu-button-sub-menu-active");

            }); 

            //Sub Menu Hover
            $(".sub-menu > li").hover(function() {
                $(this).toggleClass("sub-menu-item-hover");
            }, function() {
                $(this).toggleClass("sub-menu-item-hover");
            });

            //Menu Close
            $(".inner-wrap").click(function(){
                $(document).find(".menu-active").removeClass("menu-active");
                $(".menu-button-menu-active").removeClass("menu-button-menu-active");
                $(".menu-button-sub-menu-active").removeClass("menu-button-sub-menu-active");
                if ($(document).find(".card").hasClass("flipped")) {
                    $(document).find(".card").removeClass("flipped");
                    $(document).find(".card").addClass("flipped-reset");
                }
                $(".menu-wrapper").width(170);
            });

        })
7
  • Can you show us what your HTML and jQuery look like? Hard to see what the issue is without those.
    – Adjit
    Dec 8, 2014 at 20:30
  • It is ok for you to provide a live link, but the code required to assist you needs to be in your question. Dec 8, 2014 at 20:31
  • Btw, if I click packages and then try to click a submenu item it works just fine...I am able to redirect to all 3 links (pages don't exist but I get redirected) Dec 8, 2014 at 20:33
  • I forgot to mention that this happens in Chrome and Safari. Firefox seems to be the only one that it works in. Dec 8, 2014 at 20:38
  • 1
    Thank you for taking a look at it, Craig. I didn't even know it worked in Firefox! Dec 8, 2014 at 20:52

1 Answer 1

0

When the sub menu is show, this css is style is on

-webkit-backface-visibility: hidden;

Change to when the flip is registered

-webkit-backface-visibility: visible;

This will work for webkit browsers so you'll need to add the corresponding styles for other browsers.

HTH

1
  • This only makes the left side of the list item in the sub menu clickable. Dec 8, 2014 at 22:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.