1 Correct answer
I see that I need first to make a css style sheet
By @Alfred23830680d5ea
===========
- Go to File > New > CSS file. Hit Create button.
- Paste or manually add styles to your CSS file and SaveAs top_nav.css.
- Save stylesheets to a Styles or CSS folder in your local site.
- Open your HTML page in Code view.
- Scroll to the <head> tag of your document.
- Go to Tools > CSS > Attach Stylesheet. Select top_nav.css. Save & close.
- Repeat steps 4-6 in other HTML pages.
23
Replies
If the site is a static HTML-site, then the best solution is to create a custom element as in https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements
You could also use Bing or YouTube to search for `custom elements`.
By @BenPleysier
Did javascript web-components ever take off or were they just considered overkill because of the shadow dom complexity workflow. I think that lessened their usefulness and deployment, too complicated a solution for most to consider, maybe.
NOT surprisingly in the latest version of next.js you can combine client-side and server-side code all in one file if you want to. All the javascript kiddies are excited by this seemingly new introduction to them.............humm php has been doing that to good effect for 20+years. Strange how it eventually goes full circle. Seems that there is hope on the horizon and eventually light of day appears when it should have happened years ago to make usage more attractive and simpler not more difficult and obtuse.
Did javascript web-components ever take off or were they just considered overkill because of the shadow dom complexity workflow. I think that lessened their usefulness and deployment, too complicated a solution for most to consider, maybe.
By @osgood_
I am sorry, but you have lost me. Let me explain what I mean in very simple terms.
I have a JavaScript file called custom.js. The code inside the file is
class Heading extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<header class="bg-light">
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand ms-auto" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1_collapse">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
>`;
}
}
customElements.define('my-heading', Heading);
The HTML code that follows this.innerHTML = ` is the code that would normally represent a header in a document. Due to the fact that I have created a custom element, all I need to do is to attach the JavaScript file to the document and add our custom element as in
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Custom Elements</title>
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css">
</head>
<body>
<my-heading></my-heading>
<script src="js/custom.js"></script>
</body>
</html>
In other words, these two lines need to be added to each document:
<my-heading></my-heading>
<script src="js/custom.js"></script>
Where is the complication? Where is the shadow DOM?
It can be more complicated making it a great tool for those who have an understanding of Web Components.
But for an alternative to serverside includes, the simple form can be used.
By @BenPleysier
Fair enough, I just thought using a simple normal everyday variable to contain the html and then inserting that into the element you need to using innerHTML is maybe a more simple/mainstream approach than using class extends HTMLElement/customElements.define. Both do the jobbie so I guess its what ever floats your boat and lets face it web-components only get complex IF you require to take it a step further.
Also I think web-components fell out of favour a bit because so many developers use frameworks to create flexible components and they do it a lot simpler (behind the scenes) than using vanilla javascript shadow dom approach, one tick for them I guess, but then they overcomplicate other stuff that can be done easier in vanilla javascript. Swings and roundabouts.
OP has options now, so let's hope they might be able to put one of them to good use. I'd forget php includes, unless you have a server environment set up, and use one of the javascript approaches. Not a big fan of DW templates or library items myself.
I'll try tomorrow to act on the helpful suggestions I've been given in this discussion group. I should add that I'm surprised to find that adding a navigation bar to pages is so complicated and that there's so little info about how to do it readily available on the internet.
By the way, when, after creating a nav bar in DW2022, I copied and pasted the code into other pages, the bar appeared but none of the formatting came with it. But I have a very limited understanding of code (to say the least!).
By @Alfred23830680d5ea
Id try either the solution that Ben or myself have provided which uses javascript, thats the simplest/most stable I think.
It sounds like you did not have the css linked to the pages that you were copying the navigation into. That would cause lose of formating. With 42 pages you need to set up a workflow which makes life easy should you need to update the navigation in the future. Once you have generic link/s to your navigation html and css code in all the files it will be as simple as updating one file.
I can't get this to work. I've created a successful nav bar in one page
By @Alfred23830680d5ea
How have you styled the nav bar in the page that works? Do you have a css stylesheet attached to the page where the css styling is?
This is how I would probably go about doing what you want, in javascript -
Create a file in your website folder named - globalNavigation.js
In the globalNavigation.js file assign your navigation html to a javascript variable:
const globalNavigation = `
<!--- Paste your navigation html code here -->
`
const navigation = document.querySelector('.navigation');
navigation.innerHTML = globalNavigation;
In the page/s where you want your navigation to appear add a <div> with the class name of - navigation:
<div class="navigation"></div>
Add a link to your globalNavigation.js file at the bottom of each page, directly before the closing </body> tag:
<script src="globalNavigation.js"></script>
</body>
That should be it, assuming the css styles, which controls the formatting and presentation for the navigation, are in a linked css stylesheet which is present in ALL your pages
Thank you. I see that I need first to make a css style sheet (I assume it's the same as a css folder) and link it to all my pages. I'll do this and go from there. I think I'm on my way of getting a Dreamweaver education!
By @Alfred23830680d5ea
A css folder is a folder and a css stylesheet is a css file, which you can keep in the css folder. Then add link to the css stylesheet in each of your pages.
I see that I need first to make a css style sheet
By @Alfred23830680d5ea
===========
- Go to File > New > CSS file. Hit Create button.
- Paste or manually add styles to your CSS file and SaveAs top_nav.css.
- Save stylesheets to a Styles or CSS folder in your local site.
- Open your HTML page in Code view.
- Scroll to the <head> tag of your document.
- Go to Tools > CSS > Attach Stylesheet. Select top_nav.css. Save & close.
- Repeat steps 4-6 in other HTML pages.
AdChoices