I have a side menu mobile-navigation. I can toggle it between display block and none with the "button" --> hamburger-menu-div. But this only works, as long as I remove the last Javascript to also hide it when I click outside mobile-navigation. So at the moment, I can open it via the button, but have to close it via clicking out of the menu or button. Toggle doesn´t work.
Can I add an id to the last Javascript so that if I click on the menu AND on the button that nothing is triggered? Because I think the two scripts "block" each other what makes sense to me as the button tries to show the menu and the other script tries to hide it when I click out.
Hope u can understand and thanks for your help!
//Toggle nav menu to show and hide
document.getElementById("hamburger-menu-div").addEventListener("click", function() {
var x = document.getElementById("mobile-navigation");
if (x.style.display === "block") {
x.style.display = "none";
}
else
{
x.style.display = "block";
}
});
//Hide it when clicked outside
document.addEventListener('mouseup', function(e) {
var container = document.getElementById('mobile-navigation');
if (!container.contains(e.target)) {
container.style.display = 'none';
}
});.hamburger-menu-div {
background-color: lightblue;
width: 250px;
height: 50px;
}
.mobile-navigation {
background-color: lightgreen;
width: 250px;
display: none;
}<div id="hamburger-menu-div" class="hamburger-menu-div">
BUTTON
</div>
<div id="mobile-navigation" class="mobile-navigation">
<p>- Navigationpoint 1</p>
<p>- Navigationpoint 2</p>
<p>- Navigationpoint 3</p>
<p>- Navigationpoint 4</p>
<p>- Navigationpoint 5</p>
</div>Adding the whole code:
//Toggle nav menu to show and hide
document.getElementById('hamburger-menu-div').addEventListener('click', e => e.currentTarget.nextElementSibling.classList.toggle('show'));
//Hide it when clicked outside
document.addEventListener('click', e => {
if (!e.target.classList.contains('hamburger-menu-div'))
document.getElementById('mobile-navigation').classList.remove('show')
});.hamburger-menu-div {
background-color: lightblue;
width: 250px;
height: 50px;
}
.mobile-navigation {
background-color: lightgreen;
width: 250px;
display: none;
position: fixed;
right: 0;
top: 0;
}
.mobile-navigation.show {
display: block
}<!--THIS IS THE MENU BUTTON/LIST POINT-->
<section class="elementor-section elementor-inner-section elementor-element elementor-element-571b5dd elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="571b5dd" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="aux-parallax-section elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bc658a3" data-id="bc658a3" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-b81b33e hamburger-menu-div elementor-widget__width-initial elementor-view-default elementor-widget elementor-widget-icon" data-id="b81b33e" data-element_type="widget" id="hamburger-menu-div" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<i aria-hidden="true" class="auxicon auxicon-menu-1">This div is the button</i> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--PLEASE CONSIDER THAT OTHER ELEMENTS ARE BETWEEN THE BUTTON AND THE NAV MENU. THE NAV MENU IS INSERTED AS A COMPLETE OWN DIV. IT ISN´T A CHILD OR SIBLING OR WHATEVER OF THE MENU BUTTON/LIST-->
<section class="elementor-section elementor-top-section elementor-element elementor-element-852919c mobile-navigation elementor-section-boxed elementor-section-height-default show-nav" data-id="852919c" data-element_type="section" id="mobile-navigation"
data-settings="{"background_background":"classic"}">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="aux-parallax-section elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-10eb682" data-id="10eb682" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-6910634 title-nav elementor-widget elementor-widget-heading" data-id="6910634" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<span class="elementor-heading-title elementor-size-default">Startseite</span> </div>
</div>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-4a45e9c elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4a45e9c" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-4d35815" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
data-id="4d35815" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-ac8c411 elementor-widget elementor-widget-heading" data-id="ac8c411" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-home-house-streamline"></i> Startseite</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="elementor-element elementor-element-0e2ed13 title-nav elementor-widget elementor-widget-heading" data-id="0e2ed13" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<span class="elementor-heading-title elementor-size-default">Leistungen</span> </div>
</div>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-ee57cd6 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ee57cd6" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-5f47bf7" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
data-id="5f47bf7" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-258d55c elementor-widget elementor-widget-heading" data-id="258d55c" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-earth-globe-streamline"></i> Domain</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-0982174 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0982174" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-123693d" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
data-id="123693d" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-67c041d elementor-widget elementor-widget-heading" data-id="67c041d" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-dashboard-1"></i> Hosting</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-5c88b0e elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5c88b0e" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-0f53969" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
data-id="0f53969" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-39b7fe0 elementor-widget elementor-widget-heading" data-id="39b7fe0" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-mac"></i> Webseitenerstellung</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-7628bed elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="7628bed" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-39c0f32" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
data-id="39c0f32" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-5de4c14 elementor-widget elementor-widget-heading" data-id="5de4c14" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-repair"></i> Wartung</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="elementor-element elementor-element-cd18a80 title-nav elementor-widget elementor-widget-heading" data-id="cd18a80" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<span class="elementor-heading-title elementor-size-default">Über mich</span> </div>
</div>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-468742a elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="468742a" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-7a07457" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
data-id="7a07457" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-dc04573 elementor-widget elementor-widget-heading" data-id="dc04573" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-profile-1"></i> Über mich</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="elementor-element elementor-element-afffe9d title-nav elementor-widget elementor-widget-heading" data-id="afffe9d" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<span class="elementor-heading-title elementor-size-default">Kontakt</span> </div>
</div>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-5fabf81 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5fabf81" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bba16fc" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
data-id="bba16fc" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-4e40e5a elementor-widget elementor-widget-heading" data-id="4e40e5a" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-resend"></i> Kontakt</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</section>
