I cannot get the main menu to stay highlighted when going to sub menu or when in a sub menu.
Anyone have a css trick to highlight (maintain the highlight)in the main menu when the sub menu is being hovered or clicked.
Thanks...
As we don't have proper sample code of yours.
To achieve this, I suggest you to use JQuery & CSS for better look and feel.
Below is JQuery plugins URL. You can find 7 styles of horizontal menu's.
http://plugins.jquery.com/project/jQuery-Horizontal-Menu
Related
I have a CSS menu that when you hover over a li it shows a sub menu, example ui: http://www.screencast.com/t/JIa2NvbreF8V
I added code that on a model device is would 'focus' the element when you click/tap it, like: $($event.target).focus();
problem is, when I tap a <a href="\blah"> link inside my page navigates fine but my menu stays open. I tried retriggering the body to be the focus but no luck. Anyone got a good idea on how to accomplish this?
What I would do is add a class to control the "focused" state, so that when you click on a link you can easily remove it.
Shouldn't be complicated but i would need to look at the code :O
Try the below code
$("a").focusout(function(){
$(this).css("display","none");
});
Regards
maha
inside that jquery selector have it so when you click the target it also changes the style for the parent li:hover
A question is bothering me.
I trying to modify a menu item in my menu. It's the last item in it.
How could I change its position with CSS?
Dev Tools say that item has item-124 class in html.
Any ideas?
You should perhaps reorder your menu items inside your Joomla menu manager - to reorder using css only would cause you headaches at a later stage :)
Do you want to edit where it it positioned on the page or just the order in which it displays?
I have centered the Superfish Navbar menu on the page but struggling to find a way to center the first level sub menu on the page.
I couldn't post an image here as I do not have 10 reputations.
Here's a good work-around:
Step 1:
Create a Javascript function to displace the sub menu. Something like this:
function DisplaceSubMenu(myDistance){
document.getElementById("mySubMenu").style.margin-left= -myDistance;
}
Remember: you have to give the un-ordered list an id of "mySubMenu".
Step 2:
Call the Javascript function when hovering over "Home" or "Services" since they hold submenus. You make the same call, but pass the "myDistance" attribute as a custom distance (try & error). Here's an example:
Home
I have a Kendo menu as my main menu, with config starting like
#using Kendo.Mvc.UI
#(Html.Kendo().Menu()
.Name("main-menu")
.OpenOnClick(false)
.Items(items1 =>
Finding no other config option, I thought making OpenOnClick false would make some magical OpenonHover true. I want menu items with children to open on hover so that I can get rid of the arrow to the right of the parent menu item text, as there is absolutely no spacing between the arrow and the tick. I have unsuccessfully tried the :before and :after' pseudo-selectors to insert space, to no avail. All I could get inserted was a literal " hehe.
Take a look at this jsfiddle. FYI-it's using jQuery, not using Html helper. Hope it's helpful to you.
You can open menu on hover.
I would love to use wordpress built in menu system and I need sub-menus. Is it possible to on hover show that menu items sub-menu in other place. See image.
Thank you. Any suggestions how to achieve this.
You can create the Sub-menu via the CMS in the menu panel dinamically under the parent label. Then you can just hide it onload and show it on the parent's hover. However the sub-menu must have position: absolute and, given your example the liwould have to de displayed inline.
A sample code would be useful to sort out details but this should work.