CODEWITHSUNDEEP
javascripthtmlbootstrap-4twitter-bootstrap-3navigation
adam
adam

Reputation: 685

how to get smooth transition between html navigation bar clicks

I have a navigation bar in the following page

https://stackblitz.com/edit/web-platform-bcjvzq?file=index.html

clicking to home or about buttons causes the full page the reload, first on top left string appears than the navigation page loads a second later. It is not smoothly transitioning. What is causing this

Upvotes: 2

Views: 833

Answers (1)

Celdus
Celdus

Reputation: 2110

The problem you are having is that when navigating the page the whole HTML, CSS and JavaScript gets loaded. Then the browser can interpret the JavaScript inside your HTML, which is responsible for loading your navigation:

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

In order to fix this, you could load/change your content on click of the navigation. In your index.html you can specify a method for setting the content.

<div id="content"></div>  
  <script>
    $("#content").load("index2.html"); //loading the initial content
    function setBody(url){
      $("#content").load(url);
    }
  </script>

And then in the navigation call make your list-items call this functions:

  <li><a id="len1" class="hoverable" onclick="setBody('index2.html')">Home</a></li>
  <li><a id="len2" class="hoverable" onclick="setBody('body2.html')">About</a></li>

Upvotes: 4

Related Questions