mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 06:07:33 +02:00
Code Issues Releases Wiki Activity

Add nested dropdowns pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2020-01-13 23:59:14 +07:00
parent aabd3d5ffd
commit 02d9818c56
9 changed files with 291 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -43,6 +43,7 @@ enum Pattern {
MegaMenu = 'Mega menu',
Menu = 'Menu',
Modal = 'Modal',
NestedDropdowns = 'Nested dropdowns',
Notification = 'Notification',
OverlayPlayButton = 'Overlay play button',
Pagination = 'Pagination',

1
client/pages/ExplorePage.tsx
View File

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

2
client/patterns/dropdown/Details.tsx
View File

@@ -144,7 +144,7 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu]} />
<RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
</DetailsLayout>
);
};

2
client/patterns/mega-menu/Details.tsx
View File

@@ -145,7 +145,7 @@ const Details: React.FC<{}> = () => {
/>
</div>
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
</DetailsLayout>
);
};

8
client/patterns/menu/Details.tsx
View File

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

81
client/patterns/nested-dropdowns/Cover.tsx Normal file
View File

@@ -0,0 +1,81 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
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',
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
}}
>
<div
style={{
flex: 1,
padding: '4px 8px',
}}
>
<Circle size={8} />
</div>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
flex: 1,
padding: '4px 8px',
position: 'relative',
}}
>
<Circle size={8} />
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderTopColor: 'transparent',
left: 0,
padding: '4px',
position: 'absolute',
top: '100%',
width: '100%',
}}
>
<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>
<div
style={{
flex: 1,
padding: '4px 8px',
}}
>
<Circle size={8} />
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

155
client/patterns/nested-dropdowns/Details.tsx Normal file
View File

@@ -0,0 +1,155 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import { Helmet } from 'react-helmet';
import './nested-dropdowns.css';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Nested dropdowns">
<Helmet>
<meta name="description" content="Create nested dropdown menu with CSS" />
<meta name="keywords" content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu" />
</Helmet>
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Hover on the Patterns &rarr; Navigation to see the sub dropdowns.
</div>
<BrowserFrame
content={(
<div
style={{
padding: '8px',
}}
>
<ul className="p-nested-dropdowns">
<li>Home</li>
<li>
<div>Patterns</div>
<ul>
<li>Layout</li>
<li>Input</li>
<li>
<div>Navigation</div>
<ul>
<li>Breadcrumb</li>
<li>Dropdown</li>
<li>Menu</li>
<li>Nested dropdown</li>
</ul>
</li>
<li>Display</li>
<li>Feedback</li>
</ul>
</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
)}
source={`
<style>
/* The root */
.p-nested-dropdowns {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
display: flex;
/* Reset list styles */
list-style-type: none;
margin: 0;
padding: 0;
}
.p-nested-dropdowns li {
/* Spacing */
padding: 8px;
/* Used to position the sub dropdown */
position: relative;
}
/* The sub dropdown */
.p-nested-dropdowns ul {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
/* Hidden by default */
display: none;
/* Absolute position */
left: 0;
position: absolute;
top: 100%;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
/* Width */
width: 200px;
}
/* The second level sub dropdown */
.p-nested-dropdowns ul ul {
left: 100%;
position: absolute;
top: 0;
}
/* Change background color of list item when being hovered */
.p-nested-dropdowns li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
/* Show the direct sub dropdown when hovering the list item */
.p-nested-dropdowns li:hover > ul {
display: block;
}
</style>
<ul className="p-nested-dropdowns">
<li>Home</li>
<li>
<div>Patterns</div>
<!-- First level sub dropdown -->
<ul>
<li>Layout</li>
<li>Input</li>
<li>
<div>Navigation</div>
<!-- Second level sub dropdown -->
<ul>
<li>Breadcrumb</li>
<li>Dropdown</li>
<li>Menu</li>
<li>Nested dropdown</li>
</ul>
</li>
<li>Display</li>
<li>Feedback</li>
</ul>
</li>
<li>Products</li>
<li>About</li>
</ul>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
</DetailsLayout>
);
};
export default Details;

43
client/patterns/nested-dropdowns/nested-dropdowns.css Normal file
View File

@@ -0,0 +1,43 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.p-nested-dropdowns {
border: 1px solid rgba(0, 0, 0, 0.3);
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.p-nested-dropdowns li {
padding: 8px;
position: relative;
}
.p-nested-dropdowns ul {
border: 1px solid rgba(0, 0, 0, 0.3);
display: none;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
width: 200px;
}
.p-nested-dropdowns ul ul {
left: 100%;
position: absolute;
top: 0;
}
.p-nested-dropdowns li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.p-nested-dropdowns li:hover > ul {
display: block;
}

1
public/sitemap.xml
View File

@@ -39,6 +39,7 @@
<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/nested-dropdowns</loc></url>
<url><loc>https://csslayout.io/patterns/notification</loc></url>
<url><loc>https://csslayout.io/patterns/overlay-play-button</loc></url>
<url><loc>https://csslayout.io/patterns/pagination</loc></url>