I have the following lines in my website - http://codepen.io/anon/pen/LhDnu/ that creates a sidebar menu.
As the user hovers their mouse over a parent, listed item with child-links within it, a sub-menu appears.
However, when the mouse moves over to select one of the child-links, it removes the sub-menu listed items.
How can I modify the codepen above so that it will allow the user to select one of the sub-menu items?
Here is a working code for you, in css dropdown menus try to work with display:none & display:block not with the opacity
http://codepen.io/anon/pen/luGDK/
Nevermind. Here is the solution - http://codepen.io/anon/pen/LzpyK/.
Related
I have a website Mawtini I change this website to support Arabic language (RTL)
The submenu opens to the left when it was in english, I changed it to right because of RTL concerns.
Everything is ok except the submenu, when you mouse over the first level of submenus (up & down) the submenu opens firstly to the left for milliseconds then it opens to the right
Technically, when your mouse hover the item, it shows the menu to the left, but when it remove li item the menu flashes (show for few milliseconds) to the right.
What should I do to remove the flashed submenu to the right?
Looks like the problem is the property "transition" has in the selector .sub-menu. To works how you want, that property must be in the "sub-menu:hover" , only.
I hope it helped you.
Everything works. However, when clicking on the drop down menu icon, the drop down elements hesitate to slide at first. I obviously want it to have a more fluid transition when sliding.
here is my jsfiddle
https://jsfiddle.net/0s49o5bz/
The problem is, that you are setting a min-height for several elements, as the span and the ul. This prevents the animation from being fluent.
On one of my sites I have a menu which overflows so I added some jQuery to control the menu position, but my menu has dropdowns I still want the dropdowns to show outside the menu but as overflow hidden is applied without position fixed I cannot get it to show,
Is there no command in css that accounts for the need to sometimes make a child element visible again?
Is my only solution to use position fixed or rebuild the dropdown and menu so it expands the menu when an item is selected.
If all you're looking for is a yes or no answer then:
No, you cannot have a child element that is outside of a parent with overflow:hidden be visible except with position:fixed;
My head is about to explode as I try to figure out the reason why my dropdown menu stops working as soon as the page jumps to an anchor. There is some JS involved in the jump, too, but the same problem existed even with a plain html anchor jump.
The page is at http://mincovlawyer.com/doc/euro-excellence
As you load the page, please hover over "The Law", "About" and "The Goodies" and see how the dropdown is supposed to operate.
Then click any of the links in the sidebox to the right, for example Alt. #1.
Then hover over the menu items again and observe that no dropdowns emerge anymore.
I would immensely appreciate any guidance in this regard.
The rollover breaks even if you just scroll down the page. The rollover menu is positioned absolute and the navigation is positioned fixed. You could add 'position:fixed' to your rollover menu or you could add the scroll offset in your drop down menu code.
To set 'position:fixed':
At line 8 of the anylinkmenu.css file, change the position:absolute to position:fixed.
It looks like they're working, but they are above the top of the page. Before clicking on any of the links, scroll down just a little bit. Then hover over "The Law" and you'll see your menu shifted vertically.
Now that's a lot of code...
Where's your menu created? The mouse-over stuff
Question1:
Why even using any javascript for an inline-anchor? Using #links scrolls to said position anyways, even without JS?!
Okay, so I've got two drop-down menus on my page, Navigation, and Links. Links works normally, but Navigation disappears when I try to hover over it. I got no idea why, so I'm asking.
Why does my Navigation menu disappear when I hover over it, and how do I fix it?
My site with the error
You have an element that's hanging over the left menu named #crwrap. So when moving your mouse to the Navigation options, the mouseout is triggered because you're suddenly hovering the #crwrap element instead of the Navigation menu. It's invisible but if you use a debugging tool that supports DOM searching you'll see it covering the area of the Navigation menu options.
It's not covering the Links menu so that one does not have any problems.
If you remove #crwrap (or move it to the background using z-index: -999), it works fine for me.
Your JS to show the menus is toggled by mouseover and mouseout of the elements in your menu section. The submenus are not nested inside these elements. Therefore, when you move the mouse down toward the submenu, you trigger the mouseout on the main menu item, which is hiding the submenu.
I would recommend nesting the submenu items inside the main menu item's container.
I would also advise you check out the excellent alistapart.com article about CSS hybrid menus. It has some excellent pointers and techniques you might find useful.