Restructured navigation bar
This commit is contained in:
parent
0c6c138e0e
commit
acad943819
|
@ -43,6 +43,7 @@
|
||||||
<p class="date-style">July 26, 2023:</p>
|
<p class="date-style">July 26, 2023:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Leilukin's Hub now has a site button for you to link to!</li>
|
<li>Leilukin's Hub now has a site button for you to link to!</li>
|
||||||
|
<li>Restructured the navigation bar.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p class="date-style">July 25, 2023:</p>
|
<p class="date-style">July 25, 2023:</p>
|
||||||
|
|
|
@ -1,38 +1,38 @@
|
||||||
// Header component content
|
/* Header component content */
|
||||||
document.querySelector("header").innerHTML = `
|
document.querySelector("header").innerHTML = `
|
||||||
<img src="/assets/Leilukins-Hub-website-banner.png" alt="">
|
<img src="/assets/Leilukins-Hub-website-banner.png" alt="">
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// Navigation component content
|
|
||||||
|
/* Navigation component content */
|
||||||
document.querySelector("nav").innerHTML = `
|
document.querySelector("nav").innerHTML = `
|
||||||
<ul class="nav__menu">
|
<ul class="nav__menu">
|
||||||
<li class="nav__title"><a href="/">Leilukin's Hub</a></li>
|
<li><a href="/home.html">Home</a></li>
|
||||||
<li class="nav__item"><a href="/home.html">Home</a></li>
|
<li><a href="/about/">About</a></li>
|
||||||
<li class="nav__item"><a href="/about/">About</a></li>
|
<li><a href="/blog/">Blog</a></li>
|
||||||
<li class="nav__item"><a href="/blog/">Blog</a></li>
|
<li><a href="/articles/">Articles</a></li>
|
||||||
<li class="nav__item"><a href="/articles/">Articles</a></li>
|
<li><a href="/mycreations/">My Creations</a></li>
|
||||||
<li class="nav__item"><a href="/mycreations/">My Creations</a></li>
|
<li><a href="/mymods/">My Mods</a></li>
|
||||||
<li class="nav__item nav__has-submenu">
|
<li><a href="/playlists/">Playlists</a></li>
|
||||||
<a tabindex="0">My Mods</a>
|
<li><a href="/featured/">Featured</a></li>
|
||||||
<ul class="nav__submenu">
|
<li><a href="/resources/">Resources</a></li>
|
||||||
<li class="nav__subitem"><a href="/mymods/">Index</a></li>
|
<li><a href="/shrines/">Shrines</a></li>
|
||||||
<li class="nav__subitem"><a href="/mymods/kotor1mods/">KotOR 1</a></li>
|
<li><a href="/links/">Links</a></li>
|
||||||
<li class="nav__subitem"><a href="/mymods/kotor2mods/">KotOR 2</a></li>
|
<li><a href="https://leilukin.123guestbook.com/">Guestbook</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>
|
|
||||||
</ul>
|
</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">
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
<script src="/components/header.js" defer></script>
|
<script src="/components/header.js" defer></script>
|
||||||
<script src="/components/navbar.js" defer></script>
|
|
||||||
<script src="/components/footer.js" defer></script>
|
<script src="/components/footer.js" defer></script>
|
||||||
|
|
||||||
<title>Home | Leilukin's Hub</title>
|
<title>Home | Leilukin's Hub</title>
|
||||||
|
@ -66,6 +65,7 @@
|
||||||
<p class="date-style">July 26, 2023:</p>
|
<p class="date-style">July 26, 2023:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Leilukin's Hub now has a site button for you to link to!</li>
|
<li>Leilukin's Hub now has a site button for you to link to!</li>
|
||||||
|
<li>Restructured the navigation bar.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<a href="/changelog">View all site changelog</a>
|
<a href="/changelog">View all site changelog</a>
|
||||||
|
|
140
main.css
140
main.css
|
@ -245,96 +245,27 @@ nav a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__menu,
|
.nav__menu {
|
||||||
.nav__submenu {
|
list-style: none;
|
||||||
list-style-type: none;
|
padding: 0;
|
||||||
padding-left: 0;
|
display: flex;
|
||||||
margin: 0;
|
justify-content: space-evenly;
|
||||||
}
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
.nav__title {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
padding: 0.2rem 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__item {
|
.nav__item {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__item a:hover,
|
.nav__item a:hover {
|
||||||
.nav__item a:hover::after {
|
|
||||||
color: var(--nav-item-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 */
|
/* Added to the navbar with JS when it reaches its scroll position */
|
||||||
.sticky-nav {
|
.sticky-nav {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -345,59 +276,6 @@ as the navigation bar gets a new position at the top of the page
|
||||||
padding-top: 3.75rem;
|
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 */
|
||||||
main,
|
main,
|
||||||
.content-container,
|
.content-container,
|
||||||
|
|
|
@ -1,17 +1,31 @@
|
||||||
// Header component content
|
/* Header component content */
|
||||||
document.querySelector("header").innerHTML = `
|
document.querySelector("header").innerHTML = `
|
||||||
<img src="./img/asummersend_header.png" alt="">
|
<img src="./img/asummersend_header.png" alt="">
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// Navigation component content
|
|
||||||
|
/* Navigation component content */
|
||||||
document.querySelector("nav").innerHTML = `
|
document.querySelector("nav").innerHTML = `
|
||||||
<ul class="nav__menu">
|
<ul class="nav__menu">
|
||||||
<li class="nav__title"><a href="/shrines/asummersend/">A Summer's End</a></li>
|
<li><a href="/shrines/asummersend/">Shrine Home</a></li>
|
||||||
<li class="nav__item"><a href="/shrines/asummersend/">Shrine Home</a></li>
|
<li><a href="./playlists.html">Playlists</a></li>
|
||||||
<li class="nav__item"><a href="./playlists.html">Playlists</a></li>
|
<li><a href="./trivia.html">Trivia</a></li>
|
||||||
<li class="nav__item"><a href="./trivia.html">Trivia</a></li>
|
<li><a href="./gallery.html">Gallery</a></li>
|
||||||
<li class="nav__item"><a href="./gallery.html">Gallery</a></li>
|
<li><a href="/home.html">Main Site</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>
|
|
||||||
</ul>
|
</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 = `
|
document.querySelector("header").innerHTML = `
|
||||||
<img src="/shrines/starwarskotor/img/swkotor-header.jpg" alt="">
|
<img src="/shrines/starwarskotor/img/swkotor-header.jpg" alt="">
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// Navigation component content
|
/* Navigation component content */
|
||||||
document.querySelector("nav").innerHTML = `
|
document.querySelector("nav").innerHTML = `
|
||||||
<ul class="nav__menu">
|
<ul class="nav__menu">
|
||||||
<li class="nav__title"><a href="/shrines/starwarskotor/">Star Wars: KotOR</a></li>
|
<li><a href="/shrines/starwarskotor/">Home</a></li>
|
||||||
<li class="nav__item"><a href="/shrines/starwarskotor/">Home</a></li>
|
<li><a href="/shrines/starwarskotor/articles/">Articles</a></li>
|
||||||
<li class="nav__item"><a href="/shrines/starwarskotor/articles/">Articles</a></li>
|
<li><a href="/shrines/starwarskotor/guides/">Guides</a></li>
|
||||||
<li class="nav__item"><a href="/shrines/starwarskotor/guides/">Guides</a></li>
|
<li><a href="/shrines/starwarskotor/resources/">Resources</a></li>
|
||||||
<li class="nav__item"><a href="/shrines/starwarskotor/resources/">Resources</a></li>
|
<li><a href="/home.html">Main Site</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>
|
|
||||||
</ul>
|
</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