Skip to content

Commit 19e03a3

Browse files
YohnYohn
committed
Closes Hamburger Menu show part of menu below #49
Fixes Accordion chevron padding picocss#653 Demo has been updated with new hamburger nav example.
1 parent 14f7865 commit 19e03a3

File tree

8 files changed

+119
-45
lines changed

8 files changed

+119
-45
lines changed

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ There are 4 ways to get started with pico.css:
8383
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
8484

8585
```html
86-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].8/css/pico.min.css" />
86+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].9/css/pico.min.css" />
8787
```
8888

8989
### Install with NPM
@@ -141,7 +141,7 @@ Use the default `.classless` version if you need centered viewports:
141141
```html
142142
<link
143143
rel="stylesheet"
144-
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].8/css/pico.classless.min.css"
144+
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].9/css/pico.classless.min.css"
145145
/>
146146
```
147147

@@ -150,7 +150,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
150150
```html
151151
<link
152152
rel="stylesheet"
153-
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].8/css/pico.fluid.classless.min.css"
153+
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].9/css/pico.fluid.classless.min.css"
154154
/>
155155
```
156156

@@ -165,7 +165,7 @@ Then just write pure HTML, and it should look great:
165165
<meta name="color-scheme" content="light dark" />
166166
<link
167167
rel="stylesheet"
168-
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].8/css/pico.classless.min.css"
168+
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].9/css/pico.classless.min.css"
169169
/>
170170
<title>Hello, world!</title>
171171
</head>

‎docs/index.html‎

