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.
Related
I have a pop-out navigation menu that appears on smaller screens when an 'open menu' button is clicked, tapped or keyed with enter or spacebar. (Javascript, CSS and HTML; no jQuery).
The navigation uses divs, rather than an unordered list, with a <nav> container but the problem outlined below happens whether the menu is in divs or an unordered list.
If a keyboard user is tabbing, opens the pop-out, continues tabbing, the user is cycled round the trapped area until either a navigation link is opened with the enter/spacebar keys or the pop-out is closed by using the enter/spacebar on the 'close button' or the Escape key is pressed (with thanks to Graham Ritchie for this code).
It works fine in general. See this Codepen that works.
BUT, if the last item in the menu is both a direct link and a parent with a sub-menu, then the trapping does not work and anyone tabbing in the pop-out menu finds themselves in the browser's address bar area outside the website itself or, in the case of this Codepen where it is not working correctly, the tabbing moves down to the 'Console, Assets, Comments...' area at the bottom of the browser.
Can anyone explain why this is happening and what I need to do to resolve it? Thank you.
I have a Bootstrap navbar on my site with a collapsed menu that toggles on/off. I would like it so that when a user clicks one of the links in the menu (which is a dropdown, by the way), that active link should jump to the top of the menu. This way they can see a more expanded list of the dropdown items.
Here's a regular Bootstrap navbar. I want that when I click on "Dropdown", bring that active link to the top under "project name".
If I understand what you want to do correctly, from a user interface point of view I would strongly recommend against doing this. This is highly unexpected behaviour for the user who is likely to get confused as to why the thing they just tapped has moved. It could also cause mistakes from people opening the menu, then (since their finger is probably still close to the screen) accidentally clicking one of the menu items and being moved to a new page.
If you are worried about users not being able to see all the items maybe you should consider a different menu interface for your mobile devices such as an off-canvas menu (click the little 'toggle nav' button rather than the hamburner menu to see the off canvas menu). This would give you more space to play with for your menu items.
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/.
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.