muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added nav.html and nav.js to act as navbar in every pages

Browse source
This commit is contained in:
JSriwongsa 2023-05-29 17:40:35 -05:00
parent 672a086e0b
commit 124d14e7f9
2 changed files with 55 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
restaurant_website/nav.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FUJISAN</title>
<link rel="shortcut icon" href="images/logo.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Poppins:ital,wght@0,100;0,300;1,100;1,300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Permanent+Marker&family=Vujahday+Script&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div class="navbar">
<div class="logo">
<a href=""><img src="images/logo.png"></a>
<span>FUJISAN</span>
</div>
<nav>
<div class="heading-btn">
<i class="close-btn fas fa-times-circle"></i>
</div>
<li><a href="index.html ">HOME</a></li>
<li><a href="">MENU</a></li>
<li><a href="">ORDER</a></li>
<li><a href="#reservation">RESERVATION</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
</nav>
<div class="heading-btn">
<i class="menu-btn fas fa-bars"></i>
</div>
</div>
</div>
</header>
<script src="main.js"></script>
</body>
</html>

8
restaurant_website/nav.js Normal file
View file

@ -0,0 +1,8 @@
fetch('http://127.0.0.1:8000/nav.html')
.then(res => res.text())
.then(text => {
let oldelem = document.querySelector("script#replace_with_navbar");
let newelem = document.createElement("div");
newelem.innerHTML = text;
oldelem.parentNode.replaceChild(newelem,oldelem);
})