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

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

@@ -29,51 +29,45 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<style>
<div class="dropdown">
<!-- The trigger element -->
<button>...</button>
<!-- The content -->
<div class="dropdown-content">
...
</div>
</div>
`}
css={`
.dropdown {
position: relative;
}
/* Hide the dropdown's content by default -->
.dropdown-content {
display: none;
/* Position it right below the trigger element */
left: 0;
paddingTop: 4px;
position: absolute;
top: 100%;
/* It should be on the top of other elements */
background-color: #FFF;
zIndex: 9999;
/* Size */
height: 200px;
width: 200px;
}
/* Show the content when hover on the container -->
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div
class="dropdown"
style="
position: relative;
"
>
<!-- The trigger element -->
<button>...</button>
<!-- The content -->
<div
class="dropdown-content"
style="
/* Position it right below the trigger element */
left: 0,
paddingTop: '4px',
position: 'absolute',
top: '100%',
/* It should be on the top of other elements */
backgroundColor: '#FFF',
zIndex: 9999,
/* Size */
height: '200px',
width: '200px',
"
>
...
</div>
</div>
`}
css={``}
>
<div
style={{