Restructured navigation bar
This commit is contained in:
Helen Chong
parent
0c6c138e0e
commit
acad943819
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
|
|
@ -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
140
main.css
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue