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.
Related
I have a simple 2 level dropdown nav in bootsrap with the code below:
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav pull-left">
<li>Főoldal</li>
<li class="dropdown">
Iskolánk
<ul class="dropdown-menu">
<li>Alapadatok</li>
<li>Még egy teszt menü</li>
<li>Osztályok</li>
<li>Teszt menüpont valami</li>
</ul>
</li>
<li class="dropdown">
Információk
<ul class="dropdown-menu">
<li>Teszt, infók menüpontba</li>
</ul>
</li>
<li>Árlista</li>
<li>Hírek</li>
<li>Képgaléria</li>
<li>Dokumentumok</li>
<li>Kapcsolatfelvétel</li>
</ul>
</div>
I added this css to the style file, because i want to show the submenu on hover, not clicking a nav item.
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
When i click the "iskolánk" nav item, and move the cursor to the submenu, the "Iskolánk" nav item will get a white background, that shows me, that this is the active item, and also shows the submenu.
If i dont click the "Iskolánk" nav item, only just hover it, the submenu shows up, but if i move the cursor to the submenu, the "Iskolánk" nav item looses the white background, and it doesnt show that that is the active nav item.
How can i do that? I want to show the submenus always on hover, and not by clicking the parent. The bootstrap css and js file is from the bootstrap website, i dont change anything in them.
The problem is when you are moving to the submenu, cursor leaves the menu (parent) so the CSS hover does not work on it. So to solve this you can write a simple jquery code which keeps the hover effect on the parent(menu) when you are moving to the submenu. but remember, when you are leaving that submenu, you have to remove that effect from the parent.
Add this code snippet to your HTML file.
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown-menu').hover(function(){
$(this).parent().css({background:'#eee'});
})
$('.dropdown-menu').mouseleave(function(){
$(this).parent().css({background:'#fff'});
})
})
</script>
I am trying to create a dashboard where dashboard is abstract state and subdashboard is the very next child state for the dashboard.
Here view details of users use to go to state dashboard.tables. But the problem is that, the html element li is not opening / getting active.
Though the state is changed, that particular element is not getting active which is under datatables
In the above image, I have done manually open to just illustrate my query.
That is click / change of any state should be get active in the side menu and show as active. Any help will be great
Here is my code,
<li class="has_sub">
<i class="md md-view-list"></i><span> Data Tables </span><span class="pull-right"><i class="md md-add"></i></span>
<ul class="list-unstyled">
<li ui-sref-active='{"active": "dashboard" }' ><a ui-sref="dashboard.tables">Tables</a></li>
</ul>
</li>
Here are my routes
r.state("dashboard",{abstract:"true",templateUrl:"partials/dashboard.html"})
r.state("dashboard.subdashboard",{url:"/dashboard",templateUrl:"partials/subdashboard.html"})
r.state("dashboard.tables",{url:"/tables",templateUrl:"partials/tables.html"});
Also as said by LouieAlmeda I have written, but as it wont work i removed it.
and also ng-class i have tested but no use
Can you try:
<li ui-sref-active='{"active": ".dashboard" }' ><a ui-sref="dashboard.tables">Tables</a></li>
I'm wondering if anybody could help. I'm using a Bootstrap Template from wrapbootstrap, called "Black Pearl". It contains a dropdown style menu that is structured like the below; It creates a menu with options, and you can specify submenus which drop down when the main option is clicked - as per example below. "Customers" is the main heading, and "New Cutomer" drops down when customers is clicked.
<ul class="side-menu shadowed">
<li> <a class="navmenu" url="login.php?" href="#"><i class="icon-home"></i>Home</a>
</li>
<li class="submenu"> <i class="icon-address-book"></i>Customers
<ul>
<li>New Customer
</li>
</ul>
</li>
</ul>
The javascript which i think runs this...
/* --------------------------------------------------------
Side Menu
-----------------------------------------------------------*/
(function(){
$('.side-menu > li.submenu > a').unbind();
$('.side-menu > li.submenu > a').click(function(e){
e.preventDefault();
if (!$(this).next('ul').is(":visible")) {
$('.side-menu > li ul').slideUp(150);
$(this).next('ul').slideDown(150);
}
else {
$(this).next('ul').slideToggle(150);
}
});
})();
Anyone have any ideas how i could toggle the menu change from a link outside the menu?
Thanks a lot :)
You can find the target menu trigger and programatically trigger a click event...
like if you want to trigger the customers menu, for easy selection of the element add a Class to the anchor element as given below
<li class="submenu"><i class="icon-address-book"></i>Customers
then
$('a.customers').click()
I have been using flaunt.js ( Original Source, but have modified the initial css and html.
I have removed the class styles from ul and li so it uses just list tags.
But for some reason when I go into mobile.. it shows the 3 line menu button on my local page, but when I click it... things don't work as they do on the source.
I can't see the the menu properly.. I can't see the arrow to show there are drop down.
If someone could assist
thanks
<nav class="nav">
<ul>
<li>
Home
<ul>
<li >
Submenu item 1
</li>
<li >
Submenu item 2
</li>
<li >
Submenu item 3
</li>
<li >
Submenu item 4
</li>
</ul>
</li>
<li>
About
</li>
<li>
Services
<ul>
<li >
Submenu item 1
</li>
<li >
Submenu item 2
</li>
<li >
Submenu item 3
</li>
<li >
Submenu item 4
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li >
Testimonials
</li>
<li>
Contact
</li>
</ul>
</nav>
Fiddle
You've removed necessary HTML and haven't compensated for that in the JS
Original JS:
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
Your modified JS:
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
See how your selector targets the .nav on both lines? This is adding the span in a place the rest of the script isn't expecting. In your JS to change the selector back to .nav-item and add the .nav-item class back to the root level <li>s.
You will also need to change:
// Dynamic binding to on 'click'
$('ul').on('click', '.nav-click', function(){
To:
// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){
There is more than one <ul> in your markup, so your blanket binding the click to <ul> is disrupting things too.
EDIT: Modified HTML, CSS, and JS: http://jsfiddle.net/xtt3j/. I'm not sure why you're so keen on doing everything without any classes. I'm all about reducing markup but I feel like this is going to be a harder to maintain (or to just wrap your head around). And finally, the arrow won't display in any of these Fiddles because it is an image.
I have modified your example code on http://jsfiddle.net/WdN8J/10/. In Chrome, there is initial padding offset so I put -webkit-padding-start: 0px. The conflict is that your dropdown nav has absolute position:
.nav ul > li > ul {
display:none;
position:absolute;
left:0;
width:180px;
}
So I added the following line in the click action:
$('.nav ul > li > ul').css({'position':'relative', 'width':'100%'});
I have already got a nav menu at the top of my page, but now I am trying to expand a sub menu when I hover over one of these options. My first idea was to simply have a "div" section of the code like such
<div id= "expanded_menu"> <!-- sub menu option --> </div>
and show/hide it based on whether it's nav option was hovered over, but then I realized that the submenu would disappear as soon as I took my mouse off of it's corresponding nav menu button. Does anyone know a way to hover over an option, have that bring up a menu, and then be able to access the submenu without it disappearing?
The usual way to do this is with nested lists...
<ul id="main-menu">
<li>
First menu item
<ul class="sub-menu">
<li>Sub menu item</li>
...
</ul>
</li>
<li>Second menu item</li>
...
</ul>
And use the following CSS.
.sub-menu { display: none; }
#main-menu li:hover .submenu { display: block; }
As long as the sub-menu is nested in the parent menu item's div, your method should work. So your HTML structure would be:
<div class="main_menu_item">MainItem
<div class="sub_menu_item">Item1</div>
<div class="sub_menu_item">Item2</div>
</div>
Then you're still hovering on the main item when hovering on the sub-items.
However, I personally would implement this all in CSS -- search for "CSS menus" and you'll find a ton of resources.