2017-05-30 13 views
0

アニメーションメニューを作成するのにJQuery Rainを使用しますが、メニュー項目内にonclickを追加することはできません。 これは、メニューボタンとサブメニュー項目の美しい効果です。jQuery Rain "アニメーションメニューアイコン" onclick not working

私はonclick = "alert(1);"親メニューは、サブメニューの1つに付随するが、親ノードは、サブメニューのクリックを防止する。

私はいくつかのCSSをサブメニューにアクセスしようとしましたが、私は何の変化も見ませんでした。

<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Animated Menu Icon</title> 
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/AnimatedMenuIcon/css/normalize.css" /> 
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/AnimatedMenuIcon/css/demo.css" /> 
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/AnimatedMenuIcon/css/component.css" /> 
    <!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <script src="https://tympanus.net/Tutorials/AnimatedMenuIcon/js/segment.min.js"></script> 
    <script src="https://tympanus.net/Tutorials/AnimatedMenuIcon/js/ease.min.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <div class="content"> 
       <div class="device__screen"> 
        <div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: hidden"> 
         <svg width="1000px" height="1000px"> 
         <path id="pathA" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path> 
         <path id="pathB" d="M 300 500 L 700 500"></path> 
         <path id="pathC" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path> 
         </svg> 
         <button id="menu-icon-trigger" class="menu-icon-trigger"></button> 
        </div><!-- menu-icon-wrapper --> 

       </div><!-- /device-content --> 
     </div><!-- /content --> 
    </div><!-- /container --> 
    <div id="dummy" class="dummy"> 
     <div class="dummy__item" onclick="alert(1);">Click me</div> 
     <div class="dummy__item"></div> 
     <div class="dummy__item"></div> 
     <div class="dummy__item"></div> 
    </div><!-- /dummy --> 
    <script src="js/main.js"></script> 
</body> 

答えて

0

わからないが、あなたが見たい場合は、あなたのサブメニューが削除:

-webkit-transform: translate3d(-100%, 0, 0) translate3d(-2em, 0, 0) scale3d(0.5, 1, 1); 
 
transform: translate3d(-100%, 0, 0) translate3d(-2em, 0, 0) scale3d(0.5, 1, 1);

https://tympanus.net/Tutorials/AnimatedMenuIcon/css/demo.cssで、それは

に表示されます

+0

このようにしてコードのアニメーションは無効になり、... –