The customized menu options do not have any functionality when clicked

Question

The customized menu options do not have any functionality when clicked

I'm trying to achieve a menu design similar to iOS, but I'm facing two major issues. Firstly, clicking on the links is not possible due to the linear-gradient applied. Secondly, when I click on the down arrow to access more menu items, the gradient effect disappears. How can I resolve these issues and make the menu work correctly?

You can view my code on CodePen.

javascript jquery html css

Answer 1

Answer №1

To make the gradient interact with the underling elements, you can utilize pointer-events: none
If your gradient is absolutely positioned with top: 0, it will move along with scrolling. To address this issue, you can set the position of the gradient to fixed (though it will then stretch to fit the viewport). Alternatively, wrapping the list of options with another container will prevent the scroll from affecting the gradient's position. Here's an example:

<div class="select-wrap">
  <div class="select">
    ...
  </div>
</div>

.larger .select-wrap {
  width: 240px;
  height: 270px;
}

.larger .select-wrap .select {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow-y: hidden;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
  position: relative;
}

.larger .select-wrap::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(#80acdc, transparent, #80acdc);
  pointer-events: none; /* allowing mouse clicks to pass through */
}

document.querySelectorAll('.slide').forEach(function(next) {
  next.addEventListener('click', function() {
    var container = this.parentElement.querySelector('.select');
    sideScroll(container, 'bottom', 20, 25, 15);
  });
});

document.querySelectorAll('.slideBack').forEach(function(back) {
  back.addEventListener('click', function() {
    var container = this.parentElement.querySelector('.select');
    sideScroll(container, 'top', 20, 25, 15);
  });
});

function sideScroll(element, direction, speed, distance, step) {
  scrollAmount = 0;
  var slideTimer = setInterval(function() {
    if (direction == 'top') {
      element.scrollTop -= step;
    } else {
      element.scrollTop += step;
    }
    scrollAmount += step;
    if (scrollAmount >= distance) {
      window.clearInterval(slideTimer);
    }
  }, speed);
}

* {
  background: #80acdc;
}

.larger {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.larger .select-wrap {
  width: 240px;
  height: 270px;
}

.larger .select-wrap .select {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow-y: hidden;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
  position: relative;
}

.larger .select-wrap::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(#80acdc, transparent, #80acdc);
  pointer-events: none;
}

.larger .select a {
  color: white;
  margin: 3.5px 0;
}

.larger .select a:first-child {
  margin-top: 0;
}

.larger #slide {
  position: absolute;
  left: 47%;
  bottom: 38px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.larger #slideBack {
  position: absolute;
  top: 38px;
  left: 47%;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="larger">
        <div class="select-wrap">
          <div class="select">
            <a href="#">Action Lorem </a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
          </div>
        </div>
        <i id="slideBack" class="slideBack fas fa-chevron-up"></i>
        <i id="slide" class="slide fas fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div>

Answer 2

To make the gradient interact with the underling elements, you can utilize pointer-events: none
If your gradient is absolutely positioned with top: 0, it will move along with scrolling. To address this issue, you can set the position of the gradient to fixed (though it will then stretch to fit the viewport). Alternatively, wrapping the list of options with another container will prevent the scroll from affecting the gradient's position. Here's an example:

<div class="select-wrap">
  <div class="select">
    ...
  </div>
</div>

.larger .select-wrap {
  width: 240px;
  height: 270px;
}

.larger .select-wrap .select {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow-y: hidden;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
  position: relative;
}

.larger .select-wrap::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(#80acdc, transparent, #80acdc);
  pointer-events: none; /* allowing mouse clicks to pass through */
}

document.querySelectorAll('.slide').forEach(function(next) {
  next.addEventListener('click', function() {
    var container = this.parentElement.querySelector('.select');
    sideScroll(container, 'bottom', 20, 25, 15);
  });
});

document.querySelectorAll('.slideBack').forEach(function(back) {
  back.addEventListener('click', function() {
    var container = this.parentElement.querySelector('.select');
    sideScroll(container, 'top', 20, 25, 15);
  });
});

function sideScroll(element, direction, speed, distance, step) {
  scrollAmount = 0;
  var slideTimer = setInterval(function() {
    if (direction == 'top') {
      element.scrollTop -= step;
    } else {
      element.scrollTop += step;
    }
    scrollAmount += step;
    if (scrollAmount >= distance) {
      window.clearInterval(slideTimer);
    }
  }, speed);
}

* {
  background: #80acdc;
}

.larger {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.larger .select-wrap {
  width: 240px;
  height: 270px;
}

.larger .select-wrap .select {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow-y: hidden;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
  position: relative;
}

.larger .select-wrap::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(#80acdc, transparent, #80acdc);
  pointer-events: none;
}

.larger .select a {
  color: white;
  margin: 3.5px 0;
}

.larger .select a:first-child {
  margin-top: 0;
}

.larger #slide {
  position: absolute;
  left: 47%;
  bottom: 38px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.larger #slideBack {
  position: absolute;
  top: 38px;
  left: 47%;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="larger">
        <div class="select-wrap">
          <div class="select">
            <a href="#">Action Lorem </a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
          </div>
        </div>
        <i id="slideBack" class="slideBack fas fa-chevron-up"></i>
        <i id="slide" class="slide fas fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div>

The customized menu options do not have any functionality when clicked

Answer №1

Similar questions

I need help with customizing the progress bar in HTML and CSS

unable to choose the element

Utilize Node.js to dynamically load and utilize all modules within a designated folder

AngularJS - Directives cannot pass their class name into inner template

Is it possible to verify the accuracy of a Sizzle selector?

Ajax-powered Datatables

error encountered in quickSort algorithm

javascript managing conflicts within jQuery scripts

How to Retrieve the Value of an ASP TextBox Element with an HTMLEditorExtendor Connected, Through JavaScript

having trouble with if and else if statements functioning properly

JavaScript code for opening and closing buttons

What is the best way to implement slideToggle to switch between display:none and display:inline?

Tips for designing a hyperlink insertion modal while preserving text selection

Challenge involving flexbox and several squares, along with a @media adjustment for screens under 600px wide

Troubleshooting Problems with jQuery's .remove() Function

Iterate through the JSON response once the AJAX call is successful

What sets apart innerText from html?

Navigating the web page and locating the appropriate Xpath element to extract

Steps for creating a node.js and ejs file to deploy on 000webhost

Is there a way to implement full-page scrolling in Vue?