jQuery Rain“Animated Menu Icon”onclick无效

时间:2017-05-30 07:19:04

标签: javascript jquery html css menu

我使用JQuery Rain创建动画菜单但我无法在菜单项中添加onclick。 这对于菜单按钮和子菜单项来说是一个很漂亮的效果,

我想添加onclick =“alert(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>

1 个答案:

答案 0 :(得分:0)

不确定,但是如果你想看到你的子菜单删除:

&#13;
&#13;
-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);
&#13;
&#13;
&#13;

https://tympanus.net/Tutorials/AnimatedMenuIcon/css/demo.css中的

它似乎

enter image description here