In bootstrap there is a nice css class 'active' to apply to menu elements to indicate on which page a user is.
I assume it will work the same in metro ui but I was wrong
<ul class="app-bar-menu" data-bind="foreach: router.navigationModel">
<li data-bind="css: { active: isActive }">
<a data-bind="attr: { href: hash }, text: title"></a>
</li>
</ul>
The above code (uses Durandal's router) does not make menu items stand out, even if I explicitly set the class without these bindings.
Is there a similiar mechanism in Metro UI CSS for appbar or horizontal menu?
If not, how can I achieve it?
EDIT
I found out that class="active" successfully works with lower level menu items but what about the top level?
I didn't find solution other than to add css override. For app-bar this would be
.app-bar-menu > li.active {
background-color: #005696;
}
If you use non-default colors you'll have to do it specifically for your case, e.g. green:
.app-bar.green .app-bar-menu > li.active {
background-color: #128023;
}
Related
I have two sections with navigation like this:
<ul class="navigation-list">
<li v-for="(route, index) in navRoutes">
<router-link :to="route.path">
<span>{{ route.name }}</span>
</router-link>
</li>
</ul>
and then:
<div class="burger-navbar" v-show="showBurgerMenu">
<ul>
<li v-for="(route, index) in navRoutes" #click="closeBurger">
<router-link :to="route.path">
<span>{{ route.name }}</span>
</router-link>
</li>
</ul>
</div>
in my css i declared .router-link-active{ color: white;}.
What I expect is when I visit the page with url for e.g. '/about', then About link is white. What happens - only link in the second navigation is changing its color. The first one remains black.
How can I apply router-link-active class to both navigations at once? The reason I'm using two navbars - one for normal view, one for RWD (hamburger dropdown)
Thanks.
You could consider refactoring your code and using scss to change the style of your router links based on the viewport size. That way you only need to have one set of router links and the active one will highlight correctly
for example
.my-menu-style {
// burger style menu here
#include media-min($breakpoint-medium) {
//menu style normal menu
}
}
Also, you are using v-show which just hides the code in the DOM, you might find that if you use v-if to toggle between burger menu and normal menu it solves your problem as this actually adds abd removes the html from the DOM. You will then only have one set of router links in your html at one time
I have a drop down menu that when hovered over works and I added a some javascript that toggles a css class .show-menu on and off when click and removes the hover css for mobile devices. My problem is the menu isn't showing when clicked. I can see in the dev tools that the css class is being removed and added, so the javascript is working fine., so it seems to be a css issue. however I'm failing to see any css conflicts that would be causing this issue. Does anyone have any idea what the issue is here?-thanks
I added the entire css sheet in the jsfiddle as I'm clearly missing something
https://jsfiddle.net/kmut5xtu/
<nav>
<ul class="main-nav">
<li class="main-nav-item current-page">Home</li>
<li class="main-nav-item">About
</li>
<li class="main-nav-item characters">
<span>Characters</span>
<ul class="drop-menu">
<li class="drop-menu-back"><span class="material-icons">arrow_back</span>Back</li>
<li>Ethan Clarke</li>
<li>Serena Kiriaga</li>
<li>Marcus Flynn</li>
<li>Emily Ashdown</li>
<li>Director Miles West</li>
</ul>
</li>
<li class="main-nav-item">Author</li>
</ul>
</nav>
!function app(){
!function AddMenuClickHandler(){
let charTab= document.querySelector(".characters");
let toggle= 1;
charTab.addEventListener("click",function(){
let dropMenu=document.querySelector(".drop-menu");
if(toggle===1){
dropMenu.classList.add("show-menu");
toggle=0;
}
else if(toggle===0){
dropMenu.classList.remove("show-menu");
toggle=1;
}
})
}()
}()
The css below is the issue:
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.characters:hover .drop-menu{
visibility: visible;
opacity:1;
}
Remove hover from these css and you will be good.
Off the bat, you need to tell your HTML that you are using JS. You do this with script tags:
<script>
Your code here
</script>
While I don't personally use JS to disable clickable menus on phones, there is a really simple way to just make them clickable that BootStrap uses, which, if you use BootStrap, will allow you to easily modify things for mobile views.
I made an HTML layout that works as a filter and my HTML looks something like this:
<div class="filter">
<small>User</small>
<em ng-bind="filter.name">All Users</em>
<nav>
<a class="selected" ng-click="filter={name: 'All Users', filter: ''}">All Users</a>
<hr>
<a ng-click="filter={name: 'Person1', filter: 'Person1'}">Person1</a>
<a ng-click="filter={name: 'Person2', filter: 'Person2'}">Person2</a>
<a ng-click="filter={name: 'Person3', filter: 'Person3'}">Person3</a>
</nav>
</div>
Now my approach is I created a directive and when I press on the filter, it adds an active class near the filter class, and with CSS when the active class is applied, I show the
.filter nav {
display: none;
}
.filter.active nav {
display: block;
}
My question is: is there any way can I do the show / hide of the nav div animated using the Angular 1.2 animation library?
Thank you in advance, Daniel.
You might want to review ngAnimate documentation hide/show animation comes (along with others) comes for almost free. You just need to reference ngAnimate, inject $animate and add the enter/leave css styles.
I have tab structure like this:
<ul class="g-tabs-tabs" style="width: 160px;">
<li class="g-tabs-tab" data-idx="0">General</li>
<li class="g-tabs-tab" data-idx="1">Extension</li>
<li class="g-tabs-tab" data-idx="2">Lines</li>
</ul>
I am not using JqueryUI. So i don't want to do this as answered for same question
On hovering over a tab it changes the color(see fiddle).
If a tab is disabled it should not change the color.
How do i disable third tab?
See Fiddle For Example
I suppose you disable it by adding some class (let's say g-tabs-disabled). So just add the following rule in your css :
.g-tabs-disabled:hover {
background-color:#f4f4f4;
}
or if you have support for :not in CSS, you can merge it with the other rule :
.g-tabs-tab:not(.g-tabs-disabled):hover {
background-color:#0000FF;
}
See fiddle : http://jsfiddle.net/Lej2P/2/
All you need to do is to add a class which makes it look disabled by muting the color and overriding the existing :hover classes. Also, need to disable the mouse events to make truly disabled.
Demo: http://jsfiddle.net/abhitalks/Lej2P/1/
Relevant CSS: (just add this class)
.g-tabs-tabs > .disabled, .g-tabs-tabs > .disabled:hover {
background-color:#f4f4f4;
pointer-events: none;
color: #ccc;
}
<ul class="g-tabs-tabs" style="width: 160px;">
<li class="g-tabs-tab" data-idx="0">General</li>
<li class="g-tabs-tab" data-idx="1">Extension</li>
<li class="g-tabs-tab" data-idx="2" data-type="disabled">Lines</li>
</ul>
Insert CSS
li[data-type=disabled]:hover{background-color:#FFFFFF;}
If you want to disable hover effect you can do sth like this
$('ul li:nth-child(3)').hover(function() {
$(this).css('background-color', 'transparent');
});
A while ago you guys helped me with a page jump issue on this page in this forum post. I will be referring to the styled checkboxes under "Clients." Well a while back I just set the min-height on the changing container and it then prevented the page jump, but no longer does (for an unknown reason). Well, I went ahead and put window.scrollTo(0,1400) in my function, but it doesn't center the styled checkboxes correctly on IE so now I'm back to trying to figure out why the page jumps.
The weirdest thing though.. the page jumps when clicking one of the styled checkboxes even if you disable javascript (in chrome developer tool settings and then refresh). Why would a checkbox with javascript turned off cause a page jump?
I had a quick look on your source code I couldn't figure out why do you pull data using json on each click? does the clients change LIVE?
What i mean is you can list all your clients without Using Get Json or any kind of live query and then add a class for their related respective verticals.
For example for Services and healthcare,
css
#verticals li{
float:left;
list-style:none;
background-color: #97ceff;
color: black;
border-radius:2px;
margin-right:10px;
padding:5px 10px;
cursor:pointer;
}
#verticals li.activevertical{
background-color: #2f7fc7;
color: #fff;
}
html output
<!-- list verticals options !-->
<ul id="verticals">
<li id="service">Services</li>
<li id="healthcare">Healthcare</li>
</ul>
<div style="clear:both"></div>
<ul id="customers" class="">
<!-- Add filter class here in the <li> add filter_ before vertical kind !-->
<li class="filter_service">Ecova</li>
<li class="filter_service">HP</li>
<li class="filter_service">Gartner</li>
<li class="filter_healthcare">Henry Schein</li>
<li class="filter_healthcare">GE Healthcare</li>
<li class="filter_healthcare">BerylHealth</li>
<!-- and if a vertical can be in two categories add both vertical classes !-->
<li class="filter_healthcare filter_service">BerylHealth Show in Service and Healthcare</li>
</ul>
jQuery : very short version
jQuery(document).ready(function($){
$("#verticals li").on('click', function(){
var filterli = ".filter_"+$(this).attr("id");
$("#customers li").hide();
$("#verticals li").removeClass('activevertical');
$(this).addClass('activevertical');
$(filterli).show();
});
});
check it out at JSFiddle