Tips for automatically closing the Toggle Navigation feature in Vue JS when a user clicks outside of the navigation container

Is there a way to close the toggled navigation menu automatically when the user clicks outside of the navigation container? I have implemented two ul menus inside the navigation menu and would like the subNavActive, safNavAcitve, and repNavUl variables to be set to false when the user clicks outside of the Toggled Nav Container. new Vue({ el: '#app',

      data: {
        visible: false,
        home: true,
        show: false,
        active: false,
        subNavActive: false,
        safNavShow: false,
        repNavUl: false,
        admNavShow: false,
        rotateDropDown: false
      },
      methods: {}
    });

HTML CODE BELOW

 <div class="container">
                <!-- Main nav starts here  -->
                <!-- main nav vue transition below -->
                <transition name="slide-fade">
                    <!-- vue animation if/else below  -->
                    <nav class="main-nav" v-if="show">
                        <!-- Main nav header and title  -->
                        <div class="main-nav-header">
                            <h2>Hello User</h2>
                            <h3>Welcome Back</h3>
                        </div>
                        <div class="main-nav-container">
                            <!-- Main navigation ul list below  -->
                            <ul class="main-nav-ul">
                                <li>
                                    <li class="split-li">
                                        <span>
                                            <i class="fas fa-calendar-alt"></i>
                                        </span>
                                        MY SCHEDULE & BIDDING
                                        <a class="main-nav-spans" href="#">
                                            <i class="fas fa-angle-right"></i>
                                        </a>
                                    </li>
                                </li>

                                <li>
                                    <li class="split-li">
                                        <span>
                                            <i class="fas fa-handshake"></i>
                                        </span>
                                        SAFETY
                                        <a class="main-nav-spans" @click="safNavShow = !safNavShow" href="#">
                                            <i class="fas fa-angle-right"></i>
                                        </a>
                                    </li>
                                    <!-- Sub nav transition below -->
                                    <transition name="slide-right">
                                        <!-- vue animation if/else below  -->
                                        <div class="sub-nav saf-nav-toggle" v-if="safNavShow">
                                            <div class="sub-nav-header ">
                                                <h3>
                                                    <li class="split-li">
                                                        <span>
                                                            SAFETY
                                                        </span>

                                                        <a @click="safNavShow = !safNavShow" class="sub-nav-icons" href="#">
                                                            <i class="fas fa-times"></i>
                                                        </a>
                                                    </li>

                                                </h3>
                                            </div>
                                            <ul class="sub-nav-menu">
                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            Reporting
                                                        </span>

                                                        <a @click="repNavUl =!repNavUl, rotateDropDown =!rotateDropDown" v-bind:class="{ rotateDropDown: rotateDropDown }" class="main-nav-spans"
                                                            href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>


                                                    <transition name="rep-nav">
                                                        <ul class="sub-nav-ul" v-if="repNavUl">
                                                            <li>
                                                                <a href="#">I-21 Injury Reporting</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">ASAP Reporting</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">General ASAP Information</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Flight Attendent Incident Report</a>
                                                            </li>
                                                        </ul>
                                                    </transition>
                                                </li>

                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            Agriculture & Customs
                                                        </span>
                                                        <a class="main-nav-spans" href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="sub-first-nav-li">
                                                        <a href="#">Known Crewmember</a>
                                                    </li>
                                                </li>

                                                <li>
                                                    <li class="sub-first-nav-li">
                                                        <a href="#"> Products Safety Data Search</a>
                                                    </li>

                                                </li>
                                            </ul>
                                        </div>
                                    </transition>
                                </li>
                                <li>
                                    <li class="split-li no-arrow-li">
                                        <span>
                                            <i class="fas fa-users"></i>
                                        </span>
                                        <a href="#">TRAINING</a>
                                    </li>
                                </li>
                                <li>
                                    <li class="split-li  ">
                                        <span>
                                            <i class="fas fa-user"></i>
                                        </span>
                                        ADMINSTRATION
                                        <a class="main-nav-spans" @click="admNavShow = !admNavShow" href="#">
                                            <i class="fas fa-angle-right"></i>
                                        </a>
                                    </li>
                                    <transition name="slide-right">
                                        <div class="sub-nav admin-nav-toggle" v-if="admNavShow">
                                            <div class="sub-nav-header">
                                                <h3>
                                                    <li class="split-li">
                                                        <span>
                                                            ADMINSTRATION
                                                        </span>

                                                        <a @click="admNavShow = !admNavShow" class="sub-nav-icons" href="#">
                                                            <i class="fas fa-times"></i>
                                                        </a>
                                                    </li>

                                                </h3>
                                            </div>
                                            <ul>

                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            OJI and Leaves
                                                        </span>
                                                        <a class="main-nav-spans" href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            Pay and Benefits
                                                        </span>
                                                        <a class="main-nav-spans" href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            Performace
                                                        </span>
                                                        <a class="main-nav-spans" href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="sub-first-nav-li">
                                                        <a href="#">Inflight Resource Directory</a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            Mobile and Web
                                                        </span>
                                                        <a class="main-nav-spans" href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="sub-first-nav-li">
                                                        <a href="#">AFA</a>
                                                    </li>
                                                </li>

                                            </ul>
                                        </div>
                                    </transition>
                                </li>
                                <li>
                                    <li class="split-li ">
                                        <span>
                                            <i class="fas fa-utensils"></i>
                                            CATERING & BRAND
                                        </span>
                                        <a class="main-nav-spans" href="#">

                                            <i class="fas fa-angle-right"></i>

                                        </a>
                                    </li>
                                </li>
                                <li>
                                    <li class="split-li no-arrow-li">
                                        <span>
                                            <i class="fas fa-bed"></i>
                                        </span>
                                        <a href="#">HOTELS</a>
                                    </li>

                                </li>
                                <li>
                                    <li class="split-li no-arrow-li">
                                        <span>
                                            <i class="fas fa-home"></i>
                                        </span>
                                        <a href="#">MY BASE</a>
                                    </li>

                                </li>
                                <li>
                                    <li class="split-li no-arrow-li">
                                        <span>
                                            <i class="fas fa-certificate"></i>
                                        </span>
                                        <a href="#">RECOGNITION</a>
                                    </li>

                                </li>
                                <li>
                                    <li class="split-li no-arrow-li">
                                        <span>
                                            <i class="fas fa-male"></i>
                                        </span>
                                        <a href="#">MY LEADERSHIP TEAM</a>
                                    </li>

                                </li>
                            </ul>
                        </div>

                    </nav>
                </transition>
            </div>
