HTML Help for Nav Bar

Question

Stefce 146 Posting Pro

2 Years Ago

Hello everyone. I need a little help with my html code.
I want to load html file (menu.html) inside my index.html file

I am trying to achieve this using JavaScript.
Here is an example how i am trying to achieve this.

this is menu.html file

<!-- Mobile Nav (max width 767px)-->
<div class="mobile-nav">
    <!-- Navbar Brand -->
    <div class="amado-navbar-brand">
        <a href="index.html"><img src="core/img/core-img/drveniproizvodi-logo.png" alt=""></a>
    </div>
    <!-- Navbar Toggler -->
    <div class="amado-navbar-toggler">
        <span></span><span></span><span></span>
    </div>

</div>
<!-- Header Area Start -->
<header class="header-area clearfix">

    <!-- Logo -->
    <div class="logo">
        <a href="index.html"><img src="core/img/core-img/drveniproizvodi-logo.png" alt=""></a>
    </div>
    <!-- Social Button -->
    <div class="social-info d-flex justify-content-between">
        <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    </div>

    <div class="categories-menu">
        <a href="index.html">Почетна</a><br>
        <a href="subfolder/index.html">Столчиња</a><br>
        <a href="subfolder/index.html">Маси</a><br>
        <a href="subfolder/index.html">Даски за сецкање</a><br>
        <a href="subfolder/index.html">Привезоци</a><br>
    </div>
</header>
<!-- Header Area End -->

and this is index.html file

<html>
<head>
    <link rel="stylesheet" href="core/css/core-style.css">
    <link rel="stylesheet" href="core/style.css">
</head>
<body>

    <div id="menu"></div>

    <script>
        $(function(){
          $("#menu").load("menu.html");
        });
    </script>
</body>
</html>

The thing is, the design loads properly. But the functionality doesn't work. When i press the button to open the menu on a mobile device.
BUT when i simply paste the code from menu.html inside index.html works just fine?
Here is a picture how it looks
https://prnt.sc/h-_GWy50wOHN

html-css

Edited 2 Years Ago by Stefce

4 Contributors
19 Replies
329 Views
2 Days Discussion Span
Latest Post 2 Years Ago Latest Post by Dani

Jawass commented: Nav bar- drop-down menu html (xhref) coded inline script $? Before consule to be upgrade to mobile application(APK) +2

Dani 4,329 The Queen of DaniWeb

2 Years Ago

I would upgrade to a newer version of jQuery. The version you're using is pretty old.

The jQuery code to load menu.html inside #menu is correct, and the only reason it wouldn't be working is because:

menu.html and index.html are located in different folders
jQuery is not loading correctly
Something in plugins.js or active.js is preventing jQuery from working properly
Something else is going wrong in code you aren't including in your example here; For example, if other javascript on the page is syntactically broken, no javascript on the page will work

If you use Google Chrome, as I do, try opening the Developer Tools and see if any javascript console errors show up. You can do this by right clicking on the web page, and then choosing Inspect. Then, when the developer tools open, click the Console tab across the top, and see if it flags any errors. Other web browsers also provide similar functionality although I'm not sure offhand what it's called in Edge, Safari, or Firefox.

The best way for us to help you at this point is probably to just provide a link to the live version of this page, so we can diagnose for ourselves what the issue may be.

Dani 4,329 The Queen of DaniWeb

2 Years Ago

Your screenshot shows a file called jquery-3.6.1min.js inside the folder core/js/jquery.

However, your javascript says:

<script src="core/js/jquery/jquery-2.2.4.min.js"></script>

The file jquery-2.2.4.min.js, that your HTML code is looking for, is not there.

Dani 4,329 The Queen of DaniWeb

2 Years Ago

And are the bootstrap and popper JS files also in the correct locations the HTML is looking for them at?

Dani 4,329 The Queen of DaniWeb

2 Years Ago

Have you figured out your bug?

Without a doubt, this image very clearly shows that those three files are not available at those locations. They are showing 404 errors. Although I do now notice those are .map files ... I've never seen .map files for JS before?

Dani 4,329 The Queen of DaniWeb

2 Years Ago

I’m glad you got it working, although it wasn’t necessarily the way you were wanting.

You can use URI rerouting so that your pages don’t have a .php extension. DaniWeb is written in PHP and none of our files have a php extension.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

gce517 34 Junior Poster in Training · Answer 1 · 2022-09-19T12:38:33+00:00

It seems that you first need to load jQuery for load() to work.

Something along these lines:

<html>
<head>
    <link rel="stylesheet" href="core/css/core-style.css">
    <link rel="stylesheet" href="core/style.css">

    // --- Load jQuery
    <script src="[path-to-jquery]/jquery-3.6.1.min.js"></script>

</head>
<body>

    <div id="menu"></div>

    <script>
        $(function(){
          $("#menu").load("menu.html");
        });
    </script>
</body>
</html>

Stefce 146 Posting Pro · Answer 2 · 2022-09-19T14:17:07+00:00

