deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2026-03-14 22:45:51 +01:00
Code Issues Projects Releases Wiki Activity

feat: navbar dropdown

Browse source
This commit is contained in:
gjsss 2022-07-25 21:07:15 +08:00
commit b37233815d
2 changed files with 108 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

60
docs/content/docs/components/navbar.md
View file

@ -72,6 +72,66 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
</nav>
```
### Navbar with Dropdown
<nav class="border split-nav">
<div class="nav-brand">
<h3><a href="#">Get PaperCSS</a></h3>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<label for="collapsible2">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li class="dropdown">
<div class="dropdown-title">About</div>
<ul class="dropdown-menu border border-4">
<li><a href="#">Github</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
#### Code:
```html
<nav class="border split-nav">
<div class="nav-brand">
<h3><a href="#">Get PaperCSS</a></h3>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<label for="collapsible2">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Github</a></li>
<li class="dropdown">
<div class="dropdown-title">About</div>
<ul class="dropdown-menu border border-4">
<li><a href="#">Github</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
```
### Not Split Navbar
<nav class="border">

54
src/components/_navbar.scss
View file

@ -23,8 +23,9 @@ nav {
width: 2rem;
}
.collapsible input[id^=collapsible]:checked + button, // Leaving for backwards compatibility. See docs for proper usage
.collapsible input[id^=collapsible]:checked + label {
.collapsible input[id^=collapsible]:checked+button,
// Leaving for backwards compatibility. See docs for proper usage
.collapsible input[id^=collapsible]:checked+label {
.bar1 {
transform: rotate(-45deg) translate(-9px, 7px);
}
@ -69,6 +70,46 @@ nav {
}
}
ul.inline li.dropdown {
font-size: 1.3rem;
margin: 0;
div.dropdown-title {
cursor: pointer;
margin: 0;
padding: 0 10px;
&::after {
content: '▼';
font-size: 0.8rem;
padding: 0 2px;
vertical-align: middle;
}
}
ul.dropdown-menu {
@include color('background-color', 'primary-inverse');
display: none;
flex-direction: column;
justify-content: center;
padding: 10px;
position: absolute;
li {
margin: 0 15px 10px 30px;
a {
font-size: 1.1rem;
}
}
}
div.dropdown-title:hover+ul.dropdown-menu,
ul.dropdown-menu:hover {
display: flex;
}
}
a {
@include color('color', 'primary');
@include color('border-bottom-color', 'primary');
@ -118,7 +159,7 @@ nav {
}
}
.collapsible input[id^=collapsible]:checked ~ div.collapsible-body {
.collapsible input[id^=collapsible]:checked~div.collapsible-body {
margin: 0;
max-height: 960px;
opacity: 1;
@ -149,13 +190,14 @@ nav {
border-width: 2px;
}
.collapsible > button {
.collapsible>button {
// Leaving for backwards compatibility. See docs for proper usage
border: 0;
}
.collapsible > button, // Leaving for backwards compatibility. See docs for proper usage
.collapsible > label {
.collapsible>button,
// Leaving for backwards compatibility. See docs for proper usage
.collapsible>label {
@include color('background-color', 'main-background');
display: none;
font-size: 0.5rem;