How do I prevent a fixed position <ul> from overlaying links which is preventing them from being clicked?

Question

I've coded out some buttons that display on the bottom right of our website on mobile and placed them with an <ul> element. To animate the buttons, I have translated each of the <li> elements, as soon as the code is executed, on the Y-axis so that they all line up together and only the last element can be seen. However, I've noticed that even though it's translated, the height of the <ul> remains the same size as it was before the jQuery was executed and it's preventing some links on the website from being clicked. I know that's probably confusing, so I created an easy example below to showcase the issue. If you notice, the link cannot be clicked above the buttons, even when they are out of the way.

 $(() => { let $menuToggleButton = $('.menu-toggle-button'); let $menuItems = $('.menu-item-button').closest('.menu-item'); let menuItemCount = $menuItems.length; hideButtons($menuItems, menuItemCount, $menuToggleButton); $('.menu-items').show(); $menuToggleButton.on('click', function(e) { e.preventDefault(); let active = $(this).hasClass('active'); if(active) { hideButtons($menuItems, menuItemCount, $(this)); } else { showButtons($menuItems, $(this)); } }); function hideButtons($menuItems, menuItemCount, $menuToggleButton) { let x = 0; for (let i = menuItemCount; i > 0; i--) { let $menuItem = $menuItems.eq(x); let offsetPercentage = `${i * 100}%`; $menuItem.css('transform', `translateY(${offsetPercentage})`); x++; } $menuToggleButton.removeClass('active'); } function showButtons($menuItems, $menuToggleButton) { $menuToggleButton.addClass('active'); $menuItems.each(function() { $(this).css('transform', 'translateY(0%)'); }); } });

 .sliding-pill-menu { position: fixed; right: 20px; bottom: 20px; font-size: 12px; z-index: 10000; } .menu-items { list-style: none; padding: 0; margin: 0; display: none; } .menu-item { padding: 5px 0; transition: all .4s ease-in-out; } .menu-item-button, .menu-toggle-button { display: inline-block; padding: 10px 20px; text-decoration: none; text-align: center; position: relative; bottom: 0; cursor: pointer; border-radius: 50px; background: #EC2127; color: #fff; font-weight: 500; font-size: inherit; min-width: 180px; width: 180px; white-space: nowrap; } .menu-item-button:hover, .menu-item-button:active, .menu-item-button:link, .menu-item-button:visited, .menu-toggle-button:hover, .menu-toggle-button:active, .menu-toggle-button:link, .menu-toggle-button:visited { color: #fff; } .menu-item-icon, .menu-toggle-icon { margin-right: 10px; } .underlay-btn { background: #000; color: #fff; display: flex; justify-content: center; align-items: center; height: 300px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="underlay-btn" href="#">Click Me Instead</a> <div class="sliding-pill-menu"> <ul class="menu-items"> <li class="menu-item"><a class="menu-item-button" href="tel:5555555555"><i class="menu-item-icon fa fa-mobile"></i>Call Now</a></li> <li class="menu-item"><a class="menu-item-button" href="sms:5555555555"><i class="menu-item-icon fa fa-sms"></i>Send Text</a></li> <li class="menu-item"><a class="menu-item-button" href="/order-by-date"><i class="menu-item-icon fa fa-calendar"></i>Check Availability</a></li> <li class="menu-item"><a class="menu-toggle-button" href="#"><i class="fa fa-plus menu-toggle-icon"></i>Get Started</a></li> </ul> </div>

How do I prevent the <ul> from blocking the links behind it? I've tried z-index, but I don't think it will work in this case since the app buttons need to remain above everything else.

Answer 1

A workaround would be to utilize the pointer-events CSS property to disallow pointer events for the containing .sliding-pill-menu element, and only allow them for the individual .menu-items .

Essentially you just need to add the following:

.sliding-pill-menu {  
  pointer-events: none;
}

.menu-item {
  pointer-events: all;
}

See the full working example below. In addition to the CSS properties above, I just added a click event for the .underlay-btn to toggle its background color to visually show the click is working.

 $(() => { let $menuToggleButton = $('.menu-toggle-button'); let $menuItems = $('.menu-item-button').closest('.menu-item'); let menuItemCount = $menuItems.length; let underlayBtn = $('.underlay-btn'); underlayBtn.on('click', function(e) { $(this).toggleClass('click-proof'); }); hideButtons($menuItems, menuItemCount, $menuToggleButton); $('.menu-items').show(); $menuToggleButton.on('click', function(e) { e.preventDefault(); let active = $(this).hasClass('active'); if(active) { hideButtons($menuItems, menuItemCount, $(this)); } else { showButtons($menuItems, $(this)); } }); function hideButtons($menuItems, menuItemCount, $menuToggleButton) { let x = 0; for (let i = menuItemCount; i > 0; i--) { let $menuItem = $menuItems.eq(x); let offsetPercentage = `${i * 100}%`; $menuItem.css('transform', `translateY(${offsetPercentage})`); x++; } $menuToggleButton.removeClass('active'); } function showButtons($menuItems, $menuToggleButton) { $menuToggleButton.addClass('active'); $menuItems.each(function() { $(this).css('transform', 'translateY(0%)'); }); } });

 .sliding-pill-menu { position: fixed; right: 20px; bottom: 20px; font-size: 12px; z-index: 10000; pointer-events: none; } .menu-items { list-style: none; padding: 0; margin: 0; display: none; } .menu-item { padding: 5px 0; transition: all .4s ease-in-out; pointer-events: all; } .menu-item-button, .menu-toggle-button { display: inline-block; padding: 10px 20px; text-decoration: none; text-align: center; position: relative; bottom: 0; cursor: pointer; border-radius: 50px; background: #EC2127; color: #fff; font-weight: 500; font-size: inherit; min-width: 180px; width: 180px; white-space: nowrap; } .menu-item-button:hover, .menu-item-button:active, .menu-item-button:link, .menu-item-button:visited, .menu-toggle-button:hover, .menu-toggle-button:active, .menu-toggle-button:link, .menu-toggle-button:visited { color: #fff; } .menu-item-icon, .menu-toggle-icon { margin-right: 10px; } .underlay-btn { background: #000; color: #fff; display: flex; justify-content: center; align-items: center; height: 300px; } .click-proof { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="underlay-btn" href="#">Click Me Instead</a> <div class="sliding-pill-menu"> <ul class="menu-items"> <li class="menu-item"><a class="menu-item-button" href="tel:5555555555"><i class="menu-item-icon fa fa-mobile"></i>Call Now</a></li> <li class="menu-item"><a class="menu-item-button" href="sms:5555555555"><i class="menu-item-icon fa fa-sms"></i>Send Text</a></li> <li class="menu-item"><a class="menu-item-button" href="/order-by-date"><i class="menu-item-icon fa fa-calendar"></i>Check Availability</a></li> <li class="menu-item"><a class="menu-toggle-button" href="#"><i class="fa fa-plus menu-toggle-icon"></i>Get Started</a></li> </ul> </div>