<div class="topnav__menu">
<button
class="
topnav__button topnav__button--has-arrow topnav__menu-button
"
type="button" id="hideselectOption"
>
<span class="topnav__button-label">Selection:</span>
<span class="topnav__button-title" style="text-transform: uppercase !important;">{{selection}}</span>
<span class="topnav__button-arrow"
><svg width="7px" height="5px">
<path
d="M0.280,0.282 C0.645,-0.084 1.238,-0.077 1.596,0.297 L3.504,2.310 L5.413,0.297 C5.770,-0.077 6.363,-0.084 6.728,0.282 C7.080,0.634 7.088,1.203 6.746,1.565 L3.504,5.007 L0.262,1.565 C-0.080,1.203 -0.072,0.634 0.280,0.282 Z"
/>
</svg>
</span>
</button>
<div class="topnav__menu-body" >
<span class="topnav__menu-item" ng-click="makeSelection('item1')">
<img src="public/assets/images/icons/item1.png" alt="" />
<span>Item 1</span>
</span>
<span class="topnav__menu-item" ng-click="makeSelection('item2')">
<img src="public/assets/images/icons/item2.png" alt="" />
<span>Item 2</span>
</span>
<span class="topnav__menu-item" ng-click="makeSelection('item3')">
<img src="public/assets/images/icons/item3.png" alt="" />
<span>Item 3</span>
</span>
<span class="topnav__menu-item" ng-click="makeSelection('item4')">
<img src="public/assets/images/icons/item4.png" alt="" />
<span>Item 4</span>
</span>
<span class="topnav__menu-item" ng-click="makeSelection('item5')">
<img src="public/assets/images/icons/item5.png" alt="" />
<span>Item 5</span>
</span>
</div>
<script>
$(function() {
$('.option--trigger--click .option__button').on('click', function(event) {
event.preventDefault();
const choices = $(this).closest('.option');
if (choices.is('.option--open')) {
choices.removeClass('option--open');
} else {
choices.addClass('option--open');
}
});
$(document).on('click', function (event) {
$('.option')
.not($(event.target).closest('.option'))
.removeClass('option--open');
});
});
$(function() {
$('.topnav__menu-button').on('click', function() {
$(this).closest('.topnav__menu').toggleClass('topnav__menu--open');
});
$(document).on('click', function (event) {
$('.topnav__menu')
.not($(event.target).closest('.topnav__menu'))
.removeClass('topnav__menu--open');
});
});
</script>