mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 14:16:50 +02:00
feat: Circular navigation
This commit is contained in:
Phuoc Nguyen
7
contents/_includes/covers/circular-navigation.njk
Normal file
7
contents/_includes/covers/circular-navigation.njk
Normal file
@@ -0,0 +1,7 @@
|
||||
<div class="circular-navigation">
|
||||
{% for i in range(0, 6) -%}
|
||||
<div class="circular-navigation__circle circular-navigation__circle--{{ i + 1 }}">
|
||||
<div class="circular-navigation__content">{{ i + 1 }}</div>
|
||||
</div>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
73
contents/circular-navigation.md
Normal file
73
contents/circular-navigation.md
Normal file
@@ -0,0 +1,73 @@
|
||||
---
|
||||
layout: layouts/post.njk
|
||||
title: Circular navigation
|
||||
description: Create a circular navigation with CSS flexbox
|
||||
keywords: css circular navigation, css flexbox
|
||||
---
|
||||
|
||||
## HTML
|
||||
|
||||
```html
|
||||
<div class="circular-navigation">
|
||||
<!-- The trigger element that will show all circles when user clicks it -->
|
||||
...
|
||||
|
||||
<!-- A circle menu item -->
|
||||
<div class="circular-navigation__circle">
|
||||
<!-- The content -->
|
||||
<div class="circular-navigation__content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Repeat menu items -->
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
.circular-navigation {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.circular-navigation__circle {
|
||||
/* Position */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
/*
|
||||
3rem is the distance from the item to the trigger element.
|
||||
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
|
||||
in case you want to have a total of 6 menu items.
|
||||
The formulation is 360 / numberOfItems * indexOfItem
|
||||
*/
|
||||
transform: rotate(0deg) translateX(-3rem);
|
||||
|
||||
/* Must have the same size as the trigger element */
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.circular-navigation__content {
|
||||
/*
|
||||
Rotate it to make it displayed vertically
|
||||
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
|
||||
in case you want to have a total of 6 menu items.
|
||||
The formulation is -(360 / numberOfItems * indexOfItem)
|
||||
*/
|
||||
transform: rotate(-0deg);
|
||||
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
{% demo %}{% include "covers/circular-navigation.njk" %}{% enddemo %}
|
||||
@@ -126,6 +126,7 @@ eleventyExcludeFromCollections: true
|
||||
<h2 class="category__name">Navigation</h2>
|
||||
<div class="category__posts">
|
||||
{% pattern "Breadcrumb" %}{% include "covers/breadcrumb.njk" %}{% endpattern %}
|
||||
{% pattern "Circular navigation" %}{% include "covers/circular-navigation.njk" %}{% endpattern %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,145 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import Head from 'next/head';
|
||||
|
||||
import { Pattern } from '../../constants/Pattern';
|
||||
import { PatternLayout } from '../../layouts/PatternLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Square from '../../placeholders/Square';
|
||||
|
||||
interface CircularItemProps {
|
||||
degree: number;
|
||||
}
|
||||
|
||||
const CircularItem: React.FC<CircularItemProps> = ({ degree, children }) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
height: '32px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: `rotate(${degree}deg) translateX(-80px)`,
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
transform: `rotate(-${degree}deg)`,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Details: React.FC<{}> = () => {
|
||||
const numItems = 6;
|
||||
|
||||
return (
|
||||
<PatternLayout pattern={Pattern.CircularNavigation}>
|
||||
<Head>
|
||||
<meta name="description" content="Create a circular navigation with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a circular navigation with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a circular navigation with CSS flexbox" />
|
||||
<meta name="keywords" content="css circular navigation, css flexbox" />
|
||||
</Head>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div class="navigation">
|
||||
<!-- The trigger element that will show all circles when user clicks it -->
|
||||
...
|
||||
|
||||
<!-- A circle menu item -->
|
||||
<div class="navigation__circle">
|
||||
<!-- The content -->
|
||||
<div class="navigation__content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Repeat menu items -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.navigation {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navigation__circle {
|
||||
/* Position */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
/*
|
||||
80px is the distance from the item to the trigger element.
|
||||
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
|
||||
in case you want to have a total of 6 menu items.
|
||||
The formulation is 360 / numberOfItems * indexOfItem
|
||||
*/
|
||||
transform: rotate(0deg) translateX(-80px);
|
||||
|
||||
/* Must have the same size as the trigger element */
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.navigation__content {
|
||||
/*
|
||||
Rotate it to make it displayed vertically
|
||||
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
|
||||
in case you want to have a total of 6 menu items.
|
||||
The formulation is -(360 / numberOfItems * indexOfItem)
|
||||
*/
|
||||
transform: rotate(-0deg);
|
||||
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{ height: '32px', width: '32px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
{Array(numItems)
|
||||
.fill(0)
|
||||
.map((_, i) => {
|
||||
return (
|
||||
<CircularItem key={i} degree={(360 / numItems) * i}>
|
||||
{i + 1}
|
||||
</CircularItem>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</PatternLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
@@ -1,106 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#d1d5db',
|
||||
borderRadius: '4px',
|
||||
color: '#FFF',
|
||||
height: '16px',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'rotate(0deg) translateX(-32px)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'rotate(60deg) translateX(-32px)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'rotate(120deg) translateX(-32px)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'rotate(180deg) translateX(-32px)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'rotate(240deg) translateX(-32px)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'rotate(300deg) translateX(-32px)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
@@ -22,6 +22,7 @@
|
||||
@import './patterns/card';
|
||||
@import './patterns/centering';
|
||||
@import './patterns/chip';
|
||||
@import './patterns/circular-navigation';
|
||||
@import './patterns/close-button';
|
||||
@import './patterns/color-swatch';
|
||||
@import './patterns/concave-corners';
|
||||
|
||||
77
styles/patterns/_circular-navigation.scss
Normal file
77
styles/patterns/_circular-navigation.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
.circular-navigation {
|
||||
position: relative;
|
||||
|
||||
/* Demo */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.circular-navigation__circle {
|
||||
/* Position */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
/*
|
||||
3rem is the distance from the item to the trigger element.
|
||||
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
|
||||
in case you want to have a total of 6 menu items.
|
||||
The formulation is 360 / numberOfItems * indexOfItem
|
||||
*/
|
||||
transform: rotate(var(--circular-navigation__circle-degree)) translateX(-3rem);
|
||||
|
||||
/* Must have the same size as the trigger element */
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
|
||||
/* Demo */
|
||||
background-color: #d1d5db;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.circular-navigation__content {
|
||||
/*
|
||||
Rotate it to make it displayed vertically
|
||||
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
|
||||
in case you want to have a total of 6 menu items.
|
||||
The formulation is -(360 / numberOfItems * indexOfItem)
|
||||
*/
|
||||
transform: rotate(var(--circular-navigation__content-degree));
|
||||
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.circular-navigation__circle--1 {
|
||||
--circular-navigation__circle-degree: 0deg;
|
||||
--circular-navigation__content-degree: -0deg;
|
||||
}
|
||||
.circular-navigation__circle--2 {
|
||||
--circular-navigation__circle-degree: 60deg;
|
||||
--circular-navigation__content-degree: -60deg;
|
||||
}
|
||||
.circular-navigation__circle--3{
|
||||
--circular-navigation__circle-degree: 120deg;
|
||||
--circular-navigation__content-degree: -120deg;
|
||||
}
|
||||
.circular-navigation__circle--4 {
|
||||
--circular-navigation__circle-degree: 180deg;
|
||||
--circular-navigation__content-degree: -180deg;
|
||||
}
|
||||
.circular-navigation__circle--5 {
|
||||
--circular-navigation__circle-degree: 240deg;
|
||||
--circular-navigation__content-degree: -240deg;
|
||||
}
|
||||
.circular-navigation__circle--6 {
|
||||
--circular-navigation__circle-degree: 300deg;
|
||||
--circular-navigation__content-degree: -300deg;
|
||||
}
|
||||
Reference in New Issue
Block a user