我使用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>
答案 0 :(得分: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);
&#13;
https://tympanus.net/Tutorials/AnimatedMenuIcon/css/demo.css中的
它似乎