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

Add CSS code for navigation patterns

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-31 16:58:58 +07:00
parent 9156f3a5cc
commit 39b2f3383b
20 changed files with 549 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
client/patterns/circular-navigation/Details.tsx
View File

@@ -57,48 +57,14 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
position: relative;
">
<div class="container">
<!-- The trigger element that will show all circles when user clicks it -->
...
<!-- A circle menu item -->
<div style="
/* 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;
">
<div class="item">
<!-- The inner -->
<div style="
/*
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 class="inner">
<!-- The content -->
...
</div>
@@ -108,7 +74,46 @@ html={`
...
</div>
`}
css={``}
css={`
.container {
position: relative;
}
.item {
/* 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;
}
.inner {
/*
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={{