<li>
<a href="#">
<span class="icon"><i class="icon20 i-stack-list"></i></span>
<span class="txt">Smartr Sites</span>
</a>
<ul class="sub">
<li>
<a href="tables.html">
<span class="icon"><i class="icon20 i-stack-list"></i></span>
<span class="txt">Chicken Notes</span>
</a>
</li>
<li>
<a href="data-tables.html">
<span class="icon"><i class="icon20 i-stack-list"></i></span>
<span class="txt">Purely Commerce</span>
</a>
</li>
</ul>
</li>
My Dashboard Submenu automatically expands without having a click on page load. and i only want to expand or close when i click it .
may be it can be done through JS tweak.
Okay thanks for helping out but i found a way to make this happen . I just put the id in dropdown menu and applied a JS function related to that id Here it is:
<li>
<a href="#"id="posuvnik">
<span class="icon"><i class="icon20 i-stack-list">
</i></span>
<span class="txt">Smartr Sites</span>
</a>
<ul class="sub">
<li>
<a href="tables.html">
<span class="icon"><i class="icon20 i-stack-list"></i></span>
<span class="txt">Chicken Notes</span>
</a>
</li>
<li>
<a href="data-tables.html">
<span class="icon"><i class="icon20 i-stack-list"></i></span>
<span class="txt">Purely Commerce</span>
</a>
</li>
</ul>
</li>
</script>
$(document).ready(function () {
$("#posuvnik").click();
});
</script>
Related
I am using bootstrap 5 I have taken a sample of JavaScript that allows a pop-out sidebar open on the left with the option to close the sidebar once opened.
Inside the sidebar I have a navigation menu with menu-links (in list format)
I want it so when the user has opened the sidebar, if they decide to click to close the sidebar it will also de-collapse/close the menu lists (#submenu1, #submenu2 and #submenu3) if any and all that are open/collapsed.
I am unsure of how to achieve this in JavaScript... surely its something simple?
The javascript also makes some adjustments to the body... this does not need to be changed/effected so ignore the parts of the JS regarding body classes etc...
JS:
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if(toggle && nav && bodypd && headerpd){
toggle.addEventListener('click', ()=>{
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle','nav-bar','body-pd','header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink(){
if(linkColor){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
HTML:
<div class="header_toggle"> <i class="bx bx-menu" id="header-toggle"></i> </div>
<div class="l-navbar show" id="nav-bar">
<nav class="nav">
<div> <a href"="" shopuserproducts"="" class="nav_logo"> <img style="width: 30px;" src="/Images/favicon.svg"> <span class="nav_logo-name">ABC Test</span> </a>
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav_link collapsed" aria-expanded="false"> <i class="bx bxs-car-mechanic"></i> <span class="nav_name">
Commercial Parts</span></a>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse" id="submenu1" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">Suspension</span>
</li>
<li>
<span class="d-none d-sm-inline">Braking</span>
</li>
<li>
<span class="d-none d-sm-inline">Filtration</span>
</li>
<li>
<span class="d-none d-sm-inline">Engine</span>
</li>
<li>
<span class="d-none d-sm-inline">Exhaust</span>
</li>
</ul>
</li>
<li>
<i class="bx bx-spray-can nav_icon"></i><span class="nav_name">Refinish</span>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse" id="submenu2" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">Spray Guns</span>
</li>
<li>
<span class="d-none d-sm-inline">Clearcoat Kits</span>
</li>
<li>
<span class="d-none d-sm-inline">Primers</span>
</li>
<li>
<span class="d-none d-sm-inline">Body Fillers</span>
</li>
<li>
<span class="d-none d-sm-inline">Panel Wipe</span>
</li>
<li>
<span class="d-none d-sm-inline">Tinters</span>
</li>
<li>
<span class="d-none d-sm-inline">Abrasives</span>
</li>
</ul>
</li>
<li>
<a href="#submenu3" data-bs-toggle="collapse" class="nav_link active" aria-expanded="true"> <i class="bx bxs-t-shirt"></i> <span class="nav_name">
PPE & Workwear</span></a>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse show" id="submenu3" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">T-Shirts & Polo's</span>
</li>
<li>
<span class="d-none d-sm-inline">Jackets</span>
</li>
<li>
<span class="d-none d-sm-inline">Hi-Visibility</span>
</li>
<li>
<span class="d-none d-sm-inline">Eye Protection</span>
</li>
<li>
<span class="d-none d-sm-inline">Headwear</span>
</li>
<li>
<span class="d-none d-sm-inline">Gloves</span>
</li>
</ul>
</li>
<hr style="color: white;">
<div class="nav_list">
<i class="bx bx-grid-alt nav_icon"></i> <span class="nav_name">Dashboard</span>
<i class="bx bx-shopping-bag nav_icon"></i> <span class="nav_name">Shop</span>
<i class="bx bx-cart"></i> <span class="nav_name">Cart</span>
<a href="/AccountManage" class="nav_link"> <i class="bx bx-user nav_icon"></i> <span class="nav_name">My
Account</span> </a>
</div>
<i class="bx bx-log-out nav_icon"></i> <span class="nav_name">SignOut</span>
</div></nav>
</div>
In "nopCommerce" I want to change the side category navigation.
Now, when somebody clicks a category, it shell be expanded... but it not works.
The HTML is looking like this:
(...)
$(document).ready(function() {
$('.dropdown').on('click', function() {
var $this = $(this)
$this.next('a.dropdown-toggle').attr('aria-expanded', 'true');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=master-column-wrapper>
<div class=container>
<div class=row>
<div class="sidebar col-md-3">
<div class="block block-category-navigation well box-shadow-wrapper">
<div class="wjktitle main-title"><strong>Kategorien</strong></div>
<div class="wjklistbox MainMenu">
<ul class="nav nav-list">
<li> (0) </span> <span> </span>
<li class=dropdown>
<span class="fa fa-angle-down visible-xs"></span>
<a class=dropdown-toggle href=/de/pickup role=button aria-expanded=false> Pickup (2) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li> (0) </span> <span> </span>
<li> (0) </span> <span> </span>
<li> (0) </span> <span> </span>
<li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/vw role=button aria-expanded=false> VW (2) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/bully role=button aria-expanded=false> Bully (2) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li> (0) </span> <span> </span>
<li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/2015- role=button aria-expanded=false> 2015- (2) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li> (2) </span> <span> </span>
<li> (0) </span> <span> </span>
</ul>
</ul>
<li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/golf role=button aria-expanded=false> Golf (0) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/2015--2 role=button aria-expanded=false> 2015- (0) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li> (0) </span> <span> </span>
<li> (0) </span> <span> </span> </ul>
<li> (0) </span> <span> </span> </ul>
</ul>
</ul>
<li> (0) </span> <span> </span> </ul>
</div>
</div>
a.dropdown-toggle is the child of .dropdown so instead of next you can call find method:
$(document).ready(function() {
$('.dropdown').on('click', function() {
var $this = $(this)
$this.find('a.dropdown-toggle').attr('aria-expanded', 'true');
});
});
I want to test by clicking an element which is only visible when the sidebar section is scrolled. The sidebar is in the left end of the website and the element is in the bottom portion of the sidebar. I used:
browser.executeScript('window.sidebar.scrollTo(0,0);').then(function ()
but it's not working.
<div class="sidebar" data-active-color="white" data-background-color="red" data-image="../assets/img/sidebar-1.jpg">
<sidebar-cmp>
<div class="logo">
<div class="logo-normal">
<a class="simple-text" href="https://www.creative-tim.com">
Creative Tim
</a>
</div>
<div class="logo-img">
<img src="/assets/img/angular2-logo-white.png">
</div>
</div>
<div class="sidebar-wrapper">
<div class="user">
<div class="photo">
<img src="../assets/img/faces/avatar.jpg">
</div>
<div class="info">
<a class="collapsed" data-toggle="collapse" href="#collapseExample">
<span>
Tania Andrew
<b class="caret"></b>
</span>
</a>
<div class="collapse" id="collapseExample">
<ul class="nav">
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">MP</span>
<span class="sidebar-normal">My Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">EP</span>
<span class="sidebar-normal">Edit Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">S</span>
<span class="sidebar-normal">Settings</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="nav-container">
<ul class="nav">
<li routerlinkactive="active" class="active visible">
<a href="#/dashboard">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#componentsExamples">
<i class="material-icons">apps</i>
<p>Components
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="componentsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/components/buttons">
<span class="sidebar-mini">B</span>
<span class="sidebar-normal">Buttons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/grid">
<span class="sidebar-mini">GS</span>
<span class="sidebar-normal">Grid System</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/panels">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Panels</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/sweet-alert">
<span class="sidebar-mini">SA</span>
<span class="sidebar-normal">Sweet Alert</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/notifications">
<span class="sidebar-mini">N</span>
<span class="sidebar-normal">Notifications</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/icons">
<span class="sidebar-mini">I</span>
<span class="sidebar-normal">Icons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/typography">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Typography</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#formsExamples">
<i class="material-icons">content_paste</i>
<p>Forms
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="formsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/forms/regular">
<span class="sidebar-mini">RF</span>
<span class="sidebar-normal">Regular Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/extended">
<span class="sidebar-mini">EF</span>
<span class="sidebar-normal">Extended Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/validation">
<span class="sidebar-mini">VF</span>
<span class="sidebar-normal">Validation Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/wizard">
<span class="sidebar-mini">W</span>
<span class="sidebar-normal">Wizard</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#tablesExamples">
<i class="material-icons">grid_on</i>
<p>Tables
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="tablesExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/tables/regular">
<span class="sidebar-mini">RT</span>
<span class="sidebar-normal">Regular Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/extended">
<span class="sidebar-mini">ET</span>
<span class="sidebar-normal">Extended Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/datatables.net">
<span class="sidebar-mini">DT</span>
<span class="sidebar-normal">DataTables.net</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#mapsExamples">
<i class="material-icons">place</i>
<p>Maps
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="mapsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/maps/google">
<span class="sidebar-mini">GM</span>
<span class="sidebar-normal">Google Maps</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/fullscreen">
<span class="sidebar-mini">FSM</span>
<span class="sidebar-normal">Full Screen Map</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/vector">
<span class="sidebar-mini">VM</span>
<span class="sidebar-normal">Vector Map</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a href="#/widgets">
<i class="material-icons">widgets</i>
<p>Widgets</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/charts">
<i class="material-icons">timeline</i>
<p>Charts</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/calendar">
<i class="material-icons">date_range</i>
<p>Calendar</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#pagesExamples">
<i class="material-icons">image</i>
<p>Pages
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="pagesExamples">
<ul class="nav">
<li>
<a href="./pricing.html">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Pricing</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/timeline">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Timeline Page</span>
</a>
</li>
<li>
<a href="./login.html">
<span class="sidebar-mini">LP</span>
<span class="sidebar-normal">Login Page</span>
</a>
</li>
<li>
<a href="./register.html">
<span class="sidebar-mini">RP</span>
<span class="sidebar-normal">Register Page</span>
</a>
</li>
<li>
<a href="./lock.html">
<span class="sidebar-mini">LSP</span>
<span class="sidebar-normal">Lock Screen Page</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/user">
<span class="sidebar-mini">UP</span>
<span class="sidebar-normal">User Page</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="sidebar-moving-tab" style="transform: translate3d(0px, 5px, 0px);"></div></div>
</div>
</sidebar-cmp>
<div class="sidebar-background" style="background-image: url(assets/img/sidebar-1.jpg)"></div>
</div>
Specify the position at what location you have to scroll, try this one.
browser.executeScript('window.scrollTo(0,1000);').then(function () {
browser.sleep(5000);
console.log('Window ScrollTo','Done');
}).then(function() {
//wait for element to be displayed
browser.driver.wait(function(){
return someElement.isDisplayed().then(function (isVisible){
return isVisible === true;
},50000, 'Element not present ' );
},50000)
});
I've been using this line for scrolling.
You can also try it on console before using it on protractor.
e.g. $(".sidebar").scrollLeft(1000)
strPixels = 1000 //value in pixel
strClass = '.sidebar' //class of the element with scrollbar
browser.executeScript('$("' + strClass + '").scrollLeft(' + strPixels + ')');
Note: you can use scrollLeft or scrollTop to scroll horizontally or vertically.
var filter = theSwitch.pageBar;
var scrollIntoView = function () {
arguments[0].scrollIntoView();
};
browser.executeScript(scrollIntoView, filter);
theSwitch.pageBar.click();
Please help me to sort out this problem. I want to add nav-active class in li element only one time means if child element is selected then parent li should not have nav-active class. I am using following code but it is not working according to my requirements.
Thanks in advance.
Here is my code:
$('ul li').find('li').click(function(){
var $this = $(this);
$('li').removeClass('nav-active');
$this.addClass('nav-active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</li
></ul>
</nav>
In you current example if you will do a console.log($(this), it will show you 2 elements in the console if you have clicked a child element. One for the child element and one for its parent li element. This is called event bubbling. You need to take care of event bubbling by stop propagating the event.
Try this.
$('li').click(function(event){
event.stopPropagation()
var $this = $(this);
$('li').removeClass('nav-active');
$this.addClass('nav-active');
});
.nav-active a
{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</li
></ul>
</nav>
The main idea is to run the click function only once because when you click child element the parent element also gets clicked automatically right after that so $(this) ends up selecting parent item, everytime the child element gets clicked.
I added css for .nav-active class to show the code working. Try this.
$(document).ready(function(){
$('nav li').one("click",function(){
$('nav li').removeClass('nav-active');
$(this).addClass('nav-active');
})
})
.nav-active>a>span{
font-size:20px;
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</li
></ul>
</nav>
I have a JSfiffle
https://jsfiddle.net/zuer7g75/1/
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">
Camera & photo
</a>
</li>
<li>
<a href="/cell-phones">
Cell phones
</a>
</li>
<li>
<a href="/others">
Others
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/shoes">
Shoes
</a>
</li>
<li>
<a href="/clothing">
Clothing
</a>
</li>
<li>
<a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li>
<a href="/digital-downloads">
Digital downloads
</a>
</li>
<li>
<a href="/books">
Books
</a>
</li>
<li>
<a href="/jewelry">
Jewelry
</a>
</li>
<li>
<a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()"> <div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off"
value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
Expected behaviour is like this.
1 When I click on any parent category text ( for example computers) , it should lead me to the category page.
2 when I click on the down arrow for the category it should expand and show the subcategory items
All of them works fine, But now I want to move the down arrow to right applying a style="float:right" to the element. But now my expected behaviour 2 is broken.It is leading me to the corresponding page instead of expanding the subcategory items.
What am I doing wrong here?
By floating the font awesome icons to the right instead of the actual a tags i got it to work. Only thing is i couldn't get rid of the padding at the bottom. maybe you want it there? https://jsfiddle.net/RachGal/zuer7g75/3/
$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
var elmnt = $(this).parent().parent();
if (!elmnt.hasClass('nav')) {
var li = $(this).parent();
var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2;
var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10;
if (!li.hasClass('open')) li.addClass('open')
else li.removeClass('open');
$(this).next().css('top', heightParent + 'px');
$(this).next().css('left', widthParent + 'px');
return false;
}
});
});
function setMouseHoverDropdown() {
if ($(window).innerWidth() > 767) {
$('ul.nav li').hover(function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
}
$(window).load(function() {
setMouseHoverDropdown();
});
$(document).ready(function() {
setMouseHoverDropdown();
});
$(window).resize(function() {
setMouseHoverDropdown();
});
.fa-angle-down {
float: right;
margin-top: -50px;
}
a.dropdown-toggle {
height: 10px;
padding-bottom: 0px!important;
line-height: 1!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".category-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse category-navbar-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span>
</li>
<li> <a href="/computers">
Computers
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/desktops">
Desktops
</a>
</li>
<li> <a href="/notebooks">
Notebooks
</a>
</li>
<li> <a href="/software">
Software
</a>
</li>
</ul>
</li>
<li> <a href="/electronics">
Electronics
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/camera-photo">
Camera & photo
</a>
</li>
<li> <a href="/cell-phones">
Cell phones
</a>
</li>
<li> <a href="/others">
Others
</a>
</li>
</ul>
</li>
<li> <a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/shoes">
Shoes
</a>
</li>
<li> <a href="/clothing">
Clothing
</a>
</li>
<li> <a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li> <a href="/digital-downloads">
Digital downloads
</a>
</li>
<li> <a href="/books">
Books
</a>
</li>
<li> <a href="/jewelry">
Jewelry
</a>
</li>
<li> <a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()">
<div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off" value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</body>
You can just make the a tags within the li to float left, then it should work.
.navbar-default .navbar-nav>li>a {
float:left;
}
Please change the css to be relevant to your project.
In order to get the clicking of the arrow down to work:
close all other drop downs that are currently visible.
remove the "open" class from all OTHER li.
toggle the open class from the current li that corresponds to our click.
toggle the visibility of the drop down that corresponds to our click.
Within the hover code, we also toggle the open class on the li. If a user hovers over arrow down, then we addClass open to the corresponding li. And vice versa.
Please see: https://jsfiddle.net/qynfvow3/30/