Sidebar
Barra di navigazione laterale, include liste di link e liste di link innestate.
La sidebar semplice può contenere:
- Header
- Lista di link primaria
- Lista di link secondaria
Per differenziare a livello stilistico i link secondari, è sufficiente aggiungere la classe .linklist-secondary all’elemento <div class="sidebar-linklist-wrapper"> contenente la Lista di link.
Per creare una sidebar con linea separatrice a sinistra è sufficiente aggiungere la classe .it-line-left-side al wrapper più esterno: <div class="sidebar-wrapper it-line-left-side">
Per aggiungere la linea separatrice a destra utilizzare invece la classe classe .it-line-right-side
La Sidebar viene utilizzata in combinazione con la header minimale per ottenere un'interfaccia compatta.
Si veda anche la pagina html di esempio completa di sidebar, header e toggler.
Esempio
<div class="sidebar-wrapper">
<div class="sidebar-linklist-wrapper">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3>Header</h3>
</li>
<li><a class="list-item medium active" href="#"><span>Link lista 1 (attivo)</span></a>
</li>
<li><a class="list-item medium disabled" href="#"><span>Link lista 2 (disabilitato)</span></a>
</li>
<li><a class="list-item medium" href="#"><span>Link lista 3</span></a>
</li>
<li><a class="list-item medium" href="#"><span>Link lista 4</span></a>
</li>
</ul>
</div>
</div>
<div class="sidebar-linklist-wrapper linklist-secondary">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>Link secondario 1</span></a>
</li>
<li><a class="list-item active" href="#"><span>Link secondario 2 (attivo)</span></a>
</li>
<li><a class="list-item disabled" href="#"><span>Link secondario 3 (disabilitato)</span></a>
</li>
</ul>
</div>
</div>
</div>