Load HTML pages into a <div>

Asked

Viewed 2,471 times

0

good morning!

I’m a beginner in HTML and CSS. I created a web page where I basically have the navigation menu and I have the other pages in separate files. I would like that by clicking on a menu option the page would be updated and the navigation menu would remain available, that is, on any page I visit the menu will be there for navigation to happen. If I had used frames, it would be enough to have the page loaded in the "content" frame, but I do not use frame and Divs. I’ve been researching the subject and realized that I need to load the pages in mine. However, as I said, I’m a beginner in HTML and CSS and have no idea how to do it. Could someone help me with this obstacle?

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>

jquery html css

  • Do you want to use the menu in several other places? Create it in a separate file and call it where needed. Example: require menu.html (in this case using php). If you want to use Jquery you can use the function load https://api.jquery.com/load/.

  • Géberson: I closed the question as duplicate because I think you’ll find an answer there in the other question. If you have specific problems at any step of the implementation you can put a new question showing the code you made and explaining where it went wrong.

  • Géberson these answers answered him?

2 answers

2

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

http://www.w3schools.com/ajax/

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

Even so, even inside the div, there is the possibility to use the iFrame, that carries "pieces" of the screen, according to your id and src. http://www.w3schools.com/tags/tag_iframe.asp

1

As I do: I break HTML into modular . php files (each with a menu, navbar, etc.), then create a . php main and colo the requires of the compositions in 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';

inside every little file. php I put the HTML content in your case the menu (no need for any editing (when the page is static) so just copy and paste the desired part of HTML into the file . php (to run you need an http server, I use XAMPP)).

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.