Load HTML pages into a div [duplicate]

0

Good morning!

I'm a beginner in HTML and CSS. I created a web page where I basically have the navigation menu and have the other pages in separate files. I would like that when clicking on a menu option the page was updated and the navigation menu was still available, that is, on any page I visit the menu will be there for navigation to happen. If I had using frames, it would only do with the page being loaded in the frame "content", however I do not use frame and rather DIVs. I've been researching the subject and realized that I need to load the pages into mine. However, as I said, I'm a beginner in HTML and CSS and I have no idea how to do this. Could someone help me with this impediment?

Below the code, only the BODY tag for you to understand the context.

 <body>
        <div id="cssmenu">
        <ul>
           <li class='active has-sub'>

              <a href='#'>
                 <span>
                    Processo CMD
                 </span>
              </a>

              <ul>
                 <li class='has-sub'><a href='#'><span>Sourcing</span></a>
                    <ul>
                       <li>
                          <a href="">
                             <span>
                                Dúvidas de Processos
                             </span>
                          </a>
                       </li>
                       <li class='last'>
                          <a href='#'>
                             <span>
                                ???
                             </span>
                          </a>
                       </li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Aprovações</span></a>
                    <ul>
                       <li><a href='#'><span>Peças</span></a></li>
                       <li class='last'><a href='#'><span>Invest. Buy</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Excessões</span></a>
                    <ul>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Exclusividade
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      Aprovações
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Capacidade Produtiva
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                    </ul>
                 </li>
              </ul>

           </li>

           <li class='active has-sub'>
              <a href='#'>
                 <span>
                    Processo CMI
                 </span>
              </a>

              <ul>
                 <li class='has-sub'><a href='#'><span>Sourcing</span></a>
                    <ul>
                       <li>
                          <a href='#'>
                             <span>
                                Dúvidas de Processos
                             </span>
                          </a>
                       </li>
                       <li class='last'>
                          <a href='#'>
                             <span>
                                ???
                             </span>
                          </a>
                       </li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Aprovações</span></a>
                    <ul>
                       <li><a href='#'><span>Peças</span></a></li>
                       <li class='last'><a href='#'><span>Invest. Buy</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Excessões</span></a>
                    <ul>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Exclusividade
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      Aprovações
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Capacidade Produtiva
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                    </ul>
                 </li>
              </ul>

           </li>

           <li class='active has-sub'>
              <a href='#'>
                 <span>
                    Géberson
                 </span>
              </a>

              <ul>
                 <li class='has-sub'><a href='#'><span>Sourcing</span></a>
                    <ul>
                       <li>
                          <a href='#'>
                             <span>
                                Dúvidas de Processos
                             </span>
                          </a>
                       </li>
                       <li class='last'>
                          <a href='#'>
                             <span>
                                ???
                             </span>
                          </a>
                       </li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Aprovações</span></a>
                    <ul>
                       <li><a href='#'><span>Peças</span></a></li>
                       <li class='last'><a href='#'><span>Invest. Buy</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Excessões</span></a>
                    <ul>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Exclusividade
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      Aprovações
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Capacidade Produtiva
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                    </ul>
                 </li>
              </ul>

           </li>
           <li class='last'>
              <a href='#'>
                 <span>
                    Géberson R
                 </span>
              </a>
           </li>
        </ul>
        </div>

        <div id="conteudo">

        </body>
    
asked by anonymous 30.04.2015 / 16:31

2 answers

2

For this to work in .html files, you will need to load the content dynamically using ajax , which will handle the contents of div .

link

Or you can use a language like PHP , working with content dynamically, but with reloading the screen.

Even though inside the div, there is the possibility of using iFrame , which loads "pieces" of the screen, according to its id and src . link

    
30.04.2015 / 16:49
1

How do I do: I break HTML into modular .php files (each with a menu, navbar and etc.), then create a main .php and paste the componets this way:

    require_once 'components/head/head-advertisements.php';
    require_once 'components/navbar/navbar-main.php';
    require_once 'components/body/body-buy-credits.php';
    require_once 'components/footer/footer-main.php';
    require_once 'components/modals/advanced-search-modal.php';
    require_once 'components/modals/logout-modal.php';
    require_once 'components/scripts/scripts.php';

Within each small .php file I put the HTML content in your case the menu (no need for any editing (when the page is static) then just copy and paste the desired part of HTML to the .php file ( to run you'll need an http server, I usually use XAMPP)).

    
30.04.2015 / 16:37