Skip to main content

Sidebar

Barra laterale di navigazione

Su smartphone

  1. La visualizzazione è comandata dal bottone hamburger nella barra istituzionale
  2. Le voci sono visualizzate in verticale in un pannello che si apre sotto la barra istituzionale
  3. Premendo il bottone hamburger la pagina scorre automaticamente in alto per visualizzare immediatamente le voci della sidebar.

A scorrimento in basso
La sidebar scorre verticalmente per consentire l’accesso alle voci più in basso

Su desktop
E’ sempre visualizzata in verticale a lato della pagina e scorre solidalmente con essa.

<div class="it25-sidebar-wrapper">
  <nav class="it25-sidebar-links collapse"  id="it25-main-nav">
      <div class="sidebar-wrapper">
        <h3 class="no_toc">SIDEBAR</h3>
        <div class="sidebar-linklist-wrapper">

          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><h3>Intestazione 1</h3></li>
              <li>
                <ul class="link-sublist">
                  <li><a class="list-item" href="#"><span>Link 1a</span></a>
                  </li>
                  <li><a class="list-item active" href="#"><span>Link 2a</span></a>
                  </li>
                  <li><a class="list-item" href="#"><span>Link 3a</span></a>
                  </li>
                </ul>
              </li>
              <li><h3>Intestazione 2</h3></li>
              <li>
                <ul class="link-sublist">
                  <li><a class="list-item" href="#"><span>Link 1b</span></a></li>
                  <li><a class="list-item disabled" href="#"><span>Link 2b</span></a></li>
                  <li><a class="list-item" href="#"><span>Link 3b</span></a></li>
                </ul>
              </li>
              <li><h3>Intestazione 3</h3></li>
              <li>
                <ul class="link-sublist">
                  <li><a class="list-item" href="#"><span>Link 1c</span></a>
                    <ul class="link-sublist">
                      <li><a class="list-item" href="#"><span>Link 21</span></a></li>
                      <li><a class="list-item disabled" href="#"><span>Link 22</span></a></li>
                      <li><a class="list-item" href="#"><span>Link 23</span></a></li>
                    </ul>
                  </li>
                  <li><a class="list-item" href="#"><span>Link 2c</span></a></li>
                  <li><a class="list-item" href="#"><span>Link 3c</span></a></li>
                </ul>
              </li>
            </ul>
          </div>

        </div> <!-- end sidebar-linklist-wrapper -->
      </div> <!-- end sidebar-wrapper -->
  </nav>
</div>

Per poter meglio rendersi conto del comportamento di questo componente è utile richiamare la schermata composta Pagina con sidebar, e provare a restringere la finestra video e far scorrere la pagina in basso e in alto.

Questo sito utilizza cookie tecnici, analytics e di terze parti.
Proseguendo nella navigazione accetti l’utilizzo dei cookie.

Privacy policy