Bootstrap navbar Active State is not working.
I have bootstrap v3.
I use the class="active" on mynavbar on its submenu when I collapse none work.
Here is my code with js/css/bootstrap files I have included:
<li class="active">
<a href="javascript:;" data-toggle="collapse" data-target="#demoadmin">
<i class="fa fa-fw fa-wrench"></i>Administrator Menu <i class="fa fa-fw fa-caret-down"></i>
</a>
<ul id="demoadmin" class="collapse in">
<li class="active">
Links Editor
</li>
<li>
News Editor
</li>
<li>
Main Category Editor
</li>
<li>
Sub Category Editor
</li>
<li>
Profile Team Editor
</li>
</ul>
</li>
You didn't show us enough HTML to see exactly what you are doing wrong, but it looks like you're trying to get the active class to work on a bootstrap dropdown-menu.
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-wrench"></i>Administrator Menu <i class="fa fa-fw fa-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li class="active">
Links Editor
</li>
<li>
News Editor
</li>
<li>
Main Category Editor
</li>
<li>
Sub Category Editor
</li>
<li>
Profile Team Editor
</li>
</ul>
</li>
DEMO
Try this
$(document).ready(function(){
$(".active").removeClass("active");
$(".dropdown-menu li").addClass("active");
});
Related
Here is the code of the sidebar :
$('.sidebar-nav-menu,sidebar-nav-submenu').click(function(){
$(this).toggleClass('open');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-alt">
<div class="sidebar-content">
<ul class="sidebar-nav">
<li>
<i class="fa fa-dashboard sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Dashboard</span>
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Advanced Settings</span>
<ul>
<li>
Site Settings
</li>
<li>
Appearance
</li>
<li>
Login & Registration Settings
</li>
<li>
Session Settings
</li>
<li>
Mailer Settings
</li>
</ul>
</li>
<li class="active">
<i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-rocket sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">User Interface</span>
<ul>
<li>
Widgets
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Elements
<ul>
<li>
Blocks & Grid
</li>
<li>
Typography
</li>
<li>
Buttons & Dropdowns
</li>
<li>
Navigation & More
</li>
<li>
Progress & Loading
</li>
<li>
Tables
</li>
</ul>
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Forms
<ul>
<li>
Components
</li>
<li>
Wizard
</li>
<li>
Validation
</li>
</ul>
</li>
<li class="active">
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Icon Packs
<ul>
<li>
Font Awesome
</li>
<li>
Glyphicons Pro
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
WHAT I WANT
On clicking the a tag having class 'sidebar-nav-menu' it adds the 'open' class to the a tag and shows the first level of ul.
On clicking the a tag having class 'sidebar-nav-submenu' it adds the 'open' class to the a tag and shows the second level of ul.
Now i want to close all other second level 'sidebar-nav-submenu' if i open one second level 'sidebar-nav-submenu'.
Also if i open 1st level 'sidebar-nav-menu' then it should hide all other 'sidebar-nav-menu'
Any idea?
If I understand correctly, you can check to see if the (sub)menu is already open and if it is not then remove the class open from all other (sub)menus.
Edited the click submenu
$('.sidebar-nav-menu,.sidebar-nav-submenu').click(function() {
if (!$(this).hasClass('open')) {
if ($(this).hasClass('sidebar-nav-menu')) {
$('.sidebar-nav .sidebar-nav-menu .sidebar-nav-submenu.open').removeClass('open');
$('.sidebar-nav .sidebar-nav-menu.open').removeClass('open');
} else if ($(this).hasClass('sidebar-nav-submenu')) {
$('.sidebar-nav .sidebar-nav-submenu.open').removeClass('open');
}
}
$(this).toggleClass('open');
});
Let me know if this helps.
How can I add another level to this menu structure from the HTML at the bottom of the page?
Current
Test
--->a
--->b
what I'm trying to do
Test
--->a
--->1
--->2
--->b
--->1
--->2
html
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<i class="glyphicon glyphicon-circle"></i> Facebook
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
<ul>
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<a data-target="#submenu" data-toggle="collapse" href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a>
<ul class="list-unstyled collapse" id="submenu">
<li> 1 </li>
<li> 2</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
</ul>
I believe you just need to create another collapse element with a unique Id. using the <a> element as your toggle.
Below is my Html code
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}}
<a class="fa fa-pencil-square-o" href="{{li.stateh}}"></a>
</li>
</ul>
</li>
I want the edit icon to be adjacent to F/R production Report. Not below Production Report.
P.S. I tried display: inline-block; display: inline; but both are not working.
Have you triend to simply place the tag inside the previous tag?
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}} <a class="fa fa-pencil-square-o" href="{{li.stateh}}"> </a>
</li>
</ul>
</li>
I have an overlay Menu that has 3 dropdowns.
When you click on one of the parent items if it has a dropdown , a class is added to the child to "activate" the dropdown and it expands and shows. Currently it works fine , and on click the class is added and removed if clicked again.
The problem is currently you can have all dropdowns active and open at the same time. What I need to happen is to have only one dropdown be able to be active at a time.
if one dropdown is active , and the user clicks on another , the original active dropdown closes and the newly clicked one becomes active.
Also if the dropdown is active and user clicks on the same parent item again the dropdown closes.
Current HTML
I have excluded all other list items except for the ones that have dropdowns.
<ul class="header__overlay-nav">
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
After Action Review
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Overview
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Review Form
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Performance Card
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Recent Recordings
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Downloads
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
100 Day Challenge App
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Desktop Wallpapers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Screen Savers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Forms
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Inspiration
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Get Your Mojo Working
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links href="#">
Game Changers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Bold Actions - Big Rewards
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Motivational Videos
</a>
</li>
</ul>
</li>
</ul>
Current Jquery
Here is the original Jquery I was using to do a basic toggle of active class, Basically just using the toggleClass on the child UL of the clicked trigger.
Commented out , I previously tried removing all active classes and then instead of toggling the class on click element I was adding, but removing all classes , only to add it to the clicked one made it not possible to close a dropdown by clicking the same trigger again.
var $overlayDdTrigger = $('.js-overlay-dropdown-trigger');
var $overlayClasses = {
// Active css Class for dropdowns in Main Overlay
OverlayDdActive: 'dropdown--overlay-is-active',
ButtonIconIsRotated: 'btn__icon-is-rotated',
};
$overlayDdTrigger.on('click', function() {
if (_isMobile) {
// Attempt to to remove all active classes on UL's prevents dropdown from
// being able to close if the same trigger is clicked twice
// $('ul.dropdown--overlay-is-active').removeClass($overlayClasses.OverlayDdActive);
$(this).children('ul').toggleClass($overlayClasses.OverlayDdActive);
$(this).find('.btn__icon-right').toggleClass($overlayClasses.ButtonIconIsRotated);
}
});
Thank you for the help in advance, I know there are a lot of questions that relate to this problem on here, I did a lot of searching but could not find any that would help me with this specific case.
i hope this will work plz comment if it cause any problem.
<html>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var $overlayDdTrigger = $('.js-overlay-dropdown-trigger');
var $overlayClasses = {
OverlayDdActive: 'dropdown--overlay-is-active',
ButtonIconIsRotated: 'btn__icon-is-rotated',
};
$overlayDdTrigger.on('click', function() {
if($(this).find('ul').hasClass('dropdown--overlay-is-active')){
$overlayDdTrigger.find('ul').removeClass($overlayClasses.OverlayDdActive);
$overlayDdTrigger.find('.btn__icon-right').removeClass($overlayClasses.ButtonIconIsRotated);
}else{
$overlayDdTrigger.find('ul').removeClass($overlayClasses.OverlayDdActive);
$overlayDdTrigger.find('.btn__icon-right').removeClass($overlayClasses.ButtonIconIsRotated);
$(this).find('ul').addClass($overlayClasses.OverlayDdActive);
$(this).find('.btn__icon-right').addClass($overlayClasses.ButtonIconIsRotated);
}
});
</script>
<style>
.dropdown--overlay{
display:none;
}
.dropdown--overlay-is-active{
display: block !important;
}
</style>
<ul class="header__overlay-nav">
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
After Action Review
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Overview
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Review Form
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Performance Card
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Recent Recordings
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Downloads
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
100 Day Challenge App
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Desktop Wallpapers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Screen Savers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Forms
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Inspiration
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Get Your Mojo Working
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links href="#">
Game Changers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Bold Actions - Big Rewards
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Motivational Videos
</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
Figured Out a solution that works as wanted.
$overlayDdTrigger.on('click', function() {
if (_isMobile) {
// Toggle Class On clicked Element
$(this).children('ul').toggleClass($overlayClasses.OverlayDdActive);
// Remove all Active Dropdowns From all Siblings
$(this).siblings().children('ul').removeClass($overlayClasses.OverlayDdActive);
$(this).find('.btn__icon-right').toggleClass($overlayClasses.ButtonIconIsRotated);
}
});
How do I make two buttons appear underneath each other in a dropdown menu of Javascript? This is the code that I tried but they appear next to each other:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-pencil"></i> Registeration Menu <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<a id="btn-register" href="#">User</a>
<a id="btn-registerAdmin" href="#">Admin</a>
</ul>
</li>
<li>
Login
</li>
</ul>
<li><a id="btn-register" href="#">User</a></li>
<li><a id="btn-registerAdmin" href="#">Admin</a></li>
Add <li> tags.