I'm creating a website and having trouble with some carets on my dropdown.
I have a sidebar like so:
Home
Menu item >
Menu item 2 >
Menu item 3 >
When I click on a menu item the little caret icon goes from > to v and expands the dropdown content like so:
Home
Menu item v
Sub-menu item
Sub-menu item 2
Menu item 2 >
Menu item 3 >
If I click on Menu item v - the caret goes from v to > again which is correct.
However, if I click on Menu Item 2 > for example, menu item 2 opens, but the caret on menu item stays as v like so:
Home
Menu item v
Menu item 2 v
Sub-menu item
Sub-menu item 2
Menu item 3 >
How do I get it so when Menu item 2 has been clicked, menu item v will change back to menu item >
I have this as my JS
$('.dropdown').click(function(){
$(this).find('.nav-arrow').toggleClass('fa-angle-left fa-angle-down');
});
$('.dropdown').click(function(){
$('.collapse').collapse('hide');
})
My drop down looks like this:
Home
<li class="dropdown"><a data-toggle="collapse" href="#">Menu item<i class="nav-arrow fa fa-angle-left pull-right"></i></a>
<ul class="collapse">
<li><a href="#">Sub menu item</li>
<li>Sub-menu item 2</li>
</ul>
</li>
<li class="dropdown"><a data-toggle="collapse" href="#">Menu item 2 <i class="nav-arrow fa fa-angle-left pull-right"></i></a>
<ul class="collapse">
<li><a href="#">Sub menu item</li>
<li>Sub-menu item 2</li>
</ul>
</li>
<li class="dropdown"><a data-toggle="collapse" href="#">Menu item 3 <i class="nav-arrow fa fa-angle-left pull-right"></i></a>
<ul class="collapse">
<li><a href="#">Sub menu item</li>
<li>Sub-menu item 2</li>
</ul>
</li>
What you need to do is first convert all of the <li> elements to a left-facing caret, and then only change the target element back. Unfortunately, as there's no (simple) way to know which carets are open and which are closed, it's best to change them explicitly:
$('.dropdown').click(function(){
$('.nav-arrow').removeClass('fa-angle-down');
$('.nav-arrow').removeClass('fa-angle-left');
$(this).find('.nav-arrow').removeClass('fa-angle-left');
$(this).find('.nav-arrow').addClass('fa-angle-down');
});
Hope this helps!
I think this will handle the case where you have toggled a menu open and close and if you have toggled the menu by selecting another entry in the menu.
jQuery(".dropdown").click(function(event){
// Evaluate the target of the click event was already opened.
if(jQuery(event.target).hasClass("fa-angle-down")){
// Change the caret to looks like they are closed.
jQuery(event.target).removeClass("fa-angle-down").addClass("fa-angle-left");
// Evaluate the target of click event was not opened.
}else{
// Remove any opened menu items carets.
jQuery(".dropdown.fa-angle-down").removeClass("fa-angle-down").addClass("fa-angle-left");
// Add the appropriate caret to the newly opened menu item.
jQuery(event.target).removeClass("fa-angle-left").addClass("fa-angle-down");
}
});
Let me know if you have any questions or if I can improve on this to make it better for you.
Related
I have a navigation menu which is almost perfect.
On Mobile:
When I open the hamburger menu, it will take up 3/4 of the screen size. I am okay with that. When I click on one of the links in the navbar I am taken to the correct section but the Menu remains open.
I prefer having the menu close as soon I click on one of the links rather than me having to press the Hamburger to close the menu.
HTML:
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Education
</li>
<li>
Experience
</li>
<li>
Testimonials
</li>
<li>
Skills
</li>
<li>
Contact
</li>
</ul>
</div>
you can add click listener on all of <a>'s and then close the bar in listener function
best way to do this is to give same class to all of them and add listener to them with for loop
or you can use jquery so you wont need for loop
$('.nav a').on('click', function(){
$('.navbar-toggle').click();
});
Use this code, it will call click event for navbar-toggle class when you will click on navigation bar items. Which will close the navigation bar as you wanted.
Say for example, if you have menu bar with this structure:
<nav>
<ul class="nav">
<li class="menu1">Menu Item 1</li>
<li class="menu2">Menu Item 2
<ul>
<li class="menu2.1">Menu Item 2.1</li>
<li class="subMenu2">Menu Sub-Menu Item 2
<ul>
<li class="subMenu2.1">Menu Sub-Menu Item 2.1</li>
<li class="subMenu2.2">Menu Sub-Menu Item 2.2</li>
<li class="subMenu2.3">Menu Sub-Menu Item 2.3</li>
<li class="subMenu2.4">Menu Sub-Menu Item 2.4</li>
</ul>
</li>
<li class="menu2.2">Menu Item 2.2</li>
<li class="menu2.3"><a href="#">Menu Item 2.3</li>
</ul>
</li>
</ul>
</nav>
And the recorded class name subMenu2.2 is known, how would you go about in order to expanded this sub menu and its parent menu, so the contents of this menu can be viewed with an external call, rather than clicking on the menu bar itself.
So if subMenu2.2 was the item to be viewed, then the all the contents and menu bar section with class name menu2 would be shown or be in active state so it can be visible on the page.
Normally, to view an menu item you would work your way through the menu items, and on hover certain sub menus may be displayed.
My intended goal is to show the sub-menu or parent menu depending on the given/supplied class name.
You could give the pages a body id and style the menu or script the active state according to that. Here is an article that explains that further. I hope this helps.
css-tricks.com/id-your-body-for-greater-css-control-and-specificity
Menu with sub-menus that you can expand and highlight the chosen KPI.
<li ng-repeat="(key, value) in kpis | groupBy: 'Type'" ng-class="{'active-menu-item': menu.active, 'open': menu.open}">
<a ng-click="menu.open = !menu.open">
<span ng-class="kpiInitializer.IconFromKpiType(key)"></span>{{kpiInitializer.TextFromKpiType(key)}}
</a>
<ul class="navbarColorOnClick submenu">
<li ng-repeat="kpi in value" ui-sref-active="active">
<a ui-sref="kpi.overview({kpiChoice: '{{kpi.Id}}'})">{{kpi.Name}} </a>
</li>
</ul>
</li>
As you can se I have a sub-menu that can expand. ng-click="menu.open = !menu.open. It works fine but now I have a problem.
I want this submenu to expand when I click on a button in a controller that have nothing to do with this view. The right submenu should fall down. In this solution, it highlights the right property but the sub-menu dosen't expand so you cant see the highlighted choice.
Recently I had a similar issue with bootstrap, it was caused by nested li - ul - li tags. You will probably need to change it to div - ul - li.
I already found a part of my problem but it still needs work.
What i want to achieve is when i hover over a div, others divs should have class added to them if the original class is the same.
So let's start.
I have a menu:
<ul id="listz"><li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/'><span>Smoke vents</span></a>
<ul>
<li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/trape-de-fum/'><span>Trape de fum</span></a>
<ul>
<li><a href='/rokvent-simplu-canat'>RokVent Simplu canat</a></li>
<li><a href='/pheonix-dublu-canat'>Phönix Dublu canat</a></li>
<li><a href='/megaphonix'>Megaphönix</a></li>
<li><a href='/megastar'>MegaStar</a></li>
<li><a href='/firefighter'>Firefighter</a></li>
<li><a href='/smokejet'>SmokeJet</a></li>
<li class='last'><a href='/multijet'>MultiJet</a></li>
</ul>
</li>
<li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/trape-de-ventilatie-si-vizitare/'><span>Trape de ventilatie si vizitare</span></a>
<ul>
<li><a href='/rokvent-luminatoare-fixe'>RokVent(luminatoare fixe)</a></li>
<li class='last'><a href='/rokpas-luminatoare-acces'>RokPas(luminatoare acces)</a></li>
</ul>
</li>
</ul>
</li></ul>
As you can see i have Parent "Smoke vents" that has children.
The menu is on the left side. On the right side i will have a picture with a warehouse that has smoke vent elements. When you hover over them, they change color.
At that moment the menu needs to open and show the associated product that is in the menu. So when you hover over the element of the warehouse it should add class to the menu so i can change the background and show that that element is that product or products.
One problem is that i need it to match them by class (wich i will make unique by each element).
The second problem is that the menu does not open when i hover over a part of the image. If i have the menu open i can see the highlighted item in the menu.
This is the code that i got now and does the hovering part but only by matching in order.(what i mean is that if i add only to the parents the class it shows right but if i add to a child also then the last parent will not have a addClass):
<script type="text/javascript">
$("#listz1 li,#listz2 li").hover(function() {
var index = $(this).index();
$("#listz1, #listz2").each(function() {
$(".link1",this).eq(index).toggleClass("hoverz");
});
});
</script>
I've been combing around looking for an example of the same problem I'm having but no luck yet. I'm trying to create a multi-level collapsible side navigation in bootstrap using bootstrap.js.
My problem is that I've added in the second level but when I click the list item to trigger it to open it collapses the whole menu. When I re-open the menu, the second-level menu is open also. My code is below:
<div class="sidebar-nav">
<p class="sidenav-header">Units and Lessons:</p>
<ul class="nav nav-list">
<li class="nav-header" data-toggle="collapse" data-target="#content-areas"> <span class="nav-header-primary">
Content Areas
</span>
<ul class="nav nav-list collapse" id="content-areas">
<li>All</li>
<li>Urban Planning</li>
<li>Sustainability</li>
<li>Public Administration</li>
<li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas">Health
<ul class="nav-secondary nav-list collapse" id="nav-health">
<li>Introduction</li>
<li>Lesson: What is Epilepsy?</li>
<li>Lesson: Pathology</li>
</ul>
</li>
</ul>
</li>
<li class="nav-header" data-toggle="collapse" data-target="#languages"> <span class="nav-header-primary">
Languages
</span>
<ul class="nav nav-list collapse" id="languages">
<li>All</li>
<li>Arabic</li>
<li>Turkish</li>
<li>Hebrew</li>
</ul>
</li>
</ul>
</div>
The specific section I'm talking about is under the "Health" list item under "Content Areas".
Any help is greatly appreciated. Thanks!
The problem with your markup is that whole menu is collapsed when you try to click within the list. For example, if you click All inside of Content Areas it collapse the Content Areas. The same is happening for the second level menu, Health in your case.
This is caused because you don't have an accordion-heading specified. Take a look into Bootstrap Collapse Documentation where you will find an example like this:
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
Once you specify the heading your second level nav should work fine.
I have created a fiddle for you to verify. I modified the Content Areas according to the Documentation and the second level menu worked fine. However, I did not modify the Languages menu items so that you can see how it's acting (try clicking within the list once the Languages is expanded)
While Similar to Pitamber's example I would not add some of the extra classes, especially the extra div with class "accoridan-heading", just apply that class to the a tag as so.
<ul class="nav nav-list">
<li>
<a>Menu Item with No Sub-Items</a>
</li>
<li>
<a class="accordion-heading" data-toggle="collapse" data-target="#submenu">
<span class="nav-header-primary">Menu Item with Sub-Items <b class="caret"></b></span>
</a>
<ul class="nav nav-list collapse" id="submenu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>
You can go further and add CSS and or some JS to place some contrast on the sub-menu and also to flip/change the caret icon when a menu item is expanded and collapsed.