Barra Lateral y de Navegación

Las barras laterales y las barras de navegación son componentes que sirven como navegación para su aplicación o sitio.

Barra Lateral

Estructura basica

<aside class="social-sidebar">
  <!-- Ahora tenemos el contenido de la barra lateral de Social -->
  <div class="social-sidebar-content">
      <!-- El nombre de usuario y la sección avatar -->
      <div class="user">
        <img class="avatar" width="25" height="25" src="./assets/img/avatars/avatar.png" alt="Julio Marquez">
        <span>Julio Marquez</span>
        <!-- Este es el activador del menú de configuración del usuario -->
        <i class="trigger-user-settings fa fa-user" data-toggle="dropdown"></i>
        <!-- EMPIEZA la sección de configuración del usuario -->
        <div class="user-settings">
        ...
        </div>
        <!-- TERMINA la sección de configuración del usuario -->
      </div>
      <!-- La sección del campo de búsqueda -->
      <div class="search-sidebar">
        ...
      </div>
      <!-- EMPIEZA la sección de contenido del menú -->
      <section class="menu">
        <div class="menu-content">
          ...
        </div>
      </section>
      <!-- TERMINA la sección de contenido del menú -->
  </div>
</aside>

Ancho

La barra lateral se expande de forma predeterminada, pero si desea que se reduzca, solo agregue .reduced-sidebar a la etiqueta del cuerpo.

Reducida Expandida
Barra lateral reducida Barra lateral expandida

Accesos directos de configuración de usuario

Configuración del usuario de la barra lateral

Estructura

<!-- EMPIEZA la sección de configuración del usuario -->
<div class="user-settings">
  <div class="arrow"></div>
  <!-- Título de configuración de usuario -->
  <h3 class="user-settings-title">Accesos directos de configuración</h3>
  <!-- Contenido de configuración del usuario -->
  <div class="user-settings-content">
    <!-- No es necesaria ninguna clase adicional para 
        indicar el contenido de la opción de configuración 
        del usuario en el menú -->
    <a href="#my-profile">
      <div class="icon">
        <i class="fa fa-user"></i>
      </div>
      <div class="title">Mi perfil</div>
      <div class="content">Ver tu perfil</div>
    </a>
    <a href="#view-messages">
      <div class="icon">
        <i class="fa fa-envelope-o"></i>
      </div>
      <div class="title">Ver mensajes</div>
      <div class="content">Tienes <strong>17</strong> nuevos mensajes</div>
    </a>
    <a href="#view-pending-tasks">
      <div class="icon">
        <i class="fa fa-tasks"></i>
      </div>
      <div class="title">Ver tareas</div>
      <div class="content">Tienes <strong>8</strong> tareas pendientes</div>
    </a>
  </div><!-- /Contenido de configuración del usuario -->
  <!-- Configuración de usuario Pie de página -->
  <div class="user-settings-footer">
    <a href="#more-settings">Ver más configuraciones</a>
  </div>
</div>
<!-- TERMINA la sección de configuración del usuario -->

Formulario de búsqueda

Formulario de búsqueda de la barra lateral

Estructura

<div class="search-sidebar">  
  <form class="search-sidebar-form has-icon">    
    <label class="fa fa-search" for="sidebar-query"></label>    
    <input id="sidebar-query" type="text" class="search-query" placeholder="Buscar">  
  </form>
</div>

Elementos de menú

Para una mejor comprensión de esta sección, vea el código fuente de este diseño de página ../demo/admin/layouts/reduced-sidebar.html

Plugin

Social Sidebar necesita el complemento de la barra lateral para funcionar, el se encuentra en ./assets/js/sidebar.js. Este plugin es un Plugin para jQueryy ha sido optimizado a partir de la versión v1.x.

Uso básico

$(function() {
  $(".social-sidebar").socialSidebar();
});

Opciones

$(function() {
  $(".social-sidebar").socialSidebar(options);
});
Nombre tipo valor por defecto descripción
toggler cadena de texto .social-navbar .navbar-toggle El elemento que activa la barra lateral.
position cadena de texto front Esto le permite elegir la posición de la barra lateral en un dispositivo móvil, al lado del contenido de la página o al frente del contenido de la página. Puedes elegir dos valores: siguiente y delantero next and front
reducedWidth cadena de texto 54px Una cadena que determina el ancho cuando se reduce la barra lateral. Si cambia esto, debe cambiar la duración de la transición en el código css para la barra lateral y la barra de navegación.
expandedWidth cadena de texto 200px Una cadena de texto que determina el ancho cuando la barra lateral se expande. Si cambia esto, debe cambiar la duración de la transición en el código css para la barra lateral y la barra de navegación.
duration número 200 Un número que determina cuánto tiempo se ejecutará la animación. Si cambia esto, debe cambiar la duración de la transición en el código css para la barra lateral y la barra de navegación.

Posición (dispositivos pequeños)

Puede elegir dos posiciones diferentes para la barra lateral en dispositivos pequeños:

Frente Lateral
Posición delantera de la barra lateral Posición Lateral de la Barra Lateral

Barra de Navegación

3 nuevos menús desplegables se agregaron para las notificaciones, tareas y mensajes de los usuarios. Se usa el mismo concepto de Bootstrap Navbar Dropdown Menus pero tienen su propia estructura simple. Antes de usar este nuevo menú desplegable, debes agregar .social-navbar al lado de la clase navbar.