Lines changed: 61 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<link rel="manifest" href="manifest.json">
2525
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
2626
<!-- Pico.css -->
27-
<link rel="stylesheet" href="pico.min.css" id="theme-color-ss">
27+
<link rel="stylesheet" href="pico.css" id="theme-color-ss">
2828
<link rel="stylesheet" href="pico.colors.min.css">
2929
<!--
3030
Yohn's Simple CSS Class helpers
@@ -216,7 +216,7 @@
216216
<main class="col-12 col-md-9 col-lg-10">
217217
<article>
218218
<header>
219-
<h2>Yohns PicoCSS Fork v2.2.8</h2>
219+
<h2>Yohns PicoCSS Fork v2.2.9</h2>
220220
</header>
221221
<p>I've merged some open pull requests from the <a href="https://github.com/picocss/pico">original Pico</a>
222222
repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted
@@ -230,6 +230,10 @@ <h2>Yohns PicoCSS Fork v2.2.8</h2>
230230
href="https://github.com/Yohn/PicoCSS/tree/main/docs/js">Vanilla JavaScript Files</a> to work the same as
231231
the preview here. I may get a build script going to compile the javascript plugins / components later. Let
232232
me know if this feature would help you.</p>
233+
<hr>
234+
<h3>&lt;details class="hide-arrow"&gt;</h3>
235+
<p>With classes enabled, adding the <code>hide-arrow</code> class to your <code>&lt;details class="hide-arrow"&gt;</code> will hide the arrow on the <code>&lt;summary&gt;</code> tag within the accordion and dropdown components.</p>
236+
233237
<footer>If this fork has helped you, please <a href="https://github.com/Yohn/PicoCSS">Like</a> this fork!
234238
</footer>
235239
</article>
@@ -531,25 +535,25 @@ <h6>(resize width of screen if you don't see it)</h6>
531535
</ul>
532536
<input type="checkbox" id="menu-btn" />
533537
<!-- role="button" -->
534-
<label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu"
538+
<label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 2);" aria-label="Menu"
535539
aria-controls="nav-example"> &equiv; </label>
536540
<ol id="nav-example" role="list">
537-
<li role="listitem"><a href="#">Home</a></li>
541+
<li role="listitem"><a href="javascript:void(0);">Home</a></li>
538542
<li role="listitem">
539-
<details class="dropdown">
540-
<summary class="secondary">About</summary>
543+
<details class="dropdown hide-arrow">
544+
<summary class="secondary" role="button">About</summary>
541545
<ul>
542-
<li><a class="load-page" href="#">What’s new in v2?</a></li>
543-
<li><a class="load-page" href="#">Mission</a></li>
544-
<li><a class="load-page" href="#">Usage scenarios</a></li>
545-
<li><a class="load-page" href="#">Brand</a></li>
546-
<li><a class="load-page" href="#">Built With</a></li>
546+
<li><a href="javascript:void(0);">What’s new in v2?</a></li>
547+
<li><a href="javascript:void(0);">Mission</a></li>
548+
<li><a href="javascript:void(0);">Usage scenarios</a></li>
549+
<li><a href="javascript:void(0);">Brand</a></li>
550+
<li><a href="javascript:void(0);">Built With</a></li>
547551
</ul>
548552
</details>
549553
</li>
550-
<li role="listitem"><a href="#">Services</a></li>
551-
<li role="listitem"><a href="#">Login</a></li>
552-
<li role="listitem"><a href="#">Sign Up</a></li>
554+
<li role="listitem"><a href="javascript:void(0);">Services</a></li>
555+
<li role="listitem"><a href="javascript:void(0);">Login</a></li>
556+
<li role="listitem"><a href="javascript:void(0);">Sign Up</a></li>
553557
</ol>
554558
</nav>
555559
<!-- End Responsive Nav 1 -->
@@ -563,29 +567,59 @@ <h3>Hamburger Menu Under Nav Example</h3>
563567
<li><strong>Like Us on GitHub!</strong></li>
564568
</ul>
565569
<input type="checkbox" id="menu-btn2">
566-
<label for="menu-btn2" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu"
570+
<label for="menu-btn2" style="font-size: calc(var(--pico-font-size) * 2);" aria-label="Menu"
567571
aria-controls="nav-example2"> &equiv; </label>
568572
<ol id="nav-example2" role="list">
569-
<li role="listitem"><a href="#">Home</a></li>
573+
<li role="listitem"><a href="javascript:void(0);">Home</a></li>
570574
<li role="listitem">
571-
<details class="dropdown">
572-
<summary class="secondary">About</summary>
575+
<details class="dropdown hide-arrow">
576+
<summary>About 2</summary>
573577
<ul>
574-
<li><a class="load-page" href="#">What’s new in v2?</a></li>
575-
<li><a class="load-page" href="#">Mission</a></li>
576-
<li><a class="load-page" href="#">Usage scenarios</a></li>
577-
<li><a class="load-page" href="#">Brand</a></li>
578-
<li><a class="load-page" href="#">Built With</a></li>
578+
<li><a href="javascript:void(0);">What’s new in v2?</a></li>
579+
<li><a href="javascript:void(0);">Mission</a></li>
580+
<li><a href="javascript:void(0);">Usage scenarios</a></li>
581+
<li><a href="javascript:void(0);">Brand</a></li>
582+
<li><a href="javascript:void(0);">Built With</a></li>
579583
</ul>
580584
</details>
581585
</li>
582-
<li role="listitem"><a href="#">Services</a></li>
583-
<li role="listitem"><a href="#">Login</a></li>
584-
<li role="listitem"><a href="#">Sign Up</a></li>
586+
<li role="listitem"><a href="javascript:void(0);">Services</a></li>
587+
<li role="listitem"><a href="javascript:void(0);">Login</a></li>
588+
<li role="listitem"><a href="javascript:void(0);">Sign Up</a></li>
585589
</ol>
586590
</nav>
587591
<!-- End Responsive Nav 2 -->
588592
<hr>
593+
<!-- Start Responsive Nav 3 -->
594+
<nav class="container-fluid" role="navigation" data-position="end" data-breakpoint="lg">
595+
<input type="checkbox" id="hamburger3">
596+
<label for="hamburger3" style="font-size: calc(var(--pico-font-size) * 2);" aria-label="Menu" aria-controls="top-nav">&equiv;</label>
597+
<ul id="top-nav" role="list">
598+
<li role="listitem"><a href="javascript:void(0);">Pico CSS</a></li>
599+
<li role="listitem"><a href="javascript:void(0);">Example</a></li>
600+
<li role="listitem">
601+
<details class="dropdown hide-arrow">
602+
<summary>Submenu</summary>
603+
<ul>
604+
<li><a href="javascript:void(0);">Another Link</a></li>
605+
<li><a href="javascript:void(0);">And Again</a></li>
606+
</ul>
607+
</details>
608+
</li>
609+
<li role="listitem"><a href="javascript:void(0);">Final In List</a></li>
610+
</ul>
611+
<ul></ul> <!-- put empty <ul> or <ol> element here to move the next <ul> or <ol> to the right -->
612+
<ul>
613+
<li>
614+
<form role="search" action="javascript:void(0);" method="get">
615+
<input name="search" type="search" value="" placeholder="Find this Article">
616+
<input type="hidden" name="id" value="12">
617+
<input type="submit" value="Find">
618+
</form>
619+
</li>
620+
</ul>
621+
</nav>
622+
<hr>
589623
<details>
590624
<summary>Show the code:</summary>
591625
<div>
@@ -1596,7 +1630,7 @@ <h3>Modal with a Form!</h3>
15961630
function changeTheme(newTheme) {
15971631
const linkElement = document.getElementById('theme-color-ss');
15981632
if (linkElement) {
1599-
linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/[email protected].8/css/pico.' + newTheme + '.min.css');
1633+
linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/[email protected].9/css/pico.' + newTheme + '.min.css');
16001634
}
16011635
}
16021636

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@yohns/picocss",
3-
"version": "2.2.8",
3+
"version": "2.2.9",
44
"description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.",
55
"authors": [
66
{

‎scss/components/_accordion.scss‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,26 @@
55
/**
66
* Accordion (<details>)
77
*/
8-
98
#{$parent-selector} details {
109
display: block;
1110
margin-bottom: var(#{$css-var-prefix}spacing);
1211

12+
@if $enable-classes {
13+
&.hide-arrow > summary::after {
14+
display: none;
15+
content: none;
16+
}
17+
}
18+
1319
summary {
20+
position: relative;
21+
padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
1422
line-height: 1rem;
1523
list-style-type: none;
1624
cursor: pointer;
17-
18-
@if $enable-transitions {
19-
//transition: color var(#{$css-var-prefix}transition);
20-
}
25+
//@if $enable-transitions {
26+
//transition: color var(#{$css-var-prefix}transition);
27+
//}
2128

2229
&:not([role]) {
2330
color: var(#{$css-var-prefix}accordion-close-summary-color);
@@ -39,10 +46,12 @@
3946
// Marker
4047
&::after {
4148
display: block;
49+
position: absolute;
50+
top: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.5);
51+
right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * 0.5);
4252
width: 1rem;
4353
height: 1rem;
4454
margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
45-
float: right;
4655
transform: rotate(-90deg);
4756
background-image: var(#{$css-var-prefix}icon-chevron);
4857
background-position: right center;

‎scss/components/_dropdown.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,13 @@
265265
// Override height
266266
margin-bottom: 0;
267267

268+
&.hide-arrow {
269+
> summary::after {
270+
display: none;
271+
content: none;
272+
}
273+
}
274+
268275
> summary {
269276
&:not([role]) {
270277
// Override height

‎scss/components/_group.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
* Group ([role="group"], [role="search"])
77
*/
88

9+
/* V3 Remove, modifing the <legend> placement is disabled
10+
* in chrome.*/
911
#{$parent-selector} fieldset[role="group"] > legend {
1012
float: left;
1113
}

‎scss/components/_nav-hamburger.scss‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
*/
1111
#{$parent-selector} nav[role="navigation"] {
1212
z-index: 1;
13-
align-items: center;
13+
//align-items: center; // the label for the burger was bouncing
1414
width: 100%;
1515
overflow: visible;
1616

@@ -29,6 +29,12 @@
2929
cursor: pointer;
3030
user-select: none;
3131
}
32+
> ul,
33+
> ol {
34+
> li > [role="search"] {
35+
margin-block-end: 0;
36+
}
37+
}
3238
}
3339

3440
@each $breakpoint, $values in $breakpoints {
@@ -51,28 +57,42 @@
5157
display: block;
5258
}
5359
> [role="list"] {
60+
display: none;
5461
flex-direction: column;
5562
align-items: flex-start;
5663
width: 90vw;
5764
max-height: 0;
5865
margin: 0 auto;
5966
background-color: var(#{$css-var-prefix}muted-border-color); //muted-border-color);
6067
box-shadow: var(#{$css-var-prefix}box-shadow);
61-
transition: max-height var(#{$css-var-prefix}transition);
68+
opacity: 0;
69+
@if $enable-transitions {
70+
transition:
71+
max-height var(#{$css-var-prefix}transition),
72+
opacity var(#{$css-var-prefix}transition);
73+
}
6274
li {
6375
width: calc(100% - calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2));
6476
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * 0.5)
6577
var(#{$css-var-prefix}nav-link-spacing-vertical);
6678
padding: 0;
79+
> details.dropdown {
80+
width: 100%;
81+
}
82+
> form[role="search"] {
83+
margin-block-end: 0;
84+
}
6785
}
6886
a {
6987
display: block;
7088
margin: 0;
71-
border-bottom: 1px solid transparent;
7289
border-radius: 0;
73-
transition:
74-
border-color var(#{$css-var-prefix}transition),
75-
color var(#{$css-var-prefix}transition);
90+
border-block-end: 1px solid transparent;
91+
@if $enable-transitions {
92+
transition:
93+
border-color var(#{$css-var-prefix}transition),
94+
color var(#{$css-var-prefix}transition);
95+
}
7696
}
7797
a:hover {
7898
border-bottom-color: var(#{$css-var-prefix}underline);
@@ -82,7 +102,9 @@
82102
}
83103
}
84104
input[type="checkbox"]:checked ~ [role="list"] {
105+
display: block;
85106
max-height: 100vh;
107+
opacity: 1;
86108
}
87109
}
88110
}

‎scss/helpers/_copyright.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
/*!
2-
* Pico CSS ✨ v2.2.8 (https://github.com/Yohn/PicoCSS)
2+
* Pico CSS ✨ v2.2.9 (https://github.com/Yohn/PicoCSS)
33
* Copyright 2019-2025 - Licensed under MIT
44
*/

0 commit comments

Comments
 (0)