user9389990
Reputation:
How to close Toggle Navigation when users clicks outside the nav container in Vue JS
So I have a toggled navigation menu and inside that menu and I have another 2 ul menus. I want to implement a feature so If user clicks out of any navigation container toggle the navigation to close it self rather then clicking on the close button. I want to make subNavActive, safNavAcitve and repNavUl = false again when the user clicks out 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>
Upvotes: 3
Views: 585
Answers (1)
aks
Reputation: 9491
Tried using Vue-Clickaway?
https://github.com/simplesmiler/vue-clickaway
The solution can look something like this.
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');
},
},
};
Upvotes: 2
Related Questions
- Close navigation drawer after click on item?
- Closing menu on click in Vue
- Closing a Vue.js component on click
- how to hide dropdown menu if we click outside the menu in vuejs
- Vue.js Accordion should not close if another accordion item is clicked
- How to close li tag when clicked outside in Vuejs?
- Is there a way to close a vue component by clicking outside of it?
- How to hide the Sidebar Nav Menu when a User clicks outside of it using Vue js?
- Vue JS: Open Menu Component with Button, Close with Click Outside of Menu
- Hiding an element after clicking outside in vue 2