javascriptvue.jsvuejs2vue-component

Answer №1

Ever tried implementing the Vue-Clickaway functionality? Check it out here: https://github.com/simplesmiler/vue-clickaway

This is how you can use the solution:

import { mixin as clickaway } from 'vue-clickaway';

export default {
  mixins: [ clickaway ],
  template: '<p v-on-clickaway="away">Click away</p>',
  methods: {
    away: function() {
      console.log('clicked away');
    },
  },
};

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

Struggling with creating and exporting TailwindCSS and NextJS

I'm encountering challenges in constructing and exporting my TailwindCSS and NextJS project. While everything works smoothly when running `npm run dev` with all Tailwind classes functioning properly, I face an issue when executing `npm run build && np ...

javascriptreactjsnpmnext.jstailwind-css

Attaching event listener using DOM ref in Vue3 onMount

I am working with a Vue3 component that looks like this: <template> <div class="list-cell"> <div v-for="(value, index) in lines" ref="items" :key="index" ...

vue.jsdomvuejs3

Insert a CSS Class into an HTML div element with JQuery

I'm faced with a bit of a challenge. Here's the scenario: <div class="portItem"></div> <div class="portItem"></div> <div class="portItem"></div> <div class="p ...

javascriptjquerycssclassinsertafter

Passing Vue props in Laravel 5.6: How to effortlessly share data

