I have made the menu with CSS {overflow:hidden} and use JQUERY to lift up menu when hover on it. But there is one issue occur in google chrome browser. When I press tab key from keyboard to select menu, all the menus are lifted up and showed. If I not use {overflow:hidden} in menu CSS, then can select menu with tab key and design is OK. So kindly advise me how should I handle for this case? Thank You.
Related
For accessibility, what is the best/correct aria-label of a submenu. Should there be a general label followed by the purpose of the menu? Or should the aria-label be the same for all submenus?
Example: The image shows an example menu for book settings. When the user focus the menu trigger button. should the aria-label be: "submenu book settings" or just "submenu".
Open for suggestion!
It depends if you are using aria-haspopup="true". Having that attribute will already notify the screen reader user that you have a submenu. Different screen readers might announce it differently but the gist of it is that there's a submenu so you don't have to include that in your aria-label. You can just have aria-label="book settings".
Note, however, if you use aria-haspopup, then you are committing to supporting up/down arrow key navigation through your menu, rather than tabbing through the submenu list. See an example of the menu button pattern.
Alternatively, instead of using aria-haspopup, you could use aria-expanded. You can support either tabbing through the submenu or arrowing up/down through the submenu, or both. See the Disclosure Navigation Menu example. With aria-expanded, the screen reader will hear "collapsed" when they navigate to the 3-dots icon so they'll know they can press enter/space to expand the menu so, again, you don't need to say "submenu" in your aria-label.
Here is my link: http://www.websouthend.co.uk/jc/
I am having issues with my drop down menu.
Under the galleries link there is a drop down, which is dropping down and displaying fine in Firefox, a little funky in chrome but can be fixed with css.
My issue is the links aren't actually directing to the pages... The markup looks ok the anchor tags are surrounding the text and formatted correctly, so I can't for the life of me figure our what's missing.
The sub menu (drop down menu) anchors have a data-toggle="dropdown" i expect this prevent the link from opening. Javascript try to open a new dropdown and the default click behavior stops.
Also see: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/20
Is there any way to view the styles applied during hovering of an element in Internet Explorer? Chrome and Firefox provide this in styles tab as we can see in console bar.
I want to know whether the same thing can be viewed in Internet Explorer. If so how?
Once you've pressed F12 and selected the element in question, you will be shown the CSS styles on the right - this does not however update when you hover over the element like in FireBug - nor can you set it's state as ':hover'. What you can do, is once the element is selected, ensure the focus is on the developer bar and hover over the element on the page - while hovered over it, press F5 - if you now reselect that element, the styles on the right hand side will show you the :hover styles ("Trace Styles" will also update)
In IE, you just press F12 and it will bring up the Developer Console. There you will find a CSS Tab.
Or after bringing up the Developer Console ( F12 ) you can use the pointer tool to highlight an element on your page and you will view the element Styles on the right pane of the Developer Console
http://www.sitepoint.com/debug-faster-with-f12-developer-tools-in-internet-explorer-9/
You can navigate to,
Tools >> DeveloperTools
Shotcut- F12
go to InternetExplorer menu : ->Tools->Developer Tools Shortcut : f12
my website is using a pure CSS3 dropdown menu. The problem is when the website is view on touch screen device, some of the menu item with hover property doesn't auto drop down.
How can I change it to be like, if the menu item has a hover dropdown, in touch screen devices you have to touch it then the menu will drop down where else in our PC it will still remain the hover effect.
Can it be done by using CSS only?
Have you tried using aria-haspopup to simulate hover on touch-enabled devices
Take a look at this article.
On a page element such as a menu, set the element's aria-haspopup
property to "true". When an Internet Explorer 10 user on a
touch-enabled device first taps the page element, the user's
experience will be identical to that of a user who hovers over the
element with a cursor.
I'm not sure what the browser support for this is like though.
"hover" is not really a feature of touchscreens since it needs to have a mouse pointer involved. If you are using a good library that supports touchscreens, it should also work. If not, try another library or write something your own.
I'm using Google Chrome Developer Kit, I have a button with some CSS style applied, I need to see the properties associated on this status Hover in Googel Chrome Devoper windows.
How to do it? When I move out from the button change status and I cannot see the CSS applied.
Thanks for your time!
When you inspect element, there are a couple of icons top right ...
Click the one as in the image (pointer) and select the states for your element with the checkboxes.