Add mega menu

client/constants/Pattern.ts

@@ -34,6 +34,7 @@ enum Pattern {
     InitialAvatar = 'Initial avatar',
     InputAddon = 'Input addon',
     MediaObject = 'Media object',
+    MegaMenu = 'Mega menu',
     Menu = 'Menu',
     Modal = 'Modal',
     Notification = 'Notification',

client/pages/ExplorePage.tsx

@@ -104,6 +104,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Drawer} />
                         <CoverCard pattern={Pattern.Dropdown} />
                         <CoverCard pattern={Pattern.FullScreenMenu} />
+                        <CoverCard pattern={Pattern.MegaMenu} />
                         <CoverCard pattern={Pattern.Menu} />
                         <CoverCard pattern={Pattern.Pagination} />
                         <CoverCard pattern={Pattern.PreviousNextButtons} />

client/patterns/dropdown/Details.tsx

@@ -88,7 +88,7 @@ const Details: React.FC<{}> = () => {
                                     width: '256px',
                                 }}
                             >
-                            <Block numberOfBlocks={20} justify='center' />
+                                <Block numberOfBlocks={20} justify='center' />
                             </div>
                         </div>
                     )}
@@ -139,7 +139,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
-            <RelatedPatterns patterns={[Pattern.Menu]} />
+            <RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu]} />
         </DetailsLayout>
     );
 };

client/patterns/mega-menu/Cover.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div style={{ padding: '4px 8px' }}>
+                        <Circle size={8} />
+                    </div>
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                            padding: '4px 8px',
+                        }}
+                    >
+                        <Circle size={8} />
+                    </div>
+                    <div style={{ padding: '4px 8px' }}>
+                        <Circle size={8} />
+                    </div>
+                </div>
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        display: 'flex',
+                        width: '100%',
+                    }}
+                >
+                    <div style={{ flex: 1, padding: '4px' }}>
+                        <div style={{ marginBottom: '4px' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px' }}><Line /></div>
+                        <div style={{ width: '80%' }}><Line /></div>
+                    </div>
+                    <div style={{ flex: 1, padding: '4px' }}>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px' }}><Line /></div>
+                        <div style={{ width: '60%' }}><Line /></div>
+                    </div>
+
+                    <div style={{ flex: 1, padding: '4px' }}>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px' }}><Line /></div>
+                        <div style={{ width: '80%' }}><Line /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/mega-menu/Details.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import './megaMenu.css';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+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 (
+        <DetailsLayout title="Mega menu">
+            <Helmet>
+                <meta name="description" content="Create a mega menu with CSS" />
+                <meta name="keywords" content="css mega menu" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    Move the mouse over the seccond navigation item to see the mega menu.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div style={{ padding: '8px' }}>
+                            <div className='p-mega-menu-container'>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'inline-flex',
+                                        justifyContent: 'center',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                            padding: '16px',
+                                            width: '150px',
+                                        }}
+                                    >
+                                        <Rectangle />
+                                    </div>
+                                    <div
+                                        className='p-mega-menu-trigger'
+                                        style={{
+                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                            width: '180px',
+                                        }}
+                                    >
+                                        <div style={{ display: 'flex', padding: '16px' }}>
+                                            <div style={{ flex: 1, marginRight: '8px' }}><Rectangle /></div>
+                                            <Triangle size={8} corner='b' />
+                                        </div>
+                                        <div className='p-mega-menu-content'>
+                                            <div style={{ display: 'flex' }}>
+                                                <div style={{ flex: 1, padding: '16px' }}>
+                                                    <Block numberOfBlocks={10} />
+                                                </div>
+                                                <div style={{ flex: 1, padding: '16px' }}>
+                                                    <Block numberOfBlocks={6} />
+                                                </div>
+                                                <div style={{ flex: 1, padding: '16px' }}>
+                                                    <Block numberOfBlocks={8} />
+                                                </div>
+                                                <div style={{ flex: 1, padding: '16px' }}>
+                                                    <Block numberOfBlocks={6} />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div
+                                        style={{
+                                            padding: '16px',
+                                            width: '120px',
+                                        }}
+                                    >
+                                        <Rectangle />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div style={{ marginTop: '16px' }}>
+                                <Block numberOfBlocks={10} />
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<style>
+.p-mega-menu-container {
+    /* Used to position the mega menu */
+    position: relative;
+}
+
+.p-mega-menu-content {
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    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;
+}
+
+.p-mega-menu-trigger:hover .p-mega-menu-content {
+    /* Show the mega menu when hovering the trigger item */
+    display: block;
+}
+</style>
+
+<div className="p-mega-menu-container">
+    <!-- Item -->
+    ...
+
+    <!-- An item that triggers displaying the mega menu -->
+    <div class="p-mega-menu-trigger">
+        <!-- The trigger item's content -->
+        <div>...</div>
+
+        <!-- Mega menu -->
+        <div class="p-mega-menu-content">
+            ...
+        </div>
+    </div>
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/mega-menu/megaMenu.css

@@ -0,0 +1,17 @@
+.p-mega-menu-container {
+    position: relative;
+}
+.p-mega-menu-content {
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    display: none;
+    left: 0px;
+    margin-top: -1px;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: 9999;
+}
+.p-mega-menu-trigger:hover .p-mega-menu-content {
+    display: block;
+}

client/patterns/menu/Details.tsx

@@ -193,7 +193,9 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
-            <RelatedPatterns patterns={[Pattern.DotLeader, Pattern.PropertyList, Pattern.SplitNavigation]} />
+            <RelatedPatterns
+                patterns={[Pattern.DotLeader, Pattern.MegaMenu, Pattern.PropertyList, Pattern.SplitNavigation]}
+            />
         </DetailsLayout>
     );
 };

public/sitemap.xml

@@ -35,6 +35,7 @@
     <url><loc>https://csslayout.io/patterns/input-addon</loc></url>
     <url><loc>https://csslayout.io/patterns/keyboard-shortcut</loc></url>
     <url><loc>https://csslayout.io/patterns/media-object</loc></url>
+    <url><loc>https://csslayout.io/patterns/mega-menu</loc></url>
     <url><loc>https://csslayout.io/patterns/menu</loc></url>
     <url><loc>https://csslayout.io/patterns/modal</loc></url>
     <url><loc>https://csslayout.io/patterns/notification</loc></url>