When the user selects one of the dropdowns links it needs to take them to a webpage I need to link the li items 1-4 to a webpage im stuck need help creating the links thanks in advance for your help. Below I have provided the code HTML and CSS and JS code. Thanks again. (I am adding more text here in order to submit this question so be sure to ignore this part)
'use strict';
(function() {
var _btns = document.querySelectorAll('.btn'),
_eachBtn = function(callback) {
Array.prototype.forEach.call(_btns, function(elem) {
callback.call(this, elem);
});
},
_initListener = function(e) {
e.preventDefault();
e.stopPropagation();
_eachBtn(function(btn) {
btn.classList.remove('dropdown-open')
});
this.classList.toggle('dropdown-open');
},
_hideAll = function() {
_eachBtn(function(btn) {
btn.classList.remove('dropdown-open');
});
};
_eachBtn(function(btn) {
btn.addEventListener('touchend', function(e) {
_initListener.call(this, e);
});
btn.addEventListener('click', function(e) {
_initListener.call(this, e);
});
});
document.addEventListener('touchend', function() {
_hideAll();
});
document.addEventListener('click', function() {
_hideAll();
});
})();.dropdown {
position: relative;
margin: 0 auto;
width: 15em;
}
.dropdown > .outer-list {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
opacity: 0;
visibility: hidden;
transition: all 0.35s ease;
}
.dropdown > .outer-list.top {
align-items: flex-start;
transform-origin: 50% 0;
}
.dropdown > .outer-list.left { justify-content: flex-start; }
.dropdown > .outer-list.bottom {
align-items: flex-end;
transform-origin: 50% 100%;
}
.dropdown > .outer-list.right { justify-content: flex-end; }
.dropdown > .outer-list > ul {
list-style: none;
padding: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
border-radius: .2em;
}
.dropdown > .outer-list > ul li {
padding: .25em 3em;
margin: .25em;
width: 100%;
cursor: pointer;
transition: background 0.35s ease;
}
.dropdown > .outer-list > ul li:hover { background: rgba(0, 0, 0, 0.07); }
```
```
.btn {
position: relative;
display: block;
width: 100%;
text-align: center;
background: #03A9F4;
color: #fff;
padding: 1em;
border-radius: .15em;
cursor: pointer;
transition: all 0.35s ease;
overflow: hidden;
}
.btn:after {
content: '';
position: absolute;
bottom: -50%;
right: -50%;
z-index: 1;
overflow: hidden;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
transition: all 0.35s ease;
}
.btn:active:after,
.btn.dropdown-open:after {
width: 200%;
height: 200%;
}
.btn:hover { box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.1); }
.btn.dropdown-open + .outer-list {
transform: scale(1);
opacity: 1;
visibility: visible;
}<div class="dropdown">
<a href="#" class="btn">
Dropdown
</a>
<div class="outer-list">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</div>
</div>