AMayer AMayer - 4 years ago 70
CSS Question

Side menu with links to parts in Iframes

I've created a webpage that has the following structure:

Main html that uses a side menu;
Secondary html that has the information that I want to show in the main html.

I want to achieve the following. Let's say that the secondary html has a section named intro. I want to link that section to a menu item. So when I press the corresponding button, I want to show in my main html the secondary html starting at the #intro section.

This is my sidebar nav in the main html

<div id="main">
<div class="wrapper">
<!-- LEFT SIDEBAR NAV-->
<aside id="left-sidebar-nav">
<ul id="slide-out" class="side-nav leftside-navigation">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-blue active"><i class="mdi-action-view-carousel"></i> Field</a>
<div class="collapsible-body">
<ul>
<li class="active"><a href="#intro">Intro</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
</aside>
</div>




This is the section in the 2nd html.

<div class="divider"></div>
<div class="section" id="intro">

<li style="list-style: disc">
some text.
</li>
</div>
</div>


When I press the Intro button in the left side nav, I want to open in my main html the 2nd one at the Intro section.

The reason I want to load the 2nd html in my main one is that It uses different css styles and It ruins my formatting if I merge them.

Any solution?

Thank you!

Answer Source

It can be easily achieved with jQuery:

Here's my suggestion:

Step 1

First of all, make sure you have those sections in your secondary.html file:

<div id="intro">Intro section</div>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>

An, in main.html, make sure you have an element with id=content. This will be your placeholder. Like this:

<div id="content"></div>

Step 2

Modify your anchors:

  1. point href to a dummy url (#).
  2. add a class so we can catch this with jQuery. I named here btn-load-section.
  3. add data- attributes so we can add some useful data to each anchor, to grab it later. I added here data-url and data-section.

Like this:

<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="intro">Intro</a>
<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="section1">Section 1</a>
<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="section2">Section 2</a>
<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="section3">Section 3</a>

Step 3

At the end of our <body> section (in main.html), you can add this code:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    /*
        Executes the script inside the anonymous function 
        only when the page is loaded
    */
    $(document).ready(function() {

        /* 
            select all anchors with 'btn-load-section' class (class = dot before)
            and bind a click event
        */
        $("a.btn-load-section").on("click", function(e) {
            e.preventDefault(); //this cancel the original event: the browser stops here

            var url = $(this).data('url'); //get the data-url attribute from the anchor
            var section = $(this).data('section'); //get the data-section attribute from the anchor

            var contentDiv = $("#content"); //select the div with the ID=content (id = hash before). This will be our target div.

            /*
                executes the jQuery .load function
                It will load the url and search for the correspondent section (load page fragment)
                e.g. will call load with "secondary.html #intro" (#intro is our fragment on the secondary.html page).
            */
            contentDiv.load(url + " #" + section); 


        });

    });
</script>

As I don't know how familiar you're with jQuery, I added some comments.

The first script tag loads jQuery from a CDN.

You can read more about the jQuery's .load function here. But basically it allows to load page fragments:

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

This is just a possible approach. Hope it helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download