I currently have a navigation that is based on the bellow image. (sorry about the terrible sketch) I have a tab along the top called "films" that is also classed as a department.
I would like the tab "films" to open the sub cat films located in the department tab as though the mouse was hovered over that.
Currently the department "films" is a list item under an ordered list of department and has an ID of MM05.
The tab "films" is again another li in an unordered list for the top bar that originally had its own drop down.
Not sure how I can get around this!
This is sadly not possible just using CSS as "Cascading" means that you can only go downwards with your selectors.
You would have to use Javascript for this.
This would look something like this
<script>
var linkToOpenDropDown=document.getElementbyId("filmLink");
var dropDown=document.getElementbyId("dropDownList");
linkToOpenDropDown.onmouseover=function() {
dropDown.style.visibility='visible';
};
linkToOpenDropDown.onmouseout=function() {
dropDown.style.visibility='hidden';
};
</script>
From your drawing, I am thinking you will have a static DIV that holds a sub menu. So on click it would "visibility: hidden / visible" change to what you need. I assume that is the location where you want it to show, so mouse over wouldn't work since you can reach it from the button location with out going mouseout...
Please do provide little more code or info on this, thanks.
If i understood correctly, I would make that a onclick (show, hide) type DIV, and have that div with LI use onMouseOver Show / Hide additional panels
Related
I have a mat-sidenav and a list of mat-item and mat-menu. Then when I hover over of one of the items I want the menu to display. This part is working. But then when I move off of that menu or item and over a new item I want its menu to display.
https://stackblitz.com/edit/angular-xsscrm
I have included a stackblitz with a demo of the behavior.
What is wrong here I have both on enter and exit, but then when I leave a menu on to a new one, it doesnt open unless I click on it.
Thanks for the help
The issue here is that when a menu opens, it creates an overlay with a backdrop that overlaps all elements. This backdrop is causing the mouse events to not be 'seen' by the listening element until the overlay is dismissed via a mouse click. Luckily, the menu control has a flag to remove the backdrop; setting this to false fixes the issue you're seeing.
Side note: you have an *ngFor on the <mat-list> element, but I think you want to move it to the <mat-list-item> element instead because you want many list items, not many lists. Since you're using the local variable of *ngFor outside of the <mat-list-item>, you can create an <ng-container> element to house your *ngFor. See below stackblitz:
https://stackblitz.com/edit/angular-xsscrm-kx6jyd
Another side note: this behavior is similar to a tooltip. Perhaps that would be a better control for your use-case? https://material.angular.io/components/tooltip/overview
commerce site that has a particular tab navigation code that allows users to click and view information.
The Tab Nav looks like this:
Details | Shipping | Returns | Lifestyle View
When you click on anyone of these a paragraph appears below the tab with more information. What happens though is that all the other list items get pushed below the paragraph rather than staying in their current positions. So for instance if I click on "Details," the "Shipping," and "Returns," tab gets pushed down. I would like all the menu items to stay intact and just have the paragraph appear below each menu.
Any help would be greatly appreciated.
the page can be found at:
http://babsandmickieco.myshopify.com/collections/clothing-all/products/sana-dress#
As I've demonstrated in this JSFiddle, it really is a case of just appending an in flow element onto the list item. In the example I have provided, I used the following jQuery code to append a paragraph element (P) to a List item element (li).
Snippet
$("#clickAble").click(function(e) {
$("#clickList").append($("<p id='appended'>Hello</p>"));
});
As you can see, it's fairly obvious what his does. This created something of a rough example, but it's a working example nonetheless.
I'm attempting to implement a multi-level drop-down navigation menu in CSS only but there's one small part which I just can't seem to get working correctly.
What should happen is:
1) When hovering over a menu item, it should be highlighted by using a different image (this works fine).
2) When hovering over a sub-menu item, the parent menu item should be highlighted.
Point 2 works fine up until I have a class .bottom on the parent menu item (this class is used as the image is slightly different). If the parent menu item has class .bottom, the highlight simply doesn't happen.
A demo of this can be viewed here: http://jsfiddle.net/cZFtW/2/
The demo shows that when hovering over Menu 1 > Sub Menu 3 > Sub Sub Menu X, Sub Menu 3 is highlighted. However, when hovering over Menu 2 > Sub Menu 3 > Sub Sub Menu X there is no highlight.
Can anyone see what I'm missing? On a side note, there's no real reason for not using Javascript here, I'd just prefer to have it all handled by CSS if possible (only need to support IE7+).
TL;DR; version: this fiddle shows the answer.
I understand what you mean. And I am pretty sure that the styling to which you need an answer to, which works for all except for the one at the bottom, has arisen purely by accident. (Kind a nice one I must say). I am almost certain of this, because your code as well as the file names lack any form of consistancy. There is double code, there is superfluous code, and there are images missing.
Therefore I have rewritten your markup and style sheet, and came to the fiddle as mentioned above.
Now, how does it work?
The trick is to attach the background image to an element inside the list item. In this case I chose for an anchor element, since that is most the likely. The first step is to change the background image at hovering the anchor, that's basic.
The second step is to change the background again when you hover over the submenu. At that point, the anchor element isn't hovered any more, but the list item is. So you can still change the background of the anchor element.
Note: in my solution there is a small difference to what you wish: when you hover the arrow, the background if the list item is already changed instead of until the cursor is over the submenu. If you want to prevent that, then you have to add an extra element for every sub menu like you had done yourself. But I think this is pretty nice also.
This problem refers to the main (header) nav menu on THIS PAGE.
When any of the items in the "Services" drop-down submenu is clicked, I want the "Services" page to open (in the existing browser window) AND for a specific anchor tag element on the "Services" page to be in focus. I've achieved this OK. BUT, when the targetted anchor tag is in focus, I want it to also behave just like a manual mouse hover had been performed on its parent div, ie there should be a slide-down of text corresponding to the focussed element.
For a manual demo, go HERE and hover on one of the vertical list items - text will slide down to the right of the list.
HTML for the "Services" submenu link:
<li> collaborative law</li>
HTML for the targetted "a" tag and its parent div (ie "a" tag that should be in focus on "Services" page):
<div id="mylist1"><h3>Collaborative Solutions</h3></div>
Script to drive the hover behaviour of the focussed "a" tag and its parent div:
//fades in desired text after fading out whatever text is already displayed:
$(document).ready(function() {
$('#mylist1').mouseover(function() { //note first list item must be called mylist1 to avoid conflict with other code
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
//capture click events as well:
/* $('#mylist1').click(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});*/
//capture focus events on <a> as well:
$('#myTag1').focus(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
});
Note the main nav menu has been created using jquery, via a Dreamweaver extension.
What I have so far:
When the "Services" page opens, the correct target is in focus (as shown by the browser address bar). However, this focus is not triggering the expected text slide-down event. When I hit tab, the next list div goes into focus (as expected) & the appropriate text slide down occurs.
Am I hoping for too much? Have I misunderstood the limitations of 'in focus'" Will Mt Hotham have a killer snow season this year ?
Your sage advice is greatly welcomed!
Kirk
I'm not sure your use of "in focus" is quite what I expect... Having a fragment in the url doesn't necessarily give focus to that element, it just moves the display down to it. I assume the reason it works for tabbing is that tabbing does focus on elements and I assume it starts at the element that has been scrolled to.
What I'd suggest is breaking out your display script into a named function (so it can be used from elsewhere) and then on page load you can pull out the fragment from the url (eg #famLaw). Using that fragment you should be able to find the right element on the page and focus it.
It should be noted also that pulling the display text into a separate function has the advantage of consolidating your code - you are basically duplicating the code in the onfocus and onready events so breaking it out makes for easier maintenance and reuse. :)
P.S. I guess yes for Mt Hotham. I'd never heard of it before but I'm going to be optimistic.
I have a menu set up that has about 20 menu items in a circle. When you mouse over each item, a title comes up. The only problem is that because of the depth order, it's hidden behind the other menu items. Is there a way to bring this item to the front when moused over? I'm pretty actionscript illiterate so any help would be awesome.
If you don't want your object being removed and then added to the display list using addChild you can use setChildIndex
var parent:DisplayObjectContainer = myElement.parent;
parent.setChildIndex(myElement, parent.numChildren-1);
You can move an item to the top by re-adding it to the display list, using addChild(item), even if it is already added as a child. Something in the lines of this:
function onMouseOver(e:MouseEvent) {
e.target.parent.addChild(e.target);
}
It may feel a bit odd to use this approach, instead of other possible methods to move stuff around in a display list, but since addChild(object) first removes the object from a display list, before adding it, it will work just fine.