3

Cómo puedo imitar la plantilla de esta imagen de cms, lo he intentado de está manera pero no logro entender la forma correcta de utilizarlo en la imagen se observa un diseño mucho más complejo el menú se muestra activado con el contenido del menú o se activa el menú al hacer clic en el menú.

introducir la descripción de la imagen aquí

CSS

    /* Top menu */
    .top-menu-holder {
        background-color: #4C4C4C; background-color: rgba(76,76,76,.99);
        display: block; position: fixed; text-align: center;
        left: 0; top: 0; height: 60px; line-height: 60px; width: 100%;
        z-index: 1000;
    }

    /* Menu left */
    .icon-menu-holder {         
        display: block; position: fixed;
        left: 0; top: 60px; height: 100%; width: 150px;
        z-index: 1000;
    }

    .icon-menu-holder.bg-icon-menu {
        display: block; position: fixed;
        background-color: #EEEEEE; 
        height: 100%; width: 60px;
    }

    .icon-holder {
        background-color: #EEEEEE;  color: #2E2E2E; font-size: 25px;
        display: block;
        height: 60px; width: 60px; line-height: 60px; text-align: center;
        transition: width .3s ease;
    }

    .icon-holder > p {
        display: none;
    }

    .icon-holder:hover {
        width: 150px;
        transition: width .3s ease;
    }

    .icon-holder:hover > p {
        display: inline-block;
        padding-right: .3rem;
    }

    .icon-holder:hover > i {
        opacity: 0;
        animation: opa .8s .2s forwards ;
    }

    @keyframes opa {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

    @media screen and (max-height: 400px) {
        /* Menu left */
        .icon-menu-holder {         
            display: block; position: fixed;
            left: 0; top: 60px; height: 100%; width: 150px; 
        }

        .icon-menu-holder.bg-icon-menu {
            display: block; position: absolute;
            background-color: none; 
            height: 100%; width: 150px;
        }
    }

HTML

<div class="icon-menu-holder bg-icon-menu">
  <div class="icon-holder">
    <p>Menu</p>
    <i class="fa fa-users" aria-hidden="true"></i>
  </div>  

  <div class="icon-holder">
    <p>Menu</p>
    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
  </div>

  <div class="icon-holder">
    <p>Menu</p>
    <i class="fa fa-barcode" aria-hidden="true"></i>
  </div>

  <div class="icon-holder">
    <p>Menu</p>
    <i class="fa fa-code" aria-hidden="true"></i>
  </div>

  <div class="icon-holder">
    <p>Menu</p>
    <i class="fa fa-shopping-cart" aria-hidden="true"></i>
  </div>

    <div class="icon-holder">
    <p>Admin</p>
    <i class="fa fa-user-secret" aria-hidden="true"></i>
  </div>
</div>

1 respuesta 1

2

Primero, necesitas una clase, generalmente llamada active con los estilos que quieras. Por ejemplo,

/* Clase active de ejemplo */
.icon-holder.active {color: red;}

Luego, necesitas un poco de jQuery o JavaScript para asignar la clase... algo como esto, que no funciona, pero espero que sirva de inicio.

$('.icon-menu-holder .icon-holder').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

Este es el resultado...

Gracias a @ElChiniNet que me apuntó en la dirección correcta, ahora si, la solución funciona como se espera.

$('.icon-menu-holder .icon-holder').click(function(e) {
  var $this = $(this);
  $('.icon-menu-holder .icon-holder').removeClass("active");
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});
/* Top menu */
    .top-menu-holder {
        background-color: #4C4C4C; background-color: rgba(76,76,76,.99);
        display: block; position: fixed; text-align: center;
        left: 0; top: 0; height: 60px; line-height: 60px; width: 100%;
        z-index: 1000;
    }

    /* Menu left */
    .icon-menu-holder {         
        display: block; position: fixed;
        left: 0; top: 60px; height: 100%; width: 150px;
        z-index: 1000;
    }

    .icon-menu-holder.bg-icon-menu {
        display: block; position: fixed;
        background-color: #EEEEEE; 
        height: 100%; width: 60px;
    }

    .icon-holder {
        background-color: #EEEEEE;  color: #2E2E2E; font-size: 25px;
        display: block;
        height: 60px; width: 60px; line-height: 60px; text-align: center;
        transition: width .3s ease;
    }

    .icon-holder > p {
        display: none;
    }

    .icon-holder:hover {
        width: 150px;
        transition: width .3s ease;
    }

    .icon-holder:hover > p {
        display: inline-block;
        padding-right: .3rem;
    }

    .icon-holder:hover > i {
        opacity: 0;
        animation: opa .8s .2s forwards ;
    }
    
    /* Clase active de ejemplo */
    .icon-holder.active {color: red;}

    @keyframes opa {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

    @media screen and (max-height: 400px) {
        /* Menu left */
        .icon-menu-holder {         
            display: block; position: fixed;
            left: 0; top: 60px; height: 100%; width: 150px; 
        }

        .icon-menu-holder.bg-icon-menu {
            display: block; position: absolute;
            background-color: none; 
            height: 100%; width: 150px;
        }
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-4">
 <div class="icon-menu-holder bg-icon-menu">
  <div class="icon-holder">
    <p>Menu 1</p>
    <i class="fa fa-users" aria-hidden="true"></i>
  </div>  

  <div class="icon-holder">
    <p>Menu 2</p>
    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
  </div>

  <div class="icon-holder">
    <p>Menu 3</p>
    <i class="fa fa-barcode" aria-hidden="true"></i>
  </div>

  <div class="icon-holder">
    <p>Menu 4</p>
    <i class="fa fa-code" aria-hidden="true"></i>
  </div>

  <div class="icon-holder">
    <p>Menu5</p>
    <i class="fa fa-shopping-cart" aria-hidden="true"></i>
  </div>

    <div class="icon-holder">
    <p>Admin</p>
    <i class="fa fa-user-secret" aria-hidden="true"></i>
  </div>
</div>
    </div>
  </div>
</div>

4
  • 1
    Está perfecto, sólo elimina la clase active de todos los links antes de asignársela al link al que se le ha hecho click.
    – ElChiniNet
    Commented el 5 mar. 2017 a las 14:47
  • Gracias @ElChiniNet ¡Ya funciona!.
    – toledano
    Commented el 5 mar. 2017 a las 14:49
  • 1
    Algo así: jsfiddle.net/elchininet/bfohmtyj Es sólo añadir la línea de eliminar la clase.
    – ElChiniNet
    Commented el 5 mar. 2017 a las 14:55
  • ¡Perfecto! ¡eso mismo! ;)
    – ElChiniNet
    Commented el 5 mar. 2017 a las 14:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.