What is the best way to create a sliding <nav> effect when a <div> is clicked?

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!

javascriptjqueryhtmlcss

Answer №1

The easiest method is: 

$(".bt-menu").click(function(){  $("nav").slideToggle(); });

I have made changes to the code, you can verify if it works correctly. 

$(document).ready(function(){
  
$(".bt-menu").click(function(){  $("nav").slideToggle()); });


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<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>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
$(document).ready(function(){

$(".bt-menu").click(function(){  $("nav").slideToggle(); });

  });
</script>
    <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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JQuery AJAX to successfully retrieve data and then smoothly applying the fadeIn

Utilizing AJAX, I am loading survey content into a container on a webpage. As part of the transition, I have implemented a fadeOut effect on the container, followed by fadeIn once the content is loaded. This method functions correctly for pages 1-4; howeve ...

javascriptjqueryajaxfadein

A guide on accessing JavaScript files from the components directory in a React Native iOS application

I am encountering difficulty in accessing the components folder within my React Native Project on IOS. The error message I am receiving is: Unable to resolve module ./Login from ....../ReactNative/ReactNativeProject/components/App.js: Unable to find ...

javascriptiosnode.jsreact-native

Contrasting VSCode Live Server and Node Live Server

Recently delving into the world of JS, I've come across the need to set up a live server using npm. One popular extension in VSCode known as Live Server by Ritwick Dey caught my attention. I'm curious about the distinctions between utilizing this ...

javascriptnode.jsnpmvisual-studio-codevscode-extensions

Is there a way to make a text area box visible using JavaScript?

Currently, I am developing an automation script in Python using Selenium. My objective is to make a textarea box visible, as I need to insert some arguments into it. Here is the code snippet that I am utilizing: element = driver.find_element_by_id('g ...

javascriptpythonseleniumautomationcaptcha

Caution: Additional server attributes detected: style

Alert in my Next.js project, I encountered the following message: Notice: Server is sending additional attributes: style I am uncertain about the source of this warning and therefore unable to provide any code snippet. ...

javascripthtmlnext.jsjsx

Performing a single ajax call

I have implemented a button on my website that, when clicked, sends data to a PHP file using AJAX and returns the results. Below is the code I am currently using: My Objective : Upon the first click of the button, I aim to send the data to a PHP file v ...

phpjqueryajax

Delay in loading Jquery accordion due to value binding

I've noticed that my jquery accordion takes a significant amount of time to collapse when the page initially loads. After some investigation, I realized that the issue lies in the fact that there are numerous multiselect listboxes within the accordio ...

javascriptc#jqueryasp.net-mvclistbox

Utilizing Node.js and ExpressJS with the integration of external JavaScript files for enhanced functionality

Currently learning NodeJS and working on a basic "class" file that I have saved in an external JS file. How can I make this file accessible for all my routing files and other external JS files that I want to load? /classes/music/usermanager.js function U ...

javascriptnode.jsexpress

No acknowledgment from command

Why doesn't the bot respond when I run this command? There are no errors. Do I have the role that matches in r.id? client.on('message', async message => { // Check if the user has a role with an id if(message.author.bot) return; ...

javascriptnode.jsdiscorddiscord.js

Encountering a mysterious error while attempting to access and modify a value stored in a useState hook using the keydown

I've been attempting to create a simple animation on canvas using React.js, but I'm facing an issue with integrating my Keydown function with my useState. It seems that my useState value is not being defined properly, preventing me from changing ...

javascriptreactjsreact-hookshtml5-canvaskeydown

Having trouble populating a dropdown menu with states based on a selected country in real time

I'm attempting to create a dynamic dropdown where selecting a country will populate the states. I have all the necessary data stored in two tables, but I'm unsure how to proceed. While I can easily generate the initial list of countries, handling ...

javascriptphpmysql

Is there a method to update the res object following a couchbase DB call without encountering the error "Error: Can't set headers after they are sent"?

let express = require('express'); let searchRoute = express.Router(); searchRoute.get('/', function(req, res, next) { console.log('1'); databaseCall(function(error, result) { if (error) { res.sta ...

javascriptnode.jsasynchronous

Discovering feedback from JavaScript

I have been attempting to call JavaScript from a Visualforce page. The code snippet below shows a sample of the Visualforce page where I am trying to call a get method and am curious to see the response. Once I click on preview in the developer console, th ...

javascriptgetsalesforceapexvisualforce

Changing a JavaScript array by including a numerical value

Here is my original dataset... [{ month: 'Jan', cat: 'A', val: 20 },{ month: 'Jan', cat: 'B',' val: 5 },{ month: 'Jan', cat: &ap ...

javascriptunderscore.js

Is it possible to use styled-components to specifically style a child class within a component?

Hey there, I'm currently working with a mui Badge component and am trying to customize the appearance of the small circle. This is what I have so far: const BadgeStyled = styled(Badge)` & > .muibadge-badge: { background-color: #d3d4d7; ...

cssmaterial-uistyled-components

Display alert only when focus is lost (on blur) and a dropdown selection was not made

Utilizing Google Maps Places for autocompletion of my input, I am aiming to nudge the user towards selecting an address from the provided dropdowns in order to work with the chosen place. A challenge arises when considering enabling users to input address ...

javascriptgoogle-maps-api-3vue.js

Utilizing Stored Variables and Random Numbers in Selenium IDE

Can you explain how Selenium IDE handles stored variables (stored text) and random numbers? I've been trying to combine the two without much success. For example: <td>type<td> <td>css=input.some-text</td> <td>javascript ...

javascriptvariablesseleniumrandomselenium-ide

Guide for animating individual mapped elements in react-native?

After mapping an object array to create tag elements with details, I added an animation for the tags to zoom in on render. However, I wanted to take it further and animate each tag individually, sequentially one after the other. This appears to be a common ...

javascriptreactjsreact-nativereact-animated

Strange CSS/browser storage glitch

UPDATE: JUST REALIZED THIS ISSUE IS ONLY OCCURRING ON FIREFOX, NOT CHROME ANOTHER UPDATE: Oddly enough, this problem only occurs locally. When I push it to GitHub, everything works fine. So strange. I suppose that means it's not a major issue. On my ...

javascriptcssgoogle-chromefirefox

Is it possible to include a class in a 'label' element?

Forgive me if this is a simple question, but I'm curious - is it possible to add a class directly to a 'label' tag without needing to enclose it in a 'span' tag for styling? As I delve into "CSS: The Missing Manual," the book instr ...

cssclasslabelformsstyling