I am sorry i didn't included that line in the index.html. But yes already is there the jQuery calling

<!-- ##### jQuery (Necessary for All JavaScript Plugins) ##### -->
    <script src="core/js/jquery/jquery-2.2.4.min.js"></script>
    <!-- Popper js -->
    <script src="core/js/popper.min.js"></script>
    <!-- Bootstrap js -->
    <script src="core/js/bootstrap.min.js"></script>
    <!-- Plugins js -->
    <script src="core/js/plugins.js"></script>
    <!-- Active js -->
    <script src="core/js/active.js"></script>

Stefce 146 Posting Pro · Answer 3 · 2022-09-19T17:40:41+00:00

Yes i actually checked the console and it gives me this 3 errors https://prnt.sc/lyK4Ibu_HAny
I am running the site on localhost i still dint uploaded live.
The index.html and the menu.html are inside the same folder

And is wierd that i dont have that files .map inside my js folder
https://prnt.sc/Z_7r8EJ43e0D

P.S
The night i went to sleep it was working great, when i woke up it wast working... bro there must be some aliens here :S
I tried on 5 different browsers to run the website, and its not working O_O

Stefce 146 Posting Pro · Answer 4 · 2022-09-19T18:31:50+00:00

Stefce 146 Posting Pro

2 Years Ago

Its weird isn't it?

Dani 4,329 The Queen of DaniWeb Administrator Featured Poster Premium Member · Answer 5 · 2022-09-20T02:49:04+00:00

The javacript console errors say that the jQuery .js file is not at the location you are pointing to. Either you moved the file accidentally, or there’s a typo in the path.

Stefce 146 Posting Pro · Answer 6 · 2022-09-20T07:30:56+00:00

Here is a screenshot of jquery folder and the files i there actually. https://prnt.sc/4_9P5whqEiDf
I have updated the jQuery as you told me above.
Still doesnt work.

gce517 34 Junior Poster in Training · Answer 7 · 2022-09-20T16:22:27+00:00

There are two things I can think of from what you're saying.

First, it could be a permissions issue. In my experience, moving folders/files using Explorer (or Finder on macOS), I would constantly get 404 errors for files that were clearly there. It seems that "simply copying & pasting" did not bode well for permissions. Trying to update permissions on the copied files/folders would not solve the issue. However, when I moved (or copied) the files via terminal, the issue was gone. Your mileage may vary.

Second, and this is just a shot in the dark since I don't have access to your code to tinker with it, try using absolute paths instead of relative paths in src=. E.g.:

<script src="http://localhost/core/js/plugins.js"></script>

Stefce 146 Posting Pro · Answer 8 · 2022-09-20T20:02:02+00:00

@Dani the code is updated as well sorry i didnt posted the update, because i wasn't able to edit my post

Stefce 146 Posting Pro · Answer 9 · 2022-09-21T00:11:35+00:00

Yes, this is free prebuild template its called Amado Furniture. I just deleted the <header> from index and place in menu.html just so i can make my code more cleaner and easy to use

Jawass 16 Oldbie · Answer 10 · 2022-09-21T02:00:51+00:00

Nav bar drop-down menu MS.Word 365 is recommended

Stefce 146 Posting Pro · Answer 11 · 2022-09-21T06:51:33+00:00

@jawassjunior sorry i am not sure what you mean by this?

Stefce 146 Posting Pro · Answer 12 · 2022-09-21T08:04:16+00:00

And i got another question, is this way good for SEO? Because i noticed, when i view the page source of index.html the code from menu.html doesn't appear. It's only the <div> element as <div id="menu"></div>

Dani 4,329 The Queen of DaniWeb Administrator Featured Poster Premium Member · Answer 13 · 2022-09-21T20:38:01+00:00

Provided that menu.html is not being blocked from being seen by bots in your robots.txt file, Googlebot is able to understand and parse javascript, and is able to understand what the complete page is meant to look like.

However, it is not ideal, from an SEO perspective. Web browsers having to fetch menu.html and then parse the Javascript also makes pages load slower, which is bad for the end-user and also for Google.

The better way to accomplish a shared menu is to use a server-side programming language (PHP, for example).

Stefce 146 Posting Pro · Answer 14 · 2022-09-22T05:02:34+00:00

Thank you for the nice explanation about the SEO part. Yes, I can do this with PHP, but i dont want my url's to be ending with .php.

As for the files location. They are in the correct place AND with the correct filename, i have send pictures.

What i did to solve this. Is just removed the mobile header part from the menu.html and placed inside the other files, and its working.

<!-- Mobile Nav (max width 767px)-->
<div class="mobile-nav">
    <!-- Navbar Brand -->
    <div class="amado-navbar-brand">
        <a href="index.html"><img src="core/img/core-img/drveniproizvodi-logo.png" alt=""></a>
    </div>
    <!-- Navbar Toggler -->
    <div class="amado-navbar-toggler">
        <span></span><span></span><span></span>
    </div>
</div>