diff --git a/contents/_includes/covers/mega-menu.njk b/contents/_includes/covers/mega-menu.njk new file mode 100644 index 0000000..b5bc2ec --- /dev/null +++ b/contents/_includes/covers/mega-menu.njk @@ -0,0 +1,11 @@ +
+
{% rectangle "hor", "sm", 100 %}
+
+ {% rectangle %} + {% triangle "b" %} +
+
{% lines "hor", 5 %}
+
+
+
{% rectangle "hor", "sm", 100 %}
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index eb76608..dffecf9 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -131,6 +131,7 @@ eleventyExcludeFromCollections: true {% pattern "Drawer" %}{% include "covers/drawer.njk" %}{% endpattern %} {% pattern "Dropdown" %}{% include "covers/dropdown.njk" %}{% endpattern %} {% pattern "Full screen menu" %}{% include "covers/full-screen-menu.njk" %}{% endpattern %} + {% pattern "Mega menu" %}{% include "covers/mega-menu.njk" %}{% endpattern %} {% pattern "Menu" %}{% include "covers/menu.njk" %}{% endpattern %} {% pattern "Pagination" %}{% include "covers/pagination.njk" %}{% endpattern %} {% pattern "Previous next buttons" %}{% include "covers/previous-next-buttons.njk" %}{% endpattern %} diff --git a/contents/mega-menu.md b/contents/mega-menu.md new file mode 100644 index 0000000..5944d7f --- /dev/null +++ b/contents/mega-menu.md @@ -0,0 +1,66 @@ +--- +layout: layouts/post.njk +title: Mega menu +description: Create a mega menu with CSS +keywords: css mega menu +--- + +## HTML + +```html +
+ +
...
+ + +
+ +
...
+ + +
+ ... +
+
+ + +
...
+
+``` + +## CSS + +```css +.mega-menu { + /* Used to position the mega menu */ + position: relative; +} + +.mega-menu__trigger:hover .mega-menu__content { + /* Show the mega menu when hovering the trigger item */ + display: block; +} + +.mega-menu__content { + /* Border */ + border: 1px solid #d1d5db; + margin-top: -1px; + + /* Hidden by default */ + display: none; + + /* Absolute position */ + left: 0px; + position: absolute; + top: 100%; + + /* Take full width */ + width: 100%; + + /* Displayed on top of other elements */ + background: #fff; + z-index: 9999; +} +``` + +{% demo %}{% include "covers/mega-menu.njk" %}{% enddemo %} diff --git a/pages/mega-menu/index.tsx b/pages/mega-menu/index.tsx deleted file mode 100644 index 28f7354..0000000 --- a/pages/mega-menu/index.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Rectangle from '../../placeholders/Rectangle'; -import Triangle from '../../placeholders/Triangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - -
- Move the mouse over the second navigation item to see the mega menu. -
- - - ... - - -
- -
...
- - -
- ... -
-
- -`} - css={` - .container { - /* Used to position the mega menu */ - position: relative; - } - - .container__trigger:hover .container__content { - /* Show the mega menu when hovering the trigger item */ - display: block; - } - - .container__content { - /* Border */ - border: 1px solid #d1d5db; - margin-top: -1px; - - /* Hidden by default */ - display: none; - - /* Absolute position */ - left: 0px; - position: absolute; - top: 100%; - - /* Take full width */ - width: 100%; - - /* Displayed on top of other elements */ - background: #fff; - z-index: 9999; - } - `} - > -
-
-
-
- -
-
-
-
- -
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
-
- -
-
-
- -
- -
-
- - - - - ); -}; - -export default Details; diff --git a/patterns/mega-menu/Cover.tsx b/patterns/mega-menu/Cover.tsx deleted file mode 100644 index 8e60237..0000000 --- a/patterns/mega-menu/Cover.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import * as React from 'react'; - -import Circle from '../../placeholders/Circle'; -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
-
- -
-
- -
-
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index f7a7c80..4d0c851 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -57,6 +57,7 @@ @import './patterns/lined-paper'; @import './patterns/masonry-grid'; @import './patterns/media-object'; +@import './patterns/mega-menu'; @import './patterns/menu'; @import './patterns/modal'; @import './patterns/notification'; diff --git a/styles/patterns/_mega-menu.scss b/styles/patterns/_mega-menu.scss new file mode 100644 index 0000000..504068e --- /dev/null +++ b/styles/patterns/_mega-menu.scss @@ -0,0 +1,64 @@ +.mega-menu { + align-items: center; + display: flex; + justify-content: center; + + position: relative; + + border: 1px solid #d1d5db; + border-radius: 0.25rem; + + /* Demo */ + width: 100%; +} + +.mega-menu__item { + display: flex; + align-items: center; + + height: 100%; + flex: 1; + + padding: 0.25rem 0.5rem; +} +.mega-menu__item:not(:last-child) { + border-right: 1px solid #d1d5db; +} + +.mega-menu__trigger { + cursor: pointer; + + /* Demo */ + height: 2rem; + + align-items: center; + display: flex; + justify-content: center; +} + +.mega-menu__content { + /* Border */ + border: 1px solid #d1d5db; + // margin-top: -1px; + + /* Hidden by default */ + display: none; + + /* Position it right below the trigger element */ + left: 0; + padding-top: 0.25rem; + position: absolute; + top: 100%; + + /* Take full width */ + width: 100%; + + /* It should be on the top of other elements */ + background-color: #fff; + z-index: 9999; +} + +/* Show the mega menu when hovering the trigger item */ +.mega-menu__trigger:hover .mega-menu__content { + display: block; +} \ No newline at end of file