This is the main body container. You can add various content here.

There are 2 versions in frame 2. This is the 1^st version, where the fixed sidebar is on the left side whereas in the 2^nd version it's on the right. Copy the code below to use this version in your project or click here to browse the 2^nd version.

                    

                        <div class="fr2"> <!--Starting: frame no.2-->

                            <div class="fr2Ls_1"> <!--Starting: left side - fixed-->
                        
                                <ul> <!--Starting: side panel - main links-->
                                    <li><a class="fr2Ls_btn" href="#">Demo main nav 1</a>
                                        <ul> <!--Starting: side panel - sub links-->
                                            <li><a class="fr2Ls_btn" href="#">Demo sub nav 1</a></li>
                                            <li><a class="fr2Ls_btn" href="#">Demo sub nav 2</a></li>
                                            <li><a class="fr2Ls_btn" href="#">Demo sub nav 3</a></li>
                                            <li><a class="fr2Ls_btn" href="#">Demo sub nav 4</a></li>
                                            <li><a class="fr2Ls_btn" href="#">Demo sub nav 5</a></li>
                                        </ul> <!--Ending: side panel - sub links-->
                                    </li>
                                    <li><a class="fr2Ls_btn" href="#">Demo main nav 2</a></li>
                                    <li><a class="fr2Ls_btn" href="#">Demo main nav 3</a></li>
                                    <li><a class="fr2Ls_btn" href="#">Demo main nav 4</a></li>
                                    <li><a class="fr2Ls_btn" href="#">Demo main nav 5</a></li>
                                    <li><a class="fr2Ls_btn" href="#">Demo main nav 6</a></li>
                                    <li><a class="fr2Ls_btn" href="#">Demo main nav 7</a></li>
                                </ul> <!--Ending: side panel - main links-->
                            
                            </div> <!--Ending: left side - fixed-->
                        
                            <div class="fr2Rs_1"> <!--Starting: right side - scrollable-->
                        
                                <span> <!--Gap balancer for nav-->
                                    <p>Gap for navbar.</p>
                                </span>
                        
                                <div> <!--Content container-->
                                    <p>This is the main body container. You can add various content here.</p>
                                </div>
                            
                            </div> <!--Ending: right side - scrollable-->
                        
                        </div> <!--Ending: frame no.2-->