Restructured navigation bar

This commit is contained in:
Helen Chong 2023-07-26 15:40:22 +08:00
parent 0c6c138e0e
commit acad943819
9 changed files with 89 additions and 381 deletions

View File

@ -43,6 +43,7 @@
<p class="date-style">July 26, 2023:</p>
<ul>
<li>Leilukin's Hub now has a site button for you to link to!</li>
<li>Restructured the navigation bar.</li>
</ul>
<p class="date-style">July 25, 2023:</p>

View File

@ -1,38 +1,38 @@
// Header component content
/* Header component content */
document.querySelector("header").innerHTML = `
<img src="/assets/Leilukins-Hub-website-banner.png" alt="">
`;
// Navigation component content
/* Navigation component content */
document.querySelector("nav").innerHTML = `
<ul class="nav__menu">
<li class="nav__title"><a href="/">Leilukin's Hub</a></li>
<li class="nav__item"><a href="/home.html">Home</a></li>
<li class="nav__item"><a href="/about/">About</a></li>
<li class="nav__item"><a href="/blog/">Blog</a></li>
<li class="nav__item"><a href="/articles/">Articles</a></li>
<li class="nav__item"><a href="/mycreations/">My Creations</a></li>
<li class="nav__item nav__has-submenu">
<a tabindex="0">My Mods</a>
<ul class="nav__submenu">
<li class="nav__subitem"><a href="/mymods/">Index</a></li>
<li class="nav__subitem"><a href="/mymods/kotor1mods/">KotOR 1</a></li>
<li class="nav__subitem"><a href="/mymods/kotor2mods/">KotOR 2</a></li>
</ul>
</li>
<li class="nav__item"><a href="/playlists/">Playlists</a></li>
<li class="nav__item"><a href="/featured/">Featured</a></li>
<li class="nav__item"><a href="/resources/">Resources</a></li>
<li class="nav__item nav__has-submenu">
<a tabindex="1">Shrines</a>
<ul class="nav__submenu">
<li class="nav__subitem"><a href="/shrines/">Index</a></li>
<li class="nav__subitem"><a href="/shrines/asummersend/">A Summer's End</a></li>
<li class="nav__subitem"><a href="/shrines/starwarskotor/">Star Wars: KotOR</a></li>
</ul>
</li>
<li class="nav__item"><a href="/links/">Links</a></li>
<li class="nav__item"><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
<li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
<li><a href="/home.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/articles/">Articles</a></li>
<li><a href="/mycreations/">My Creations</a></li>
<li><a href="/mymods/">My Mods</a></li>
<li><a href="/playlists/">Playlists</a></li>
<li><a href="/featured/">Featured</a></li>
<li><a href="/resources/">Resources</a></li>
<li><a href="/shrines/">Shrines</a></li>
<li><a href="/links/">Links</a></li>
<li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
</ul>
`;
/* MAKE THE NAVBAR STICKY */
const header = document.querySelector("header");
const navbar = document.querySelector("nav");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = header.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {
navbar.classList.remove("sticky-nav");
}
});

View File

