Question

151

Set up a HTML page with left and right panel

rated 0 times [ 153] [ 2] / answers: 1 / hits: 51961 / 10 Years ago, mon, may 5, 2014, 12:00:00

how can I set up a HTML Page with two content sides? Without <frames> !

In example:

On the left side should be the menu for the navigation.
On the right side should be the content of the page.

Example menu:

<div id=page>

    <div id=menuleftcontent>

        <ul id=menu>

            <li> <a href=showfirstcontent>first</a></li>

            <li><a href=showsecondcontent>second</a></li>

        </ul>

    </div>

    <div id=maincontent>

        <div id=firstcontent>first</div>

        <div id=secondcontent>second</div>

    </div>

</div>

The menu on the left side should be a fix content and the right content should be changeable.

I have made a sketch:

enter

Thanks in advance

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

richardaydenc

Add To Favorites

Follow

Total Points: 148

Total Questions: 125

Total Answers: 98

Location: Seychelles

Member since Mon, Jun 28, 2021

3 Years ago

richardaydenc questions

1 Working with Typescript Interfaces- error: property does not exist

Wed, Sep 1, 21, 00:00, 3 Years ago

1 Uncaught RangeError: Maximum call stack size exceeded - WHY? / How to avoid?

Sat, Jun 19, 21, 00:00, 3 Years ago

1 What is the correct way to import Vuetify components individually?

Tue, Jan 12, 21, 00:00, 3 Years ago

1 How to check if image is loaded in Vue/Nuxt?

Fri, Dec 4, 20, 00:00, 4 Years ago

1 Route not rendering component

Thu, Jul 2, 20, 00:00, 4 Years ago

View All

answered 10 Years ago trinity · Accepted Answer

Re-arrange the code so that (i) main content appears before sidebar in HTML source order (ii) add a clearing div (iii) change the href attribute of menu links:

<div id=page>

    <div id=maincontent>

        <div id=firstcontent>firstcontent</div>

        <div id=secondcontent>secondcontent</div>

    </div>

    <div id=menuleftcontent>

        <ul id=menu>

            <li><a href=#firstcontent>first</a></li>

            <li><a href=#secondcontent>second</a></li>

        </ul>

    </div>

    <div id=clearingdiv></div>

</div>

Then use the following CSS:

#page {

    margin-left: 200px;

}

#maincontent {

    float: right;

    width: 100%;

    background-color: #F0F0F0;

}

#menuleftcontent{

    float: left;

    width: 200px;

    margin-left: -200px;

    background-color: #CCCCCC;

}

#clearingdiv {

    clear: both;

}

For the obscure part of your question, you need to use JavaScript to show/hide divs. While it is possible to use vanilla JavaScript, the jQuery library makes it much easier:

$(function () {

    $(#maincontent > div:gt(0)).hide();

    $(#menu a).on(click, function (e) {

        var href = $(this).attr(href);

        $(#maincontent >  + href).show();

        $(#maincontent > :not( + href + )).hide();

    });

});

Demo here