When I hover on a static menu item that has a dynamic menu, the hover styles are in effect but once I start navigating the dynamic menu the static menu item goes back to the non-hover styles. Does anyone know how to make them stick until I stop ''using' that menu? I tried the 'selected' static menu item styles but that doesn't work - if I use them, even when I stop navigating the menu the last selected static menu item will display the selected style - after using the menu I want the styles to revert to the normal styles....
Hover is basically an encapsulation of mouseover and mouseout event and it is tied to one element. For instance if you have an implemented a menu as an ordered list and have implemented hover for list item then each and every element will have mouseover and mouseout event associated with it. In your case hover cannot be used. I think it would be better to use custom logic.
HTH
Related
I am creating a navbar with dropdown menus for both desktop and mobile users. On desktop, the dropdown menus are displayed when the user hovers over the top-level elements and disappear when they mouse away from it. This is the expected behavior. However, on mobile, when I open the navbar and try to focus on each top-level menu item to reveal the dropdown content inside, I am running into an issue.
When I try to jump, for example, from the first dropdown to the 3rd dropdown, my tap appears to be in the correct place, but the instantaneous collapse back to hidden must happen before the next tap is registered. This leads to all of the menus collapsing back down. I have noticed that if I start at the lowest dropdown option and work my way upward, the issue does not occur because I am tapping on coordinates that are not reflowed when the content changes. I am looking for a solution that allows me to jump between any two navbar items, no matter the order or length of dropdown options without having the menu collapse down completely.
This is a link to what I'm working with. Content reflows to mobile layout at about 750px viewport.
LINK TO EXAMPLE
I have tried adding a delay to the transition property but it did not prevent the jumping of elements in my CSS dropdown menu when jumping between items in mobile navigation. I was expecting a solution that would prevent the jumping of elements and allow for smooth navigation between items in the mobile navbar.
I have some anchor tags(tried with navlink tags also) in a menu. For any link, there can be active(clicked), hover or normal styles(defined in css).
I have separate styles for all 3. They display normally for normal styles(not hovered, not clicked/other tag clicked) and hover.
Now, I want active styles to STAY when I click an anchor. But they disappear when I stop holding the mouse button.(meaning those styles stay for that clicked link when I have clicked on it and holding the mouse button. When I stop holding the button, styles disappear).
The color changes to blue instead, and goes to other links when clicked, which is how it should be for the styles. But I am not understanding where is that color coming from either.
I am building a website in Joomla, and I'm trying to make a menu in which some menu items should not have any article associated with it; clicking on them should only reveal the sub-menu items, but the rest of the page should stay static. So, I set that parent menu item to Separator, and added some sub-menu items to it. However, for some reason, the parent menu item is not clickable, meaning that I cannot reveal the sub-menu items.
Here is my website: http://vaterlinija.lt/
The parent menu item that has sub-menu items is the second one from the bottom (as you can see, it is non-clickable).
How do I fix this? I tried using Menu Header and URL (set to #) instead, but the result is the same. The only way to make these sub-menu items to show is to set that parent menu item to something like Single Article or similar, which is precisely what I want to avoid. I am using my own template, made from scratch. Do I need to add something to CSS, maybe?
Using a blank Wordpress theme to create a custom site, but it did not have any CSS for a drop down submenu. I have it basically working but when I try to move the cursor to the second drop down item down under the (events tab) the sub menu disappears.
site is here
I thought I have it all set to display block so that the whole menu item is the button, but not the case here.
You need to set the z-index of the drop down menu higher than the image. By default elements have a z-index of 1, so anything greater than 1 will do (unless you've specified otherwise)
I added an asp:menu control (with a web.sitemap backend) to my app. For this particular app, when the user is not logged in, I don't want to show any menu items, but I do want the menu to have the same color as the bitmap header under it. However, when the menu is empty, I just end up with a blank rectangle. It's a static menu, 5 items, using CSS to style it. I've tried adding the background color to the menu, the staticmenu style, and the staticmenuitem style with no luck. Any ideas?
Why not wrap the menu control in a div to create a container that will always exist regardless and give it a background color?