@ -1,66 +0,0 @@
/* FOR TOGGLING MENUS ON THE NAVBAR */
const navToggle = document.querySelector(".nav__toggle");
const navMenu = document.querySelector(".nav__menu");
const navItems = document.querySelectorAll(".nav__item");
/* Toggle mobile navMenu */
function toggleMenu() {
if (navMenu.classList.contains("nav__active")) {
navMenu.classList.remove("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
navMenu.classList.add("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Activate Submenu */
function toggleItem() {
if (this.classList.contains("nav__submenu-active")) {
this.classList.remove("nav__submenu-active");
} else if (navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
this.classList.add("nav__submenu-active");
} else {
this.classList.add("nav__submenu-active");
}
}
/* Close Submenu From Anywhere */
function closeSubmenu(e) {
if (navMenu.querySelector(".nav__submenu-active")) {
let isClickInside = navMenu
.querySelector(".nav__submenu-active")
.contains(e.target);
if (!isClickInside && navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
}
}
}
/* Event Listeners */
navToggle.addEventListener("click", toggleMenu, false);
for (let item of navItems) {
if (item.querySelector(".nav__submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
/* FOR MAKING THE NAVBAR STICKY */
const header = document.querySelector("header");
const navbar = document.querySelector("nav");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = header.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {
navbar.classList.remove("sticky-nav");
}
});

View File

@ -20,7 +20,6 @@
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Home | Leilukin's Hub</title>
@ -66,6 +65,7 @@
<p class="date-style">July 26, 2023:</p>
<ul>
<li>Leilukin's Hub now has a site button for you to link to!</li>
<li>Restructured the navigation bar.</li>
</ul>
</div>
<a href="/changelog">View all site changelog</a>

140
main.css
View File

@ -245,96 +245,27 @@ nav a {
cursor: pointer;
}
.nav__menu,
.nav__submenu {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.nav__title {
font-size: 1.2rem;
padding: 0.2rem 0;
.nav__menu {
list-style: none;
padding: 0;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 0.5rem;
}
.nav__item {
padding: 0.5rem;
}
.nav__item a:hover,
.nav__item a:hover::after {
.nav__item a:hover {
color: var(--nav-item-hover);
}
/* Mobile nav__menu */
.nav__menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.nav__menu li a {
display: block;
padding: 0.9rem 0.8rem;
}
.nav__menu li .nav__subitem a {
padding: 0.9rem;
}
.nav__toggle {
order: 1;
font-size: 1.25rem;
}
.nav__item {
order: 3;
width: 100%;
text-align: center;
display: none;
}
.nav__active .nav__item {
display: block;
}
/* nav__submenu up from mobile screens */
.nav__submenu {
display: none;
}
.nav__submenu-active .nav__submenu {
display: block;
}
.nav__has-submenu i {
font-size: 0.75rem;
}
.nav__has-submenu > a::after {
font-family: "Font Awesome 5 Free";
font-size: 0.75rem;
line-height: 1.6;
font-weight: 900;
content: "\f078";
color: white;
padding-left: 0.3125rem;
}
.nav__subitem a {
padding: 0.625rem 0.9rem;
}
.nav__submenu-active {
background-color: var(--nav-submenu-active);
border-radius: 0.1875rem;
}
/* Added to the navbar with JS when it reaches its scroll position */
.sticky-nav {
position: fixed;
width: 100vw;
width: 100%;
top: 0;
}
@ -345,59 +276,6 @@ as the navigation bar gets a new position at the top of the page
padding-top: 3.75rem;
}
/* Tablet navigation menu */
@media all and (min-width: 43.75rem) {
.nav__menu {
justify-content: center;
}
.nav__title {
flex: 1;
}
.nav__toggle {
flex: 1;
text-align: right;
order: 2;
}
}
/* Desktop navigation menu */
@media all and (min-width: 60rem) {
.nav__menu {
align-items: flex-start;
flex-wrap: nowrap;
background: none;
}
.nav__title {
order: 0;
}
.nav__item {
order: 1;
position: relative;
display: block;
width: auto;
}
.nav__submenu-active .nav__submenu {
display: block;
position: absolute;
left: 0;
top: 4.25rem;
background: var(--nav-submenu-active);
}
.nav__toggle {
display: none;
}
.nav__submenu-active {
border-radius: 0;
}
}
/* MAIN CONTENT */
main,
.content-container,

View File

@ -1,17 +1,31 @@
// Header component content
/* Header component content */
document.querySelector("header").innerHTML = `
<img src="./img/asummersend_header.png" alt="">
`;
// Navigation component content
/* Navigation component content */
document.querySelector("nav").innerHTML = `
<ul class="nav__menu">
<li class="nav__title"><a href="/shrines/asummersend/">A Summer's End</a></li>
<li class="nav__item"><a href="/shrines/asummersend/">Shrine Home</a></li>
<li class="nav__item"><a href="./playlists.html">Playlists</a></li>
<li class="nav__item"><a href="./trivia.html">Trivia</a></li>
<li class="nav__item"><a href="./gallery.html">Gallery</a></li>
<li class="nav__item"><a href="/home.html">Main Site</a></li>
<li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
<li><a href="/shrines/asummersend/">Shrine Home</a></li>
<li><a href="./playlists.html">Playlists</a></li>
<li><a href="./trivia.html">Trivia</a></li>
<li><a href="./gallery.html">Gallery</a></li>
<li><a href="/home.html">Main Site</a></li>
</ul>
`;
/* MAKE THE NAVBAR STICKY */
const header = document.querySelector("header");
const navbar = document.querySelector("nav");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = header.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {
navbar.classList.remove("sticky-nav");
}
});

View File

@ -1,66 +0,0 @@
/* FOR TOGGLING MENUS ON THE NAVBAR */
const navToggle = document.querySelector(".nav__toggle");
const navMenu = document.querySelector(".nav__menu");
const navItems = document.querySelectorAll(".nav__item");
/* Toggle mobile navMenu */
function toggleMenu() {
if (navMenu.classList.contains("nav__active")) {
navMenu.classList.remove("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
navMenu.classList.add("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Activate Submenu */
function toggleItem() {
if (this.classList.contains("nav__submenu-active")) {
this.classList.remove("nav__submenu-active");
} else if (navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
this.classList.add("nav__submenu-active");
} else {
this.classList.add("nav__submenu-active");
}
}
/* Close Submenu From Anywhere */
function closeSubmenu(e) {
if (navMenu.querySelector(".nav__submenu-active")) {
let isClickInside = navMenu
.querySelector(".nav__submenu-active")
.contains(e.target);
if (!isClickInside && navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
}
}
}
/* Event Listeners */
navToggle.addEventListener("click", toggleMenu, false);
for (let item of navItems) {
if (item.querySelector(".nav__submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
/* FOR MAKING THE NAVBAR STICKY */
const header = document.querySelector("header");
const navbar = document.querySelector("nav");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = header.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {
navbar.classList.remove("sticky-nav");
}
});

View File

@ -1,17 +1,30 @@
// Header component content
/* Header component content */
document.querySelector("header").innerHTML = `
<img src="/shrines/starwarskotor/img/swkotor-header.jpg" alt="">
`;
// Navigation component content
/* Navigation component content */
document.querySelector("nav").innerHTML = `
<ul class="nav__menu">
<li class="nav__title"><a href="/shrines/starwarskotor/">Star Wars: KotOR</a></li>
<li class="nav__item"><a href="/shrines/starwarskotor/">Home</a></li>
<li class="nav__item"><a href="/shrines/starwarskotor/articles/">Articles</a></li>
<li class="nav__item"><a href="/shrines/starwarskotor/guides/">Guides</a></li>
<li class="nav__item"><a href="/shrines/starwarskotor/resources/">Resources</a></li>
<li class="nav__item"><a href="/home.html">Main Site</a></li>
<li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
<li><a href="/shrines/starwarskotor/">Home</a></li>
<li><a href="/shrines/starwarskotor/articles/">Articles</a></li>
<li><a href="/shrines/starwarskotor/guides/">Guides</a></li>
<li><a href="/shrines/starwarskotor/resources/">Resources</a></li>
<li><a href="/home.html">Main Site</a></li>
</ul>
`;
/* MAKE THE NAVBAR STICKY */
const header = document.querySelector("header");
const navbar = document.querySelector("nav");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = header.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {
navbar.classList.remove("sticky-nav");
}
});

View File

@ -1,66 +0,0 @@
/* FOR TOGGLING MENUS ON THE NAVBAR */
const navToggle = document.querySelector(".nav__toggle");
const navMenu = document.querySelector(".nav__menu");
const navItems = document.querySelectorAll(".nav__item");
/* Toggle mobile navMenu */
function toggleMenu() {
if (navMenu.classList.contains("nav__active")) {
navMenu.classList.remove("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
navMenu.classList.add("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Activate Submenu */
function toggleItem() {
if (this.classList.contains("nav__submenu-active")) {
this.classList.remove("nav__submenu-active");
} else if (navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
this.classList.add("nav__submenu-active");
} else {
this.classList.add("nav__submenu-active");
}
}
/* Close Submenu From Anywhere */
function closeSubmenu(e) {
if (navMenu.querySelector(".nav__submenu-active")) {
let isClickInside = navMenu
.querySelector(".nav__submenu-active")
.contains(e.target);
if (!isClickInside && navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
}
}
}
/* Event Listeners */
navToggle.addEventListener("click", toggleMenu, false);
for (let item of navItems) {
if (item.querySelector(".nav__submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
/* FOR MAKING THE NAVBAR STICKY */
const header = document.querySelector("header");
const navbar = document.querySelector("nav");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = header.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {
navbar.classList.remove("sticky-nav");
}
});