Squarespace 7.1 CSS Code SnippetĪdd the following CSS code snippet to Design > Custom CSS in your Squarespace backend. Something as simple as replacing an ambiguous hamburger menu icon with a much clearer “Menu” label is an easy way to make navigating your mobile site a good experience for your users.įor an even more optimized mobile navigation experience, use this code snippet in combination with the Visible Mobile Menu plugin that is compatible with all Squarespace 7.1 templates. The issue is about 68% of the global population views websites through mobile phones, but we are vastly limited in the amount of space on mobile devices, which can make it more difficult to provide a user-friendly browsing experience. Mobile navigation has been and continues to be a challenge to optimize for website and UX designers. If you are interested in a Squarespace 7.1 mega menu that meets web-accessibility requirements including opening on click and accessible via all keyboard controls, check out the mega menu plugins available in my store instead of using the code found in this article.Īdd this code snippet to your site’s header code injection via Settings > Advanced > Code Injection > Header.Īppear on click or hover: You can choose to make the menus appear on mouse click or mouse hover by changing the value of “appearOn” to either “hover”, or “click”. If your site uses any mega menu plugin, this solution WILL NOT be compatible. Things to know before using this solution:
#SQUARE SPACE DROP DOW MENU CSS HOW TO#
If you are interested in learning more about a web-accessible mega menu plugin, you might enjoy reading my blog post How to Make Your Squarespace 7.1 Mega Menu Web-Accessible where I outline the necessary features of a web-accessible mega menu and explain how the Mega Menu Plugins from my store can help you achieve this on your site. This solution is not guaranteed to work with any mega menu plugins you may be using on your Squarespace site. If you are interested in learning the science behind what makes a menu web-accessible before implementing this solution, you might enjoy my blog post How to Make Squarespace 7.1 Folder Menus Web-Accessible where I explain in detail the features of an ADA-compliant menu, and I also include the exact same code snippet as found below. In terms of web accessibility, giving keyboard users control over opening and traversing a dropdown menu by clicking on a menu item prevents the unnecessary and time-consuming act of having to traverse through all dropdown folder links, which is how the default Squarespace 7.1 keyboard navigation operates using hover functionality. Using hover actions to trigger layout change events (such as opening a dropdown menu folder) can cause unintended and sometimes annoying actions, most of which can be prevented by using click actions instead. In general, clicking an element shows much more intention from the user than hovering does.
0 kommentar(er)
