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
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.
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
I have a few "a href" image links and hovers on a website for navigation (www.byrdnick.com, in the non-mobile version of the site). It seems that these image links confuses iOS browsers. When you tap the image link once, it changes to the hover image. When you tap the hover image, nothing happens. When you tap the hover image a second time, you are finally redirected to the link.
Is there any way I can make these image links work or am I going to have to try a whole new method like a map or something?
Thanks in advance to all you gurus who help guys like me out!
This is because of all the strange stuff your psd2css.js javascript does to tweak your divs and links.
I never used this tool, but it seems that your Web page was generated using an tool called psd2cssonline? This tool seems to add some obscure treatments behind the scenes to all your <a href> links. This is easy to see in the psd2css.js file, once the document is loaded, the script adds some magic to all your <img> hover functions.
I didn't study the whole javascript added by this tool, but I'm pretty sure that it is the reason of the problems. This tools does not seem to be compatible with touch-screen devices or somehow does mess with touch events in a mobile environment where "hover" are non-sense (you can't "hover" an item on a touch-screen!), and will probably need to be updated to be able to manage mobile versions of the web sites it generates.
Meanwhile, you may try to disable this script (and everything else that may be generated by this tool to automatically add behavior to your links) when your website is accessed on mobile, to avoid messing with the "hover" events in such cases and simply keep the standard behavior that you have without any similar script.
As long as it's something similar to what I have below and you don't have any odd class that is conflicting, you should be ok.
<img src="some image" />
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.
I am attempting to make a dropdown menu - in CSS only - that drops down on mouse-click (instead of on mouse-hover) and has a scroll bar, as there will be around 22 options. What I have so far, is here: http://fiddle.jshell.net/yobqsjb2/1/
(I am limited to CSS only, as Javascript, PHP, etc are blocked by the university. I also cannot use the select or options codes (IE: [select name='menu'] [option value='1']first item[/option]) in the HTML of the page, because the editor keeps stripping them out. I gather from looking online that the TinyMCE visual editor on WordPress is doing this, but unfortunately, I have no access to change it, so I need to work around the limitation.)
I've grabbed code from other sources to tweak, but I fully admit that I was more on the PC repair side of things a few years ago (career-changed and now migrating the company website in the new field) not a former programmer. A lot of what I'm seeing that is supposed to fix the problem for other users' code, I don't quite understand what they're doing well enough to apply it here...
I know the "on click" problem is with the a:hover and li:hover (vs a:active / li:active), but when I switch them, the menu goes away when the mouse hits it. I read that I needed a 'display:block;' somewhere in the code, but based on examples shown, I've put it in each code segment and in all of them... it doesn't seem to want to fix the problem.
In terms of the scroll bar, everything I keep finding is in Javascript or, in a few places saying that it can't be done for IE (ideally, it would work everywhere, or have an IE alternative that wouldn't look funky).
Are either or both of these things possible? I've figured out how to change the dropdown menu's size, color, borders, etc, just not these two items...
Thanks in advance
For the :focus to work, you'd need a tabindex for the element (li).
Fiddle: http://fiddle.jshell.net/yobqsjb2/3/