0

So my school sites navigation bar has a lot of links and such, and its getting tedious to keep adding new items to each page every time I make a new page. I tried using or related things, and then linking the html with the navbar, but it showed up without any of the CSS I had linked as well.

Here's the code for the navbar:

And here are some examples of what I was told to do:

     <div id="nav-placeholder">

     </div>

     <script>
        $(function(){
           $("#nav-placeholder").load("navbar.html");
        });
     </script>

Above: just makes the navbar disappear completely. The answer that had this said "put it on a server it will work" but I can't currently do that as the server isn't working. Found here (top answer by votes). And yes, I did link the script it said to.

<object name="navigation" type="text/html" data="navbar.html"></object>

This one makes it look like this. did the same. Found here.

This is what the navbar is supposed to look like.

Here's the code for the navbar: 

<nav class="navbar">
  <ul>
     <li><a href="../DennisCourseSite.html">Home</a></li>
     <li><a href="unita.html">Unit A</a></li>
     <li><a href="unitb.html">Unit B</a></li>
     <li><a href="unitc.html">Unit C</a></li>
     <li><a href="unitd.html">Unit D</a></li>
     <li><a href="unite.html">Unit E</a></li>
     <li><a href="unitf.html">Unit F</a></li>
     <li><a href="unitg.html">Unit G</a></li>
     <li><a href="unith.html">Unit H</a></li>
     <li><a href="../glossary.html">Glossary</a></li>
  </ul>

Here's the css (if needed):

nav {
    font-family: 'Open Sans', sans-serif;
}
nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #666666;
   display: block;
}
nav li a {
   display: block;
   color: white;
   text-align: center;
   padding: 10px;
   text-decoration: none;
}
nav li {float: left;}
nav li:hover {background-color: #737373;}

Note: all above navbar-related code is nested in a element, like this:

<header class="head>
   <!--navbar reference/include thing-->
</header>

Sorry if it was overcomplicated, I thought people might need all resources.

abnormalfantasy
  • 21
  • 1
  • 5

2 Answers2

0

I think in your first example there might be some javascript error (check your console). Which will result in not being able to load the navigation properly.

In the second example I think the navbar.html is loaded as an object, meaning you most likely need to load the css in navbar.html itself, because it probably can't get the css from the html document it is loaded in.

Maybe in your case using PHP to include the navbar in every page sounds like a easier solution. See information here.

Fabian Hijlkema
  • 391
  • 1
  • 9
0

Wrong approach imho. Use Jq via

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

in head tag of your html, vanilla js have no methods to handle that

Try this way
create a file index.html (code below)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready( function() {
            $( "#container" ).load( "bar.html" );
            console.log('Done');
        });
    </script>
    <style type="text/css">

        .obj-center {
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }

        .navbar {
            position: absolute;
            width: 80%; height: 10%;
            border: 1px #000 solid;
        }

        ul {
            position: absolute;
            width: 100%; height: 100%;
        }

        li {
            display: inline-block;
        }

    </style>
</head>
<body>
    <div id = "container"></div>
</body>
</html>

create a file bar.html (code below) 

<nav class="navbar obj-center">
  <ul>
     <li><a href="../DennisCourseSite.html">Home</a></li>
     <li><a href="unita.html">Unit A</a></li>
     <li><a href="unitb.html">Unit B</a></li>
     <li><a href="unitc.html">Unit C</a></li>
     <li><a href="unitd.html">Unit D</a></li>
     <li><a href="unite.html">Unit E</a></li>
     <li><a href="unitf.html">Unit F</a></li>
     <li><a href="unitg.html">Unit G</a></li>
     <li><a href="unith.html">Unit H</a></li>
     <li><a href="../glossary.html">Glossary</a></li>
  </ul>
</nav>

$(document).ready( function() {}); --> Code inside here will be executed as soon as doc is ready
$( "#container" ).load( "bar.html" ); --> Load inside index div bar.html content

To improve graphic result consider to use a table with "table-layout: fixed" style


Hope this will help you
Hele

Hele
  • 189
  • 1
  • 12