Verwenden Sie mit jQuery eine einzelne HTML-Datei für die Navigation auf einer gesamten Website ⇐ Jquery

[Guest]

Ich versuche, eine Github-Seiten-Site ohne eine statische Site-Vorlage/einen statischen Site-Builder zu erstellen. Ich möchte die Navigation in einer separaten Datei ablegen, damit ich sie bei einer Änderung nicht in alle anderen HTML-Dateien kopieren muss. Ich habe jQuery dazu gebracht, dies zu tun, ABER es bringt das Layout durcheinander, verglichen damit, wenn ich nur die Navigationsleiste in index.html platziere, und ich kann nicht verstehen, warum.
index.html

Code: Select all

[*]
Soup's website






header

Column right
Column mid


footer


$(function(){
$("#nav-placeholder").load("nav.html");
});

nav.html

Code: Select all

☰ 

[list]
[url=/index.html]Home[/url]
[*][url=/projects/index.html]Projects[/url]
[*][url=/template.html]template[/url]
[/list]

customscript.js

Code: Select all

// Function to toggle the dropdown menu on mobile
function toggleMenu() {
const menu = document.querySelector('.menu');
menu.classList.toggle('show');
}

styles.css

Code: Select all

/* default css */
body {
font-family: Arial, sans-serif;
font-size: 20px;
background-color: #b90000;
display:grid;
min-height: 100vh; /* always fill fiewport */
grid-template-rows: auto 1fr auto;
padding: 0;
margin: 0;
box-sizing: border-box; /* this probably makes it harder but will be a pain to change */
}

.header {
background-color: #f1f1f1;
margin-top: 65px; /* to accomodate navbar */
padding: 3px; /* to visually balance navbar shadow */
text-align: center;
}

.footer {
background-color: #f1f1f1;
position: relative;
bottom: 0;
text-align: center;
}

/*Navbar*//*#region*/
.navbar {
position: fixed; /* to viewport, need to add margin-top to header to accomodate */
top: 0;
left: 0;
width: 100%;
min-height:65px; /* needs to accomodate mobile dropdown */
background-color: #091c38;
box-shadow: 0px 2px 2px 1px rgb(16, 191, 214); /* x y blur spread */
display: flex;
justify-content: start;
z-index: 1000; /*display order*/
}

/* Menu that will be put in navbar */
.menu {
list-style-type: none; /* no list bullet points */
margin: 0;
padding: 10px;
display: flex;
justify-content: center;
}

/*menu list items*/
.menu li {
padding: 10px 20px;
}

/*menu links/text*/
.menu a {
font-size: 20px;
color: white;
text-decoration: none; /* no link underlines */
}

/*menu links/text hover*/
.menu a:hover {
color: #30fcfc;
outline: rgb(16, 191, 214) solid 5px;
outline-offset: 5px;
border-radius: 2%;
}

/* Hamburger dropdown Icon */
.hamburger {
display: none; /* Hide the hamburger icon by default */
cursor: pointer; /* change pointer when hovering */
font-size: 43px;
color: rgb(255, 255, 255);
top: 0;
left: 12px;
position: fixed; /* DO NOT MESS WITH THE BORGER IT WILL BORK THE ENTIRE NAV BAR */
z-index: 1001;  /* Make sure the hamburger stays on top of other content */
}
/*#endregion*/

/*content columns*//*#region*/

.column {
float: right;
}

/* Left and right column */
.column.side {
width: 25%;
}

.column.middle {
width: 75%;
}

/* Clear floats after the columns dunno if this does anything
.row:after {
content: "";
display: table;
clear: both;
}*/
/*#endregion*/

/* Mobile-specific changes *//*#region*/
@media (max-width: 600px) {

/* Hide the menu by default on mobile and switch direction for dropdown*/
.menu {
display: none;
flex-direction: column;
width: 100%;
}

/* Show the hamburger icon on small screens */
.hamburger {
display:block;
}

/* Show menu dropdown when the "show" class is added by script*/
.menu.show {
display: flex;
}

/* mobile menu list items settings*/
.menu li {
padding-left: 0px;
width: 100%; /* Make menu items take full width */
text-align: center; /* Center the text */
}

/* make content colums full width so they stack instead */
.column.side, .column.middle {
width: 100%;
}
}

/*#endregion*/

Statt die Zeilenklasse (Inhaltsspalten) direkt unter der Kopfzeile zu platzieren, werden sie am Ende der Seite platziert. Ich habe hauptsächlich versucht, dies mit anderen Methoden zu erreichen, anstatt am CSS