Page content in a sidebar

Asked

Viewed 193 times

0

I’m venturing into frontend, I’m struggling as I put the contents of a page on a sidebar

inserir a descrição da imagem aqui

example: if I click 'profile' the profile content appears on the side if you click 'flight' the contents of the flight seem to be on the side.

{% extends "base.html" %}

{% block content %}
<body>

    <div class="d-flex" id="wrapper">

      <!-- Sidebar -->
      <div class="bg-light border-right" id="sidebar-wrapper">
        <div class="sidebar-heading">
            <table>
                <tr valign="top">
                    <td><img src="{{ user.avatar(160) }}"></td>                    
                </tr>
                <tr><td><h1>Olá {{ user.username }}</h1></td></tr>
            </table>
        </div>
        <div class="list-group list-group-flush">
          <a href="#" class="list-group-item list-group-item-action bg-light">Perfil</a>
          <a href="teste.html" class="list-group-item list-group-item-action bg-light">Voos</a>
          <a href="#" class="list-group-item list-group-item-action bg-light">Check-in</a>
          <a href="#" class="list-group-item list-group-item-action bg-light">Pilotos</a>
          <a href="#" class="list-group-item list-group-item-action bg-light">Eventos</a>
          <a href="#" class="list-group-item list-group-item-action bg-light">Financeiro</a>
        </div>
      </div>
      <!-- /#sidebar-wrapper -->

      <!-- Page Content -->
              <div class="container-fluid">
          <h1 class="mt-4">Simple Sidebar</h1>
          <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
          <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
        </div>
      </div>
      <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Menu Toggle Script -->
    <script>
      $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
      });
    </script>

  </body>


{% endblock %}
html css bootstrap-4 sidebar

  • You refer to this feature: https://i.stack.Imgur.com/bQbSA.jpg ?

  • no, I’m talking 'text' content when I click on some sidebar menu and don’t submenu.

  • Do you say the content where is written "Sidebar" ? If you would not have printout and mark in the image ?

  • I want when you click on the side menu (profile, flight, check-in, events )to display information (content) on the side(right).

1 answer

0

For this case, you can use ajax so that the div (content) is reloaded directly on the page, without loading.

e. g:

$( "#div-to-be-reloaded" ).load( "ajax/complete-response.html" );

Browser other questions tagged html css bootstrap-4 sidebar

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