I have designed a side nav for a website. How can I add a class on click of a nav item and remove it from the previous nav item?
I have tried this solution right here: https://codepen.io/8eni/pen/MaGVrq
I have also tried a bit of jQuery.
Here is my code:
<ul class="side_menu" id="sideMenu">
<li class="list_header">
<p class="list_p">REVIEWS</p>
<ul class="sub_list">
<li class="sub_list_item" style="padding-top: 0px !important;">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-layer-group padding_right"></i> All Reviews
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-thumbs-up padding_right"></i> Best Albums
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-thumbs-down padding_right"></i> Worst Albums
</a>
</li>
</ul>
</li>
<li class="list_header">
<p class="list_p">GENRES</p>
<ul class="sub_list">
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i> Dub
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i> Electronica
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i> Grundge
</a>
</li>
</ul>
</li>
</ul>
I want a class to be added to the particular item clicked by a user. Once another item is clicked, the previous item gets the class removed.
Here's a pure JavaScript way to do it (no dependencies). I prevented the default link behaviors for the sake of the demo.
const listItems = document.querySelectorAll('.sub_list_item');
function setActiveClass() {
if (document.querySelector('.sub_list_item.active') != null) {
document.querySelector('.sub_list_item.active').classList.remove('active');
}
this.classList.add('active');
}
listItems.forEach(item => {
item.addEventListener('click', setActiveClass);
});
// DEMO ONLY — REMOVE
const listLinks = document.querySelectorAll('.sub_list_link');
listLinks.forEach(link => {
link.addEventListener('click', e => e.preventDefault());
});
.sub_list_item.active {
background-color: yellow;
}
<ul class="side_menu" id="sideMenu">
<li class="list_header">
<p class="list_p">REVIEWS</p>
<ul class="sub_list">
<li class="sub_list_item" style="padding-top: 0px !important;">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-layer-group padding_right"></i>
All Reviews
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-thumbs-up padding_right"></i>
Best Albums
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-thumbs-down padding_right"></i>
Worst Albums
</a>
</li>
</ul>
</li>
<li class="list_header">
<p class="list_p">GENRES</p>
<ul class="sub_list">
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i>
Dub
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i>
Electronica
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i>
Grundge
</a>
</li>
</ul>
</li>
</ul>
jsFiddle
Using jQuery:
$(document).ready(function(){
$('.sub_list_item').click(function(){
$('.sub_list_item').removeClass('yourClass');
$(this).addClass('yourClass');
});
});
Hope this works! The idea is to remove yourClass from all nav items and then add it to only the current one.
Related
I am facing a weird issue with AdminLTE admin panel template which is I am using for my Angular 11 app. Its all loading the menu item. No issue with it. But when clicking an item refreshes the page instead of expanding the group.
Here is how it looks
When I clicking on Data Reconciliation for example, it reloads the page again. Then when I click it again, it expands the group
Here is the markup
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Data Reconciliation
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">Reports</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout Options
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="./index3.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
What could be the reason? Is this issue have any connection with Angular?
Replace ALL
href="#"
by
[routerLink]=""
This should works.
I have the following html:
<ul class="collection">
<li>a
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>s
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>w
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
I have an onclick listener on the UL (called taskList). console.log says the element UL (taskList) is an object. Can I iterate through the li's as follows:
for (const task in taskList) {
console.log(task);
}
No, for ... in will loop over the properties of the object. You could use for ... of to loop over the children.
const taskList = document.querySelector('ul.collection');
for (const task of taskList.children) {
console.log(task.outerHTML);
}
<ul class="collection">
<li>a
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>s
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>w
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
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>
I-21 Injury Reporting
</li>
<li>
ASAP Reporting
</li>
<li>
General ASAP Information
</li>
<li>
Flight Attendent Incident Report
</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">
Known Crewmember
</li>
</li>
<li>
<li class="sub-first-nav-li">
Products Safety Data Search
</li>
</li>
</ul>
</div>
</transition>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-users"></i>
</span>
TRAINING
</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">
Inflight Resource Directory
</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">
AFA
</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>
HOTELS
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-home"></i>
</span>
MY BASE
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-certificate"></i>
</span>
RECOGNITION
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-male"></i>
</span>
MY LEADERSHIP TEAM
</li>
</li>
</ul>
</div>
</nav>
</transition>
</div>
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');
},
},
};
<li>
<a href="#">
<i class="entypo-tools"></i>
<span class="title">PHP-SDK</span>
<span class="badge badge-secondary">3</span>
</a>
<ul>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/installation">
<i class="entypo-inbox"></i>
<span class="title">Installation</span>
</a>
</li>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/getStarted">
<i class="entypo-docs"></i>
<span class="title">Getting Started</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flash"></i>
<span class="title">API-Endpoints</span>
<span class="badge badge-info">3</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
<span class="badge badge-success">4</span>
</a>
<ul>
<li>
<a href="/mypage_v2/sdk/newsletter">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletterEmail">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletteranalytics">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/sample2">
<i class="entypo-newspaper"></i>
<span class="title">NewslettersProcess</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
If you use php rendering and on menu item click page refreshes, you can add class for example "active" to parent li(s), and in styles add li.active {display:block} or something like that style to show hidden elements
Finally i am ok with the condition of laravel routes
<li #if(Request::path() == "mypage_v2/applications/lists" || Request::path() == "mypage_v2/applications/register") class="active opened")#endif>
Hi,My question is how to drag the content when clicks on any option in
dropdown,colud you please tel me...
it is leftside menu-bar,when clicks on any dropdown item it is covering the below menu-bar list,so i need to drag the other menu bar
list when clicks on any dropdown list..
<ul class="sidebar-menu">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li class="active dropdown">
<a href="general.html" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-gavel"></i> <span>General <span class="caret"></span></span>
</a>
<ul class="dropdown-menu">
<li><a href="#General1" class="btn btn-success" data-toggle="tab" >General1</a></li>
<li><a href="#General2" class="btn btn-success" data-toggle="tab" >General2</a></li>
<li>General3</li>
</ul>
</li>
<li>
<a href="basic_form.html">
<i class="fa fa-globe"></i> <span>Basic Elements</span>
</a>
</li>
<li>
<a href="simple.html">
<i class="fa fa-glass"></i> <span>Simple tables</span>
</a>
</li>
</ul>