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">
<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">
<li class="active"><a href="#intro">Intro</a>

This is the section in the 2nd html.

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

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

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=""></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); 



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