feat: integrate desktop main nav
This commit is contained in:
parent
409aa430d8
commit
efecd75247
|
|
@ -0,0 +1,119 @@
|
||||||
|
.nav {
|
||||||
|
--background: var(--dark);
|
||||||
|
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 var(--space-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--content {
|
||||||
|
max-width: var(--width);
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr auto;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--title {
|
||||||
|
grid-area: 1 / 1 / 3 / 2;
|
||||||
|
background: var(--background);
|
||||||
|
padding-top: var(--space-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--menu {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--background);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
/* make the nav background full page width */
|
||||||
|
margin: 0 -50vw;
|
||||||
|
padding: 0 50vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--menu-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--menu-item {
|
||||||
|
list-style: none;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--menu-link {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: var(--space-large) var(--space-small);
|
||||||
|
|
||||||
|
font-family: Knewave;
|
||||||
|
font-size: var(--fz-3);
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--menu-link:hover {
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: var(--on-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle-menu-button {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
display: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle-menu-button .bar {
|
||||||
|
display: block;
|
||||||
|
background-color: #777;
|
||||||
|
width: 20px;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 100px;
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
right: 7px;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle-menu-button .bar:first-child {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__open toggle-menu-button .bar {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__open toggle-menu-button .bar:first-child {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav--menu {
|
||||||
|
max-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--menu-section {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--toggle-button {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__open .nav--menu {
|
||||||
|
max-height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
105
index.html
105
index.html
|
|
@ -1,48 +1,53 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="A set of horizontal menus that switch to vertical and which hide at small window widths.">
|
<meta name="description" content="A set of horizontal menus that switch to vertical and which hide at small window widths.">
|
||||||
<title>Frog Collective</title>
|
<title>Frog Collective</title>
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Knewave&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Knewave&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:300">
|
<link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:300">
|
||||||
<link rel="stylesheet" href="stylesheet.css"/>
|
<link rel="stylesheet" href="stylesheet.css"/>
|
||||||
|
<link rel="stylesheet" href="css/nav.css"/>
|
||||||
<script type="module" src="index.js"></script>
|
<script type="module" src="index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<fc-menu class="pure-g">
|
<nav class="nav" id="nav">
|
||||||
<div class="pure-u-1 pure-u-md-1-3">
|
<div class="nav--content">
|
||||||
<div class="pure-menu">
|
<div class="nav--menu">
|
||||||
<a href="#" class="pure-menu-heading">Frog Collective</a>
|
<ul class="nav--menu-section">
|
||||||
<fc-menu-toggle-button><s class="bar"></s><s class="bar"></s></fc-menu-toggle-button>
|
<li class="nav--menu-item">
|
||||||
</div>
|
<a href="#" class="nav--menu-link">Collective</a>
|
||||||
</div>
|
</li>
|
||||||
<div class="pure-u-1 pure-u-md-1-3">
|
<li class="nav--menu-item">
|
||||||
<div class="pure-menu pure-menu-horizontal fc-toggle-menu">
|
<a href="#" class="nav--menu-link">Games</a>
|
||||||
<ul class="pure-menu-list">
|
</li>
|
||||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Collective</a></li>
|
<li class="nav--menu-item">
|
||||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a></li>
|
<a href="#" class="nav--menu-link">News</a>
|
||||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
|
</li>
|
||||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
|
<li class="nav--menu-item">
|
||||||
|
<a href="#" class="nav--menu-link">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="nav--menu-section">
|
||||||
|
<li class="nav--menu-item">
|
||||||
|
<a href="#" class="nav--menu-link">Itch.io</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="nav--title">
|
||||||
|
<img class="nav--logo" src="img/nav-logo.png" title="Frog Collective"></img>
|
||||||
</div>
|
</div>
|
||||||
<div class="pure-u-1 pure-u-md-1-3">
|
<toggle-menu-button target="nav" class="nav--toggle-button">
|
||||||
<div class="pure-menu pure-menu-horizontal fc-toggle-menu fc-right-menu">
|
<s class="bar"></s>
|
||||||
<ul class="pure-menu-list">
|
<s class="bar"></s>
|
||||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Itch.io</a></li>
|
</toggle-menu-button>
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</fc-menu>
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
|
||||||
<div class="separator"></div>
|
<div class="separator"></div>
|
||||||
|
|
||||||
<h1>Frog Collective</h1>
|
<h1>Frog Collective</h1>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -64,6 +69,50 @@
|
||||||
strap in and join us on this wild ride through the pixelated cosmos. Who knows, you might just discover your new favorite addiction
|
strap in and join us on this wild ride through the pixelated cosmos. Who knows, you might just discover your new favorite addiction
|
||||||
in the unlikeliest of places. Welcome to Frog Collective – where small is mighty, and fun knows no bounds!
|
in the unlikeliest of places. Welcome to Frog Collective – where small is mighty, and fun knows no bounds!
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div class="news">
|
||||||
|
<h3 class="news--title">
|
||||||
|
News Title
|
||||||
</div>
|
</div>
|
||||||
</body>
|
<div class="news--date">
|
||||||
|
02/05/2024
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news--content">
|
||||||
|
Here we specialize in creating bite-sized adventures that anyone
|
||||||
|
can pick up and play, but only the true gaming aficionados can
|
||||||
|
conquer. Think of us as the David to the Goliaths of the gaming
|
||||||
|
industry. Our games might be small, but they will keep you coming
|
||||||
|
back for more. Now, you might be wondering, how on earth do two
|
||||||
|
people manage to steer the ship in this vast ocean of pixels? Well,
|
||||||
|
let me tell you, it's all about that sweet, sweet collective
|
||||||
|
decision-making magic. We're like yin and yang, balancing each
|
||||||
|
other's quirks and strengths as we navigate the treacherous waters
|
||||||
|
of game development.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news">
|
||||||
|
<h3 class="news--title">
|
||||||
|
News Title
|
||||||
|
</div>
|
||||||
|
<div class="news--date">
|
||||||
|
02/05/2024
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news--content">
|
||||||
|
Here we specialize in creating bite-sized adventures that anyone
|
||||||
|
can pick up and play, but only the true gaming aficionados can
|
||||||
|
conquer. Think of us as the David to the Goliaths of the gaming
|
||||||
|
industry. Our games might be small, but they will keep you coming
|
||||||
|
back for more. Now, you might be wondering, how on earth do two
|
||||||
|
people manage to steer the ship in this vast ocean of pixels? Well,
|
||||||
|
let me tell you, it's all about that sweet, sweet collective
|
||||||
|
decision-making magic. We're like yin and yang, balancing each
|
||||||
|
other's quirks and strengths as we navigate the treacherous waters
|
||||||
|
of game development.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
66
index.js
66
index.js
|
|
@ -1,53 +1,25 @@
|
||||||
|
class ToggleMenuButton extends HTMLElement {
|
||||||
class FCMenu extends HTMLElement {
|
|
||||||
#rollBack;
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize';
|
|
||||||
window.addEventListener(windowsChangeEvent, this.closeMenu.bind(this));
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleHorizontal() {
|
|
||||||
this.classList.remove('closing');
|
|
||||||
for(const element of this.querySelectorAll('.fc-toggle-menu')) {
|
|
||||||
element.classList.toggle('pure-menu-horizontal');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleMenu() {
|
|
||||||
// Set timeout so that the panel has a chance to roll up before the menu switches states.
|
|
||||||
if (this.classList.contains('open')) {
|
|
||||||
this.classList.add('closing');
|
|
||||||
this.#rollBack = setTimeout(this.toggleHorizontal.bind(this), 500);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (this.classList.contains('closing')) {
|
|
||||||
clearTimeout(this.#rollBack);
|
|
||||||
} else {
|
|
||||||
this.toggleHorizontal();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.classList.toggle('open');
|
|
||||||
};
|
|
||||||
|
|
||||||
closeMenu() {
|
|
||||||
if (this.classList.contains('open')) {
|
|
||||||
this.toggleMenu();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.customElements.define('fc-menu', FCMenu)
|
|
||||||
|
|
||||||
class FCMenuToggleButton extends HTMLElement {
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
this.addEventListener('click', this.onClick.bind(this))
|
this.addEventListener('click', this.onClick.bind(this))
|
||||||
|
const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize';
|
||||||
|
window.addEventListener(windowsChangeEvent, this.close.bind(this))
|
||||||
}
|
}
|
||||||
|
|
||||||
onClick() {
|
get targetElement() {
|
||||||
const menu = this.closest("fc-menu");
|
const targetElementId = this.getAttribute('target')
|
||||||
console.assert(menu != null);
|
const targetElement = document.getElementById(targetElementId)
|
||||||
menu.toggleMenu();
|
console.assert(targetElement !== undefined)
|
||||||
e.preventDefault();
|
return targetElement
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick(evt) {
|
||||||
|
this.targetElement.classList.toggle('nav__open')
|
||||||
|
evt.preventDefault()
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.targetElement.classList.remone('nav__open')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
window.customElements.define('fc-menu-toggle-button', FCMenuToggleButton)
|
|
||||||
|
window.customElements.define('toggle-menu-button', ToggleMenuButton)
|
||||||
|
|
|
||||||
|
|
@ -2,14 +2,21 @@
|
||||||
--color: #161616;
|
--color: #161616;
|
||||||
|
|
||||||
--primary-color: #E04855;
|
--primary-color: #E04855;
|
||||||
--on-primary: black;
|
--on-primary: white;
|
||||||
|
|
||||||
--dark: #161616;
|
--dark: #161616;
|
||||||
--on-dark: #E04855;
|
--on-dark: #E04855;
|
||||||
|
|
||||||
|
|
||||||
--space-xsmall: 5px;
|
--space-xsmall: 5px;
|
||||||
|
--space-small: 10px;
|
||||||
--space-medium: 20px;
|
--space-medium: 20px;
|
||||||
|
--space-large: 30px;
|
||||||
|
|
||||||
|
--width: 1100px;
|
||||||
|
|
||||||
|
--fz-1: 2rem;
|
||||||
|
--fz-2: 1.5rem;
|
||||||
|
--fz-3: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -56,61 +63,6 @@ p {
|
||||||
background-image: url(img/frog-cwak.png);
|
background-image: url(img/frog-cwak.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
fc-menu {
|
|
||||||
background-image: url(img/background-black-red.jpg);
|
|
||||||
margin-bottom: 1em;
|
|
||||||
height: 2.4em;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: height 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
fc-menu .pure-menu-heading {
|
|
||||||
color: var(--primary-color);
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
|
|
||||||
fc-menu .pure-menu-link {
|
|
||||||
color: #DB2937;
|
|
||||||
}
|
|
||||||
|
|
||||||
fc-menu.open {
|
|
||||||
height: 14em;
|
|
||||||
}
|
|
||||||
|
|
||||||
fc-menu-toggle-button {
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
display: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
fc-menu-toggle-button .bar {
|
|
||||||
display: block;
|
|
||||||
background-color: #777;
|
|
||||||
width: 20px;
|
|
||||||
height: 2px;
|
|
||||||
border-radius: 100px;
|
|
||||||
position: absolute;
|
|
||||||
top: 18px;
|
|
||||||
right: 7px;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
fc-menu-toggle-button .bar:first-child {
|
|
||||||
transform: translateY(-6px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.open fc-menu-toggle-button .bar {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.open fc-menu-toggle-button .bar:first-child {
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc-right-menu {
|
.fc-right-menu {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
@ -121,7 +73,7 @@ fc-menu-toggle-button .bar:first-child {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
fc-menu-toggle-button {
|
toggle-menu-button {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue