<ul class="nav_menu">
<li class="nav_list nav_list_menu" onclick="myFunction()">
<a href="#!" class="nav_link">
<span>About Us</span>
<ion-icon name="chevron-down-outline"></ion-icon>
</a>
<div class="dropdown">
<div class="dropdown-inner">
<div class="dropdown-items active">
<div class="item-list">
<div id="navbar-close-item" onclick="closeNavbarFunction()">
<ion-icon name="close-circle-outline"></ion-icon>
</div>
<div class="sub-navbar-items">
<h4>About Us</h4>
<div class="d-flex justify-context-between about-description">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iusto rerum velit praesentium, illum doloremque culpa
consequuntur, nobis voluptate magni nihil laudantium?
</p>
<div class="navbar-sub-links">
<ul>
<li>
<a href="../about.html"> Vision </a>
</li>
<li>Mission</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div class="nav-bar-inner-description-img">
<img
src="../assets/about-us-header.jpg"
alt="about"
width="100%"
/>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav_list nav_list_menu">
<a href="#!" class="nav_link">
<span>Purpose</span>
<ion-icon name="chevron-down-outline"></ion-icon>
</a>
<div class="dropdown">
<div class="dropdown-inner">
<div class="dropdown-items active">
<div class="item-list">
<div class="sub-navbar-items">
<h4>PURPOSE</h4>
<div class="d-flex justify-context-between about-description">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iusto rerum velit praesentium, illum doloremque culpa
consequuntur, nobis voluptate magni nihil laudantium?
</p>
<div class="navbar-sub-links">
<ul>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
</ul>
</div>
</div>
</div>
<div class="nav-bar-inner-description-img">
<img
src="../assets/about-us-header.jpg"
alt="about"
width="100%"
/>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav_list nav_list_menu">
<a href="#!" class="nav_link">
<span>Menu</span>
<ion-icon name="chevron-down-outline"></ion-icon>
</a>
<div class="dropdown">
<div class="dropdown-inner">
<div class="dropdown-items active">
<div class="item-list">
<div class="sub-navbar-items">
<h4>Menu</h4>
<div class="d-flex justify-context-between about-description">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iusto rerum velit praesentium, illum doloremque culpa
consequuntur, nobis voluptate magni nihil laudantium?
</p>
<div class="navbar-sub-links">
<ul>
<li>COOKIES</li>
<li>BROWNIES</li>
<li>BREAD</li>
<li>CAKES</li>
</ul>
</div>
</div>
</div>
<div class="nav-bar-inner-description-img">
<img
src="../assets/about-us-header.jpg"
alt="about"
width="100%"
/>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav_list">
<a href="#!" class="nav_link">
<span>Care</span>
</a>
</li>
<li class="nav_list">
<a href="#!" class="nav_link">
<span>Partners</span>
</a>
</li>
<li class="nav_list">
<a href="#!" class="nav_link">
<ion-icon
name="person-outline"
style="width: 30px; height: 20px; font-weight: bold; margin-top: 6px"
></ion-icon>
<ion-icon
name="bag-outline"
style="width: 30px; height: 20px; font-weight: bold; margin-top: 6px"
></ion-icon>
<span class="add-to-add-number">1</span>
</a>
</li>
</ul>
let navbarShow = document.getElementsByClassName(".nav_list_menu");
let item = false;
function myFunction() {
document.getElementsByClassName("dropdown")[0].style.display = "block";
item = true;
}
function closeNavbarFunction() {
document.getElementsByClassName("dropdown")[0].style.display = "none";
item = false;
}
Problem – When I click into the about us section, it will show a mega item, but when I try to click on the close button inside the mega items top left, it’s not working. I meant to say it’s converting display = none
I think I am close to solution but it’s now working i don’t know why i can’t translate inline css to block to none
>Solution :
#navbar-close-item is a child of .nav_list_menu so a click on #navbar-close-item is also a click on .nav_list_menu.
Move the onclick="myFunction()" to the <a> tag. EG:
let navbarShow = document.getElementsByClassName(".nav_list_menu");
let item = false;
function myFunction() {
document.getElementsByClassName("dropdown")[0].style.display = "block";
item = true;
}
function closeNavbarFunction() {
document.getElementsByClassName("dropdown")[0].style.display = "none";
item = false;
}<ul class="nav_menu">
<li class="nav_list nav_list_menu">
<a href="#!" class="nav_link" onclick="myFunction()">
<span>About Us</span>
<ion-icon name="chevron-down-outline"></ion-icon>
</a>
<div class="dropdown">
<div class="dropdown-inner">
<div class="dropdown-items active">
<div class="item-list">
<div id="navbar-close-item" onclick="closeNavbarFunction()">
<ion-icon name="close-circle-outline">CLOSE</ion-icon>
</div>
<div class="sub-navbar-items">
<h4>About Us</h4>
<div class="d-flex justify-context-between about-description">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iusto rerum velit praesentium, illum doloremque culpa
consequuntur, nobis voluptate magni nihil laudantium?
</p>
<div class="navbar-sub-links">
<ul>
<li>
<a href="../about.html"> Vision </a>
</li>
<li>Mission</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div class="nav-bar-inner-description-img">
<img
src="../assets/about-us-header.jpg"
alt="about"
width="100%"
/>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav_list nav_list_menu">
<a href="#!" class="nav_link">
<span>Purpose</span>
<ion-icon name="chevron-down-outline"></ion-icon>
</a>
<div class="dropdown">
<div class="dropdown-inner">
<div class="dropdown-items active">
<div class="item-list">
<div class="sub-navbar-items">
<h4>PURPOSE</h4>
<div class="d-flex justify-context-between about-description">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iusto rerum velit praesentium, illum doloremque culpa
consequuntur, nobis voluptate magni nihil laudantium?
</p>
<div class="navbar-sub-links">
<ul>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
</ul>
</div>
</div>
</div>
<div class="nav-bar-inner-description-img">
<img
src="../assets/about-us-header.jpg"
alt="about"
width="100%"
/>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav_list nav_list_menu">
<a href="#!" class="nav_link">
<span>Menu</span>
<ion-icon name="chevron-down-outline"></ion-icon>
</a>
<div class="dropdown">
<div class="dropdown-inner">
<div class="dropdown-items active">
<div class="item-list">
<div class="sub-navbar-items">
<h4>Menu</h4>
<div class="d-flex justify-context-between about-description">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iusto rerum velit praesentium, illum doloremque culpa
consequuntur, nobis voluptate magni nihil laudantium?
</p>
<div class="navbar-sub-links">
<ul>
<li>COOKIES</li>
<li>BROWNIES</li>
<li>BREAD</li>
<li>CAKES</li>
</ul>
</div>
</div>
</div>
<div class="nav-bar-inner-description-img">
<img
src="../assets/about-us-header.jpg"
alt="about"
width="100%"
/>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav_list">
<a href="#!" class="nav_link">
<span>Care</span>
</a>
</li>
<li class="nav_list">
<a href="#!" class="nav_link">
<span>Partners</span>
</a>
</li>
<li class="nav_list">
<a href="#!" class="nav_link">
<ion-icon
name="person-outline"
style="width: 30px; height: 20px; font-weight: bold; margin-top: 6px"
></ion-icon>
<ion-icon
name="bag-outline"
style="width: 30px; height: 20px; font-weight: bold; margin-top: 6px"
></ion-icon>
<span class="add-to-add-number">1</span>
</a>
</li>
</ul>