Notificación

Notificaciones Navbar

Estructura

<nav class="navbar social-navbar">
  <div>
    <div class="nav-indicators">
      <ul class="nav navbar-nav navbar-right nav-indicators-body">
        <!-- BEGIN DROPDOWN NOTIFICATIONS -->
        <li class="dropdown nav-notifications open">
          <!-- BEGIN DROPDOWN TOGGLE -->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
            <span class="badge">9</span>
            <i class="fa fa-warning fa-lg"></i>
          </a>
          <!-- TERMINA DROPDOWN TOGGLE -->
          <!-- BEGIN DROPDOWN MENU -->
          <ul class="dropdown-menu">
            <!-- BEGIN DROPDOWN HEADER -->
            <li class="nav-notifications-header">
              <a tabindex="-1" href="#">
                Tienes <strong>9</strong> nuevas notificaciones
              </a>
            </li>
            <!-- TERMINA DROPDOWN HEADER -->
            <!-- BEGIN NOTIFICATION ITEMS -->
            <li class="nav-notifications-body">
              ...
              <!-- BEGIN message -->
              <a href="#" class="text-info">
                <i class="fa fa-user"></i> Nuevo usuario
                <small class="pull-right">Justo ahora</small>
              </a>
              <!-- ÈND message -->
              ...
            </li>
            <!-- TERMINA NOTIFICATION ITEMS -->
            <!-- BEGIN DROPDOWN FOOTER -->
            <li class="nav-notifications-footer">
              <a href="#">Ver todos los mensajes
              </a>
            </li>
            <!-- TERMINA DROPDOWN FOOTER -->
          </ul>
          <!-- TERMINA DROPDOWN MENU -->
        </li>
      </ul>
    </div>
  </div>
</na>

Tareas

Tareas Navbar

Estructura

<nav class="navbar social-navbar">
  <div>
    <div class="nav-indicators">
      <ul class="nav navbar-nav navbar-right nav-indicators-body">
        <!-- BEGIN DROPDOWN TASKS -->
        <li class="dropdown nav-tasks">
          <!-- BEGIN DROPDOWN TOGGLE -->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
            <span class="badge">13</span>
            <i class="fa fa-tasks fa-lg"></i>
          </a>
          <!-- TERMINA DROPDOWN TOGGLE -->
          <!-- BEGIN DROPDOWN MENU -->
          <ul class="dropdown-menu">
            <!-- BEGIN DROPDOWN HEADER -->
            <li class="nav-tasks-header">
              <a href="#">Tienes <strong>13</strong> tareas en progreso</a>
            </li>
            <!-- TERMINA DROPDOWN HEADER -->
            <!-- BEGIN DROPDOWN ITEMS -->
            <li class="nav-tasks-body">
              ...
              <!-- BEGIN task -->
              <a href="#">
                Preparar informe
                <span class="pull-right">30%</span>
                <div class="progress">
                  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
                    <span class="sr-only">30% Completo</span>
                  </div>
                </div>
              </a>
              <!-- TERMINA task -->
              ...
            </li>
            <!-- TERMINA DROPDOWN ITEMS -->
            <!-- BEGIN DROPDOWN FOOTER -->
            <li class="nav-tasks-footer">
              <a href="#">Ver todas las tareas
              </a>
            </li>
            <!-- TERMINA DROPDOWN FOOTER -->
          </ul>
          <!-- TERMINA DROPDOWN MENU -->
        </li>
      </ul>
    </div>
  </div>
</nav>

Mensajes

Mensajes de Navbar

Estructura

 <nav class="navbar social-navbar">
  <div>
    <div class="nav-indicators">
      <ul class="nav navbar-nav navbar-right nav-indicators-body">
        <!-- BEGIN DROPDOWN MESSAGES -->
        <li class="dropdown nav-messages">
          <!-- BEGIN DROPDOWN TOGGLE -->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
            <span class="badge">8</span>
            <i class="fa fa-envelope fa-lg"></i>
          </a>
          <!-- TERMINA DROPDOWN TOGGLE -->
          <!-- BEGIN DROPDOWN MENU -->
          <ul class="dropdown-menu">
            <!-- BEGIN DROPDOWN HEADER -->
            <li class="nav-messages-header">
              <a tabindex="-1" href="#">Tienes <strong>8</strong> nuevos mensajes</a>
            </li>
            <!-- TERMINA DROPDOWN HEADER -->
            <!-- BEGIN DROPDOWN ITEMS -->
            <li class="nav-messages-body">
              ...
              <!-- BEGIN Message -->
              <a href="#">
                  <img class="avatar" src="./assets/img/avatars/user1_55.jpg" alt="User">
                  <div class="title">
                    <small class="pull-right">Justo ahora</small>
                    <strong>Yadra Abels</strong>
                  </div>
                  <div class="message">
                    Lorem ipsum dolor sit amet, consectetur...
                  </div>
              </a>
              <!-- TERMINA Message -->
              ...
            </li>
            <!-- TERMINA DROPDOWN ITEMS -->
            <!-- BEGIN DROPDOWN FOOTER -->
            <li class="nav-messages-footer">
              <a tabindex="-1" href="#"> Ver todos los mensajes</a>
            </li>
            <!-- TERMINA DROPDOWN FOOTER -->
          </ul>
          <!-- TERMINA DROPDOWN MENU -->
        </li>
      </ul>
    </div>
  </div>
</nav>