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

feat: Menu

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-21 16:38:25 +07:00
parent 554dd29aca
commit e62dfdc670
7 changed files with 125 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
contents/_includes/covers/menu.njk Normal file
View File

@@ -0,0 +1,14 @@
<div class="menu">
<div class="menu__item">
{% rectangle "hor", "sm", 80 %}
</div>
<div class="menu__item">
{% rectangle "hor", "sm", 60 %}
<div class="menu__hotkey">⌘ C</div>
</div>
<div class="menu__divider"></div>
<div class="menu__item">
{% rectangle "hor", "sm", 40 %}
<div class="menu__hotkey">⌘ V</div>
</div>
</div>

3
contents/index.njk
View File

@@ -129,8 +129,9 @@ eleventyExcludeFromCollections: true
{% pattern "Circular navigation" %}{% include "covers/circular-navigation.njk" %}{% endpattern %}
{% pattern "Dot navigation" %}{% include "covers/dot-navigation.njk" %}{% endpattern %}
{% pattern "Drawer" %}{% include "covers/drawer.njk" %}{% endpattern %}
{% pattern "Tab" %}{% include "covers/tab.njk" %}{% endpattern %}
{% pattern "Menu" %}{% include "covers/menu.njk" %}{% endpattern %}
{% pattern "Pagination" %}{% include "covers/pagination.njk" %}{% endpattern %}
{% pattern "Tab" %}{% include "covers/tab.njk" %}{% endpattern %}
{% pattern "Wizard" %}{% include "covers/wizard.njk" %}{% endpattern %}
</div>
</div>

75
contents/menu.md Normal file
View File

@@ -0,0 +1,75 @@
---
layout: layouts/post.njk
title: Menu
description: Create a menu with CSS flexbox
keywords: css flexbox, css menu
---
## HTML
```html
<div class="menu">
<!-- Normal menu item -->
<div class="menu__item">
...
</div>
<!-- With hot key -->
<div class="menu__item">
<!-- Label -->
...
<!-- Hot key -->
<div class="menu__hotkey">
...
</div>
</div>
<!-- With image and hot key -->
<div class="menu__item">
<!-- Image -->
...
<!-- Label -->
...
<!-- Hot key -->
<div class="menu__hotkey">
...
</div>
</div>
<!-- Divider -->
<div class="menu__divider"></div>
</div>
```
## CSS
```css
.menu {
display: flex;
flex-direction: column;
/* Border */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
}
.menu__item {
/* Center the content horizontally */
align-items: center;
display: flex;
}
.menu__hotkey {
/* Push the hot key to the right */
margin-left: auto;
}
.menu__divider {
border-bottom: 1px solid #d1d5db;
height: 1px;
}
```
{% demo %}{% include "covers/menu.njk" %}{% enddemo %}