library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-07 21:34:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix #799 - Vertical Menu with Submenus not working

Browse Source
This commit is contained in:
redonkulus 2020-05-15 19:49:15 -07:00
parent cc57db4f59
commit c53dbde8ad
1 changed files with 213 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
site/src/pages/menus/index.js
View File

@ -1,5 +1,5 @@
import Link from '@docusaurus/Link';
import React from 'react';
import React, { useEffect } from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import Example from '../../../components/Example';
@ -8,8 +8,21 @@ import { handleClick } from '../../../lib/utils';
const title = 'Menus';
const description = 'Simple CSS for menus.';
let menuLoaded = false;
function Menus() {
// load external menu js dynamically
useEffect(() => {
if (!menuLoaded) {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/menus.js';
document.head.appendChild(script);
menuLoaded = true;
}
});
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
@ -18,10 +31,7 @@ function Menus() {
<SectionHeader heading="Vertical Menu" />
<p>
Menus are vertical by default. Minimal default styling and low-specificity
selectors make them easy to customize. By default, menu items take up
100% of the width of their container, so you may want to limit the menu
width or set the menu to display:inline-block.
Menus are vertical by default. Minimal default styling and low-specificity selectors make them easy to customize. By default, menu items take up 100% of the width of their container, so you may want to limit the menu width or set the menu to display:inline-block.
</p>
<Example>
@ -84,20 +94,11 @@ function Menus() {
<SectionHeader heading="Dropdowns" />
<p>
We recommend enabling submenus via JavaScript to enable accessibility.
To help get you started, <a href="/js/menus.js">an example script</a>
written in vanilla JS provides ARIA support, limited submenu arrow-key
navigation, and the ability to dismiss menus with an outside event or
the ESC key. But you may wish to go further by adding edge detection,
comprehensive arrow-key navigation, and polyfills for compatibility
with old browsers.
We recommend enabling submenus via JavaScript to enable accessibility. To help get you started, <a href="/js/menus.js">an example script</a> written in vanilla JS provides ARIA support, limited submenu arrow-key navigation, and the ability to dismiss menus with an outside event or the ESC key. But you may wish to go further by adding edge detection, comprehensive arrow-key navigation, and polyfills for compatibility with old browsers.
</p>
<p>
Even with JavaScript in place, you still might want to display submenus
on hover. Just add <code>pure-menu-allow-hover</code> to the
<code>pure-menu-has-children</code> list item. This can be nice for desktop
users and provides a fallback for users with no JavaScript.
Even with JavaScript in place, you still might want to display submenus on hover. Just add <code>pure-menu-allow-hover</code> to the <code>pure-menu-has-children</code> list item. This can be nice for desktop users and provides a fallback for users with no JavaScript.
</p>
<Example>
@ -119,9 +120,7 @@ function Menus() {
<SectionHeader heading="Vertical Menu with Submenus" />
<p>
The same construct used to create dropdowns works in vertical menus as well. You
may nest submenus, but keep in mind that complex menus can present usability
challenges on small screens.
The same construct used to create dropdowns works in vertical menus as well. You may nest submenus, but keep in mind that complex menus can present usability challenges on small screens.
</p>
<Example>
@ -153,8 +152,7 @@ function Menus() {
<SectionHeader heading="Scrollable Horizontal Menu" />
<p>
To create a scrollable horizontal menu, add the <code>pure-menu-scrollable</code> class name. When
there isn't enough room, the menu items can be scrolled or flicked. Dropdown menus are not supported. If you would like momentum-based scrolling we recommend using a JS library like <a href="https://github.com/ilyashubin/scrollbooster">scrollbooster</a> to add such effects.
To create a scrollable horizontal menu, add the <code>pure-menu-scrollable</code> class name. When there isn't enough room, the menu items can be scrolled or flicked. Dropdown menus are not supported. If you would like momentum-based scrolling we recommend using a JS library like <a href="https://github.com/ilyashubin/scrollbooster">scrollbooster</a> to add such effects.
</p>
<Example>
@ -219,8 +217,7 @@ function Menus() {
<SectionHeader heading="Responsive Menus That Hide" />
<p>
Check out our <Link to="/layouts/">Layout Examples</Link> to see how you can use
Pure as a foundation for more complex menus, such as:
Check out our <Link to="/layouts/">Layout Examples</Link> to see how you can use Pure as a foundation for more complex menus, such as:
</p>
<Example>