Does anyone know how to achieve this menu effect? If you go to https://unity.com on desktop hover over the solutions in the menu then hover the links. You will see the text change on the right as you hover over different links. That's what I want to achieve. I have already got a mega menu for the client but they want this text hover effect. 😬
Related
I am using bxslider for carousels and its below the navigation menu, when I hover over the menu to display the submenu, it displays but items below hide behind the images.I expected the submenu to be displayed infront of the images(as it works when images are not in a slide show).When I add multiple br tags between the menu and the image slider there is space for the submenu to be displayed but this is not what I want.
When the screen size is adjusted to mobile view there are no issues as I use slicknav.
I have a little issue with a menu on my Joomla 2.5 page. It's a module and I used several CSS properties like:
visibility:visible; z-index:99999!important
Yet, the menu does not delays for me to click it.
I want the menu to be clickable when the reader mouse over and mouse on the second level menu. I don't want it to disappear any more.
A sample of what I want the menu to look like can be found here: http://vitafoam.com.ng
On the css class ul.navi ul.level2 on menustyle.css, remove the top: 91px property. It is throwing your level2 menu down, and keeping you from hovering it.
Removing the top property fixed the problem, at least on my Chrome Debug.
I know this will be a simple fix for all the CSS pros out there but I am fed up with it at the moment and anything I try won't solve it.
When you hover over certain nav items there will be a drop down. I need that little white gap between the drop down and the item but it disappears as soon as i try to go down. Any solution would be greatly appreciated.
There's a gap between the "GM Parts" button and the dropdown menu. You hover over the button then menu shows up. Then you try to drag your mouse to the menu, but while you are doing this you hover over the gap - that's where "GM Parts" looses :hover state and the menu hides. You need to make sure that there's no gap between "GM Parts" and the menu.
I have this menu that when I hover on certain items, it dropsdown a list of new items. Sometimes this list is bigger than the browser window, so user need to scroll the page down to be able to see the whole list. The problem is that when the mouse reacher the scrollbar naturaly the menu lose it's hover function. I need to fix that asap, any suggestions?
Thanks.
Instead of doing hover on the menu item, maybe you should do an onclick event. This would allow the menu to appear on click and then when the user clicks the menu again it could make the sub-menu hide. This would allow you to scroll down the page and still have the sub-menu showing.
BTW, this assumes you cannot break the menu down into sub-menus like Nathan MacInnes mentioned.
Well if the user has to move the mouse off of the menu, it naturally should close. Maybe you should try making the menu shorter, or try making the menu itself scroll?
I created a css dropdown menu so my site will work with iphones. The dropdown is working correctly except for when you hover over a dropdown the sub items in the menu expand but when you hover over them the image on the main dropdown item looses it's color. I have it setup so that a different image is displayed when the mouse is hovering over it. Here is a link to pretty much the same code I have on my website. I just want the image to stay the same whether I am hovering over the main menu item or the subitems. Any help would be much appreciated.
http://jsfiddle.net/h5xZT/5/
To update your code it's simple. That should set you on your way. There is no need to use the "button" within a li item.
http://jsfiddle.net/h5xZT/19/