Hello! I am looking for a solution that will cause the navigation contents to slide out from the left when the div class "bt-menu" is clicked. It should also slide back in to the left either when the div is clicked again or when anywhere outside of the navigation area is clicked.
Within the main navigation, there are submenus as shown in the code below. This means I need to be able to click on an LI element with the class "submenu" and have the list inside it slide down from underneath.
I apologize, but I'm having trouble finding how to display the CSS I currently have.
<header>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-menu"></span>Menu</a>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="submenu" >
<a href="#">Nielsen Products<span class="icon-arrow-down2"></span><span class="caret"></span></a>
<ul class="children">
<li><a href="#">Exterior Cleaning<span class="icon-dot-single"></span></a></li>
<li><a href="#">Interior Cleaning<span class="icon-dot-single"></span></a></li>
<li><a href="#">Odour Control & Air Fresheners<span class="icon-dot-single"></span></a></li>
<li><a href="#">Exterior Finishes<span class="icon-dot-single"></span></a></li>
<li><a href="#">Dressings<span class="icon-dot-single"></span></a></li>
<li><a href="#">Glass Cleaning<span class="icon-dot-single"></span></a></li>
<li><a href="#">Workshop Maintenance<span class="icon-dot-single"></span></a></li>
<li><a href="#">Janitorial<span class="icon-dot-single"></span></a></li>
<li><a href="#">TDS & SDS INFO<span class="icon-dot-single"></span></a></li>
</ul>
</li>
<li><a href="#">Nielsen Catalogue</a></li>
<li class="submenu">
<a href="#">Equipment/Tools/Consumables<span class="icon-arrow-down2"></span><span class="caret"></span></a>
<ul class="children">
<li><a href="#">Valeting, Brushes and Equipment<span class="icon-dot-single"></span></a></li>
<li><a href="#">Tools & Equipment<span class="icon-dot-single"></span></a></li>
<li><a href="#">Workshop Consumables<span class="icon-dot-single"></span></a></li>
<li><a href="#">AdBlue<span class="icon-dot-single"></span></a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Photo Gallery</a></li>
</ul>
</nav>
</header>
If you could assist, I would greatly appreciate it. Thank you!