Currently, I am in the process of studying Bootstrap, jQuery, and React with the aim of loading my navigation menu from a separate file called menu.html into my main file index.html. The script I am using for this task is:
function codeAddress() {
document.getElementById("myFrame").src = "src/menu.html";
}
window.onload = codeAddress;
Here is the basic structure of the HTML:
<body>
<iframe id="myFrame" src="#" style="border:none;height:100%;width:100%;"></iframe>
</body>
Although the file successfully loads, the CSS styles do not get applied to it. Consequently, it appears as a normal list without any design or styling (essentially, ugly). Are there any simpler methods available to achieve this, or how can I apply the necessary CSS to make it look visually appealing? When directly pasting the code into index.html, it looks perfect.
The content within the menu.html file comprises a simple list structure, similar to the following:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<!-- Brand -->
<a class="navbar-brand" href="http://mydomain.ml/">M62</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">keeper</a>
</li>
</ul>
I have also attempted other approaches such as using HTML imports and JavaScript's .get method, but none have proven successful so far. This current code snippet is the only one that has managed to load any content from the menu file.