How to preload html links from a menu and hide / show the content with javascript?

Question

I have an html menu with links to other pages which have this menu included too. Very basic:

<div id="sidebar-nav">
    <ul id="dashboard-menu">
        <li class="active">
            <div class="pointer">
                <div class="arrow"></div>
                <div class="arrow_border"></div>
            </div>
            <a href="index.html">
                <i class="icon-dashboard"></i>
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="1.html">
                <i class="icon-signal"></i>
                <span>1</span>
            </a>
        </li>
        <li>
            <a href="2.html">
                <i class="icon-picture"></i>
                <span>2</span>
            </a>
        </li>
        <li>
            <a href="3.html">
                <i class="icon-calendar-empty"></i>
                <span>3</span>
            </a>
        </li>
    </ul>
</div>

So basically this menu helps navigate through content.

When I load the home of the menu I want a function to automatically load the other links too so it speeds up the navigation and of course I want the content of those links to show up only when the corresponding link in the menu is clicked.

What library / function should I look into to achieve that?

Answer 1

Which Library or Function to use

You can see, in my code everything is jQuery. So in my advice, jQuery will be the best for you! You can have it here:

api.jquery.com or even at their site www.jquery.com You can have a quick link at their footer tag.

Pages will be cached

Your page and some of its code is saved as a cache in the local storage, you can check them out using F12. Which will open Developer Tools, then in Network workspace, check out which are loaded from Server and which are loaded from local storage. Almost every browser will save some of your code, from .css files or your scripts so that it doesn't have to load it everytime. You can see the code 304 (correct me, if mistaken) in browser which would mean that the file was loaded from local machine. So don't worry about this. You can get other helpfull articles about speeding up and caching the sessions too.

Dynamically Creating the menu

To dynamically create the link navigation menu you can use:

Example

$('#dashboard-menu').html();

In the HTML of the code, you can write the list items. Which will be set so that you get them. You can call this function on page start as:

Code Example

$(document).ready(function () {
  $('#dashboard-menu').html();
}

Techniques

If you don't know what would be the menu, for example you want to load the data from Database, you can use ajax requests too, this way you will write the result in the dashboard-menu. However, your site won't get fast just by removing the navigation menu and laoding it after the page load.

For example:

$.ajax({
  url: "page_to_load.html"
  success: function (data) {
    $('#dashboard-menu').html(data);
  }
});

Alternate way of using Ajax

Alternate way for this is load().

http://api.jquery.com/load/

To show only relative menu

To show the content you can use show(). Like this, lets take the example from your code

Snippet from your code

<li>
   <a href="1.html">
     <i class="icon-signal"></i>
       <span>1</span>
   </a>
</li>

Showing child

To show the a from this; since a is a child of li, you can use this:

$('li').click(function () {
  $(this).find('a').show(); // or even use toggle()
}