Struggling to pass 2 parameters as props from a blade template, but the eventId is consistently showing up as undefined in the Vue template. Check out my Controller Code below: public function index(Request $request, $eventId) { return view('bac ...

phplaravelvue.js

How can I invoke a function within a directive-generated HTML element's scope?

I created a custom directive that utilizes element.html() to set the HTML content. Within this HTML code, I would like to be able to invoke functions from the scope where the directive is being used. Here's an example: app.directive('myDirective ...

javascripthtmlangularjs

Fetch information from MySQL, create a new row for each data entry

Currently, I am working on a project for my school that involves retrieving student works from a database. For the homepage of my project, I have set up 10 divs to hold the data returned from a query. The reason I preset these divs is because I only need ...

javascriptphpjqueryhtmlmysql

I'm encountering an issue where the same id is being passed to every function when I transfer it to the function parameter in a v-for cycle. What steps can I

When I pass the id parameter to the submitOrder function within a v-for loop, each function call with that parameter (id) ends up being the same every time. I'm puzzled as to why this is happening. <div v-for="order in orders"> <button ...

vue.js

The Firebase signInWithPopup functionality suddenly shuts down in a Next.js project

Incorporating the signInWithPopup function for signing in has been successful during the development stage on my local server. const firebaseAuth = getAuth(app); const provider = new GoogleAuthProvider(); const [{ user, cartShow, cartItems }, dispatc ...

javascriptreactjsfirebasenext.jsfirebase-authentication

Guidelines for setting up Kendo notifications using an angularjs service

I have successfully defined the Kendo notification in my Angular service. However, when I try to use it with the line uiService.notify.error("You missed some required fields.");, I am getting an error that says "Cannot read property 'show' of nul ...

javascriptangularjskendo-ui

Using Javascript to extract elements from JSON objects

This is the output I receive after executing a script. { "log": { "entries": [{ "startedDateTime": "2020-12-01T08:45:30.123Z", "time": 50, "request": { "method": "GET", ...

javascriptjson

You cannot call this expression. The data type 'Boolean' does not have any callable signatures

As I delve into learning a new set of technologies, encountering new errors is inevitable. However, there is one particular type of error that keeps cropping up, making me question if I am approaching things correctly. For instance, I consistently face t ...

typescriptvue.jsnuxt.js

Utilize ngx-filter-pipe to Streamline Filtering of Multiple Values

Need assistance with filtering an array using ngx-filter-pipe. I have managed to filter based on a single value condition, but I am unsure how to filter based on multiple values in an array. Any guidance would be appreciated. Angular <input type="text ...

javascriptangulartypescript

Having issues with Angular http.post not sending data when using subscribe

I'm currently facing an issue with sending data to my API using post.subscribe. Despite the fact that no errors are being thrown, the data is not being sent successfully. It's important to note that the API itself is functioning perfectly. Belo ...

javascriptangularhttpobservable

The image file that was uploaded from a React Native iOS application to Azure Blob Storage appears to be corrupted or incomplete as it is not

Struggling to develop a feature in a React Native mobile app where users can upload and crop their profile picture, then store it in Azure blob storage. I encountered difficulty with implementing react-native-fs as many resources recommended it, but I kep ...

javascriptreact-nativeazureazure-blob-storagejpeg

Utilizing props to transfer data between components in ReactJS

I have a React application where I am binding text values when a specific div is clicked. However, I am now faced with the challenge of passing these text values to another component using props. This is what my code looks like: class PostOptionBar exten ...

javascriptreactjscomponents

Error message appears: "Unable to access 'upgrade' property of undefined" upon launching Vue application

Everything was running smoothly with my project for a few months. I could easily execute npm run serve without any issues, even when switching networks. But now, no matter what I do, I can't seem to get the server to start again. The error message I&a ...

vue.jsnpmvuejs2webpack-dev-servervue-cli-3

ng-grid automatically resizing columns based on content width

I am currently utilizing AngularJS ng-grid and endeavoring to accomplish the following tasks: 1. Adjust column width dynamically based on the content within each column. 2. Automatically resize the last column to fill the remaining space when hiding column ...

javascriptangularjs

Discovering the automatically generated routes in Nuxtjs

Can I access the route list created by Nuxt.js based on pages folder items? The issue is that I am unsure of the exact route name generated for each component. $router.push({name: 'no-idea-what-the-route-name-is', query: { id: data.id } }) This ...

vue.jsnuxt.js

After performing an action with Redux, the error message ""Cannot access properties of 'undefined'" is displayed

I am currently developing a Shopping List App using React/Redux. I am facing issues with removing items from a list. When I trigger the 'removeItem' action, the page no longer recognizes the object that represents the list (which was originally s ...

javascriptreactjslistreact-redux

Images not showing in Vue.js

I have been working on setting up a carousel using bootstrap-vue. It is being generated dynamically through an array containing three objects with keys such as id, caption, text, and image path. The issue I am facing now is that while the caption and text ...

javascripttwitter-bootstrapvue.jsbootstrap-4bootstrap-vue