I am designing a mobile website. On the homepage i have menu items say 'a' ,'b' ,'c',...,'h'.
I want to display only first three menu items and make a 'View All Items' button that on clicking expands to show all the items.Also the button should become 'Show Less Items' after clicking on it.
I want to do this using only HTML5 and CSS3 and no JavaScript.
Also i want this functionality to be reusable around the website.
How should i do it?
--Thanks in advance!
Modern mobile browsers all support JavaScript, but give end users (at least in Android's case, not sure about iOS) a configuration setting to disable it.
Your best bet as a developer is to use the "fail safe" strategy: Ship the HTML with the menu fully expanded, and use JavaScript to collapse the menu immediately on load (or on DOM ready). That way, if you have mobile users with JavaScript disabled, they will see the whole menu. Most of your users should have JavaScript enabled, in which case they will get the expand/collapse functionality you describe.
It's unrealistic to expect to implement this without JavaScript, and if you can find a workaround I don't believe it to be as stable as simply using JavaScript. In terms of hiding the menu items you could set their CSS property to display: none; and place a button which targets these menu items and toggles their display property.
Related
This is my website for a school project, it is designed to be viewed on a phone. I have a dropdown menu on it near the top that uses hover, which does not work on touch devices. I need to make this work with clicking (I don't really care if hover still works, I need to click) but do not know how. How do I make this work with tapping on a touchscreen? I really want to stay away from javascript for now and just use HTML and CSS. I am very new to webdesign so I will need a very basic explanation. Also I know my images take a long time to load, any suggestions on how to address that would also be appreciated.
Thank you!
Most touch devices lack the ability to provoke a true hover interaction (some exceptions would be the Samsung Galaxy Note with pen, Microsoft Surface devices with pen, and the iPad Pro with pen).
That said, touching an element that has a :hover pseudo selector with associated styles (as you do) should invoke that hover event, even in mobile browsers on touch devices.
Have you viewed your website on a touch device? The menu appears as expected with tapping on my Google Pixel (with Chromium browser) as well as on my Surface device in tablet mode.
There may be some browsers/devices or combinations thereof that do not exhibit this behavior, but I believe it's quite standard.
If you need a more principled solution, I'd suggest making the nav toggle a <button> element and executing some basic JavaScript on click events. I realize you don't want to stray into that territory right now, but that's exactly the sort of use case at which JavaScript excels.
If you really want to avoid JavaScript and you don't like relying on the touch-invokes-hover-event approach, there's always the checkbox hack. As the name indicates, it's a hack. I wouldn't recommend it for your particular use case. But to each his/her own.
Here's a CSS Tricks article on all the interesting uses the checkbox hack can be applied to.
I have been tasked with going through the a11y project checklist.
(http://a11yproject.com/checklist.html) for those who aren't sure what that is.
I noticed that on our website, (www.adn.com) when you tab through the website, it goes through our entire left-rail menu, before making it to the article content.
Is there some way to manipulate the order in which our site is "Tabbed through" for keyboard only users?
New to the industry, currently am a Junior Dev. Apologies if this is a simple question.
what you are looking for is tabindex
w3schools example
W3Schools
Google
Microsoft
Reference: w3schools.com/tags/att_global_tabindex.asp
The problem you're having isn't a tabindex issue, as the tabindex is correct for the menu's position in the DOM. (also changing tabindexes to values beyond 0 or -1 can really screw up the expected tab order for an interface).
What is going on here is that the menu has been visually hidden, by positioning it off screen, but it has not been adequately hidden from keyboard users/screen readers.
You'll need to update the CSS of your menu, so that when it is positioned off screen, the id="slider-menu-nav-list" is set to display: none. Then when the menu button is activated, the #slider-menu-nav-list should be set to display: block;
Looking through the source code some more, you'll also have to change your Menu button into an actual <button> element, as it's currently keyboard inaccessible as a <div><span> combo, so there is currently no way for a keyboard users to actually open the menu. (not all keyboard users are blind, and it can be frustrating to not be able to see where your current keyboard focus is located).
Hope this helps!
I was faced with this problem on IE11 Mobile (Lumia 520 Phone) on an existing navigation menu, where every link inside my submenus were not firing a click, on the first tap.
This fiddle repro is a partial flyout accessible navigation menu, taken from a sample WAI app menu.
If you test it on IE10 or IE11 Mobile or Touch, you will obverse that none of the submenu links work.
They must be clicked twice to fire the click events.
Why is that?
This bug is a result of a feature to "help simulate hover on touch-enabled devices" that was deployed starting in IE10-11 for Touch.
In short, what causes and requires the double tap is having aria-haspopup=true as the submenu parent element level. Because of it, IE Touch wrongly assumes all those links are toggle themselves and treat them as such. I shall also note that for similar reasons, iOS Safari has its own way to treat elements with “:hover[s] that either hides or shows another element using visibility or display”.
As explained on MSDN’s Internet Explorer 10 Samples and Tutorials:
Alternatively, Internet Explorer 10 adds new behavior to the existing aria-haspopup property to simulate hover on page elements with hidden interactive content.
The issue is that while it was supposedly designed to be helpful, that implementation is based on an incomplete and somewhat misguided reading of what aria-haspopup is, and what it is supposed to do.
aria-haspopup is technically a property (and not state). Meaning that IE placed a touch behavior on an element that isn’t supposed to change at runtime. Unless a responsive context would perhaps require such a change; aria-haspopup='true' shall remain true even if the popup element is shown. The state for the switch being aria-expanded instead.
The concept only works for the MSDN example of aria-haspopup as implemented on that tutorial. i.e. If aria-haspopup=true is placed on the toggle button itself, that IE Touch feature will work as intended. However if the aria-haspopup=true attributes is placed at the parent level like my repro, or like a more traditional app menu, as per this W3C/WAI example, it's a problem.
The solutions to go around this bug are to, either not use aria-haspopup=true on parent elements because of IE10-11 Touch (which sucks for accessibility), or remove it from touch enabled IE10/IE11, either on the server side or with Javascript accordingly.
A common problem I run into when building responsive websites is how to make a multi-level nav menu (3 or more levels) that works well for touch devices. I've seen a lot of plugins and techniques, but most of them fall flat because they don't allow a 2nd-level page to act as both a link to a page AND a parent of children in a sub-sub-menu. Some techniques address this by having an arrow icon that exposes the children menu items while clicking on the parent page name goes to the actual page... but on mobile devices these icons are usually very small targets and hence hard to use. Are there any other solutions to this problem (either jquery or javascript plugins, or straight-up CSS/JS code)?
I have a 'starting point' of sorts that I use for responsive web projects like this. I'm not sure if it's exactly what you need, but it allows for multi-level dropdown menus in desktop view. In mobile view, jQuery automatically creates an off-canvas menu.
Code:
https://github.com/kthornbloom/Responsive_Template
Demo:
http://rwd.kthornbloom.com/
Hope it helps!
Have you checked out any of the documentation surrounding touch-start events? I feel like you're going to get the best ux from this method. In your position, I'd be using tap to toggle classes onto your menu that would set the display to block (for example). Once your menu is open, you could then bind another touch event to the sub-level objects.
After our discussion in comments, it seems there isn't a straight forward way to get what you want due to the fact that we don't know what the user want after the submenu has been opened. There is no way for us to tell if they want to go to a link by clicking on the item again or collapse the submenu.
From this point, you have 2 options
Create a collapse once the menu is open and the user will know to use that to collapse the menu. If you think the size on most sites are small then make it bigger, however I don't think this will be an issue because it is so common.
Create a close button or something close to that for the entire menu. So when you click an item, it will expand, and if you click the same item again, it will go to the link. However there is collapsing the submenu until you click on the overall close button for the entire menu. This is only for tablets/phones as on desktop this should be a hover behaviour. This is similar to how the menu behaves on a tablet for http://www.lexus.ca. We actually have the menu closing if you click on the top most item again, you can see this behaviour on the phone or tablet. This is another option for you if the top level navs does not lead to pages.
Found a great write-up for a solution: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
What is the best way to display a drop down menu? for the sake of best practices.
keeping in mind:
-Accessabilty ,
Its viewable with javascript off
screen readers
-backwords capatabilty ,
viewable in IE6
-cross browser
I'm asking this because I've recently been working on some site that have css only drop down menu's that do not display the drop downs in IE6
Is displaying the drop down as a list if javascript is off the right way to do it?
The standard for javascriptless dropdown are called suckerfish or son of suckerfish dropdowns: http://htmldog.com/articles/suckerfish/dropdowns/
In IE6, though, as you'll notice, they use a little bit of js to mimic hover. That's fine--so long as the first link you hover over, that triggers the dropdown, is a real link! Have that link go to a page where they can navigate to those pages hidden in the menu. If nothing else, simply copying the submenu they're missing and making that the content of the page will work.
Voila, accessibility.
If you must ensure, it's viewable with JS turned off, go with a CSS-solution. Here's one that claims to be cross-browser:
http://lwis.net/free-css-drop-down-menu/
even though it uses a little JS for IE6 (and older).
Or maybe setup your own, using this tutorial:
http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html