Using JQuery Rain to create an animated menu, but encountering difficulty adding onclick functionality to menu items. The effect is visually appealing for both the menu button and sub-menu item.
Attempting to add onclick="alert(1);" to one of the sub-menus reveals that the parent node is preventing clicking on the sub-menu.
Modifying the CSS properties did not result in any changes that allowed access to the sub-menu.
<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>