3

La idea es tener el primer enlace del menú siempre activo en este caso sería la estadísticas del sitio.

Adicional de ello el apartado del resto del menú activo (Live stream, List growth, Web, Mobile etc.) cómo se puede observar en la imagen.

El planteamiento similar a la imagen se me ha complicado imitarlo básicamente se ve sencillo pero no lo ha sido para mí :(.

Me podrian ayudar o explicar cómo imitar correctamente el diseño de la imagen en mi código.

Nota La imagen la diseñe desde Macromedia Fireworks 8

introducir la descripción de la imagen aquí

Lo logrado hasta el momento.

$('.nav-menu-side ul li').click(function(e) {
  var $this = $(this);
  $('.nav-menu-side ul li').removeClass("active");
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #222222;
  font-size: 13px;
  font-family: 'OpenSans', 'cursive', 'Raleway', Roboto, Lato, Utsaah;
  background-color: #FBFBFB;
}

.menu-top {
  position: fixed;
  z-index: 50;
  background-color: #2196F3;
  height: 53px;
  width: 100%;

}
.notification{
  float: left;
  margin: .3em 0 0 1em;
}
.profile_details {
  float: right;
  margin: 0 4.8em 0 1em;
}
.sticky {
  overflow: hidden;
  outline: none;
}
.menu-side {
  position: fixed;
  height: 100%;
  z-index: 100;
  background-color: #0F6188;
  width: 60px;
  top: 53px;
  left: 0;
}
#page-wrapper {
  padding: 6em 2em;
  margin-left: 200px;
  min-height: 2580px !important;
}
.nav-menu-side {
  padding: 0;
  margin-bottom: 50px;
}
.nav-menu-side ul {
  margin: 2px 0 20px 0;
  padding-left: 0;
  list-style: none;
}
.nav-menu-side ul:before {
  display: table;
  content: " ";
}
.nav-menu-side ul li {
  position: relative;
  display: block;
  float: none;
}
.nav-menu-side ul li a {
  text-align: center;
  padding: 10px;
  position: relative;
  color: #C8C8C8;
  display: block;
}
.nav-menu-side ul li a:hover {
  background-color: #000;
}
.nav-menu-side ul li a i {
  margin-right: 0;
}
.nav-menu-side ul li a span {
  position: absolute;
  background: #8BC34A;
  padding: 11.7px;
  left: 52px;
  top: 1px;
  min-width: 160px;
  text-align: left;
  z-index: 100;
  display: none;
  font-size: 14px;
}
.nav-menu-side>ul li+li {
  margin-top: 1px;
  margin-left: 0;
}
.nav-menu-side .active {
  background-color: red;
}
.icon-insight {
  content: "";
  display: inline-block;
  background-size: cover;
  position: relative;
  top: 8px;
  width: 40px;
  height: 29px;
  background-image: url(insight.svg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="menu" class="menu-top">
  <div class="user-panel">
<div class="notification"></div>
<div class="profile"></div>
  </div>
</div>

<div id="menu-left" class="sticky menu-side">
  <!-- Contenido del menú admin-->
  <div class="nav-menu-side">
<ul>
  <li>
    <a href="#">
      <i class="icon-insight"></i>
      <span>Home</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="icon-insight"></i>
      <span>Home</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="icon-insight"></i>
      <span>Home</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="icon-insight"></i>
      <span>Home</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="icon-insight"></i>
      <span>Home</span>
    </a>
  </li>
</ul>
  </div>
</div>

<div id="page-wrapper">
  <h1>Basic Forms Basic Forms Basic Forms Basic Forms Basic Forms Basic Forms Basic Forms Basic Forms Basic Forms</h1>
</div>

1
  • quieres que los contenidos del contenedor principal cambien de acuerdo a qué item del menú esté activo?
    – ffflabs
    Commented el 8 mar. 2017 a las 22:30

1 respuesta 1

1

El efecto de que sólo el item activo muestre su contenido lo consigues dándole a los span el atributo display:none de base, y sobreescribiéndolo a display:block cuando sean hijos de un li activo.

El efecto de que al cargar la página se active el primer item del menú lo conseguirías simplemente dándole la clase active en duro:

$('.nav-menu-side ul li').click(function(e) {
  var $this = $(this);
  $('.nav-menu-side ul li').removeClass("active");
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #222222;
  font-size: 13px;
  font-family: 'OpenSans', 'cursive', 'Raleway', Roboto, Lato, Utsaah;
  background-color: #FBFBFB;
}

.menu-top {
  position: fixed;
  z-index: 50;
  background-color: #2196F3;
  height: 53px;
  width: 100%;

}
.notification{
  float: left;
  margin: .3em 0 0 1em;
}
.profile_details {
  float: right;
  margin: 0 4.8em 0 1em;
}
.sticky {
  overflow: hidden;
  outline: none;
}
.menu-side {
  position: fixed;
  height: 100%;
  z-index: 100;
  background-color: #0F6188;
  width: 60px;
  top: 53px;
  left: 0;
}
#page-wrapper {
  padding: 6em 2em;
  margin-left: 200px;
  min-height: 2580px !important;
}
.nav-menu-side {
  padding: 0;
  margin-bottom: 50px;
}
.nav-menu-side ul {
  margin: 2px 0 20px 0;
  padding-left: 0;
  list-style: none;
}
.nav-menu-side ul:before {
  display: table;
  content: " ";
}
.nav-menu-side ul li {
  position: relative;
  display: block;
  float: none;
}
.nav-menu-side ul li a {
  text-align: center;
  padding: 10px;
  position: relative;
  color: #C8C8C8;
  display: block;
}
.nav-menu-side ul li a:hover {
  background-color: #000;
}
.nav-menu-side ul li a i {
  margin-right: 0;
}
.nav-menu-side ul li a span {
  position: fixed;
  background: #8BC34A;
  padding: 11.7px;
  left: 63px;
  top: 53px;
  min-width: 160px;
  text-align: left;
  z-index: 100;
  display: none;
  font-size: 14px;
  color:black;
}
.nav-menu-side>ul li+li {
  margin-top: 1px;
  margin-left: 0;
}
.nav-menu-side .active {
  background-color: red;
}
.nav-menu-side  ul li.active a span {
  display:block;
}
.icon-insight {
  content: "";
  display: inline-block;
  background-size: cover;
  position: relative;
  top: 8px;
  width: 40px;
  height: 29px;
  background-image: url(insight.svg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="menu" class="menu-top">
  <div class="user-panel">
<div class="notification"></div>
<div class="profile"></div>
  </div>
</div>

<div id="menu-left" class="sticky menu-side">
  <!-- Contenido del menú admin-->
  <div class="nav-menu-side">
<ul>
  <li class="active">
    <a href="#">
      <i class="icon-insight"></i> <span>Home</span>
     
    </a>
  </li>
  <li>
    <a href="#">
      <i class="icon-insight"></i><span>item 2</span>
      
    </a>
  </li>
  <li>
    <a href="#">
      <i class="icon-insight"></i><span>item 3</span>
      
    </a>
  </li>
  <li>
    <a href="#">
      <i class="icon-insight"></i> <span>item 4</span>
     
    </a>
  </li>
  <li>
    <a href="#">
      <i class="icon-insight"></i> <span>item 5</span>
     
    </a>
  </li>
</ul>
  </div>
</div>

<div id="page-wrapper">
  <h1>Basic Forms Basic Forms Basic Forms Basic Forms Basic Forms Basic Forms Basic Forms Basic Forms Basic Forms</h1>
</div>

3
  • Está perfecto... Sólo dos detalles en la imagen se observa que el resto del menú se encuentra en cuerpo algo similar a un menú slide responsive... Otro detalle es la flecha blanca que se encuentra hacia la izquierda.
    – J. Mick
    Commented el 9 mar. 2017 a las 1:32
  • El ejemplo es perfecto +1 :)
    – J. Mick
    Commented el 9 mar. 2017 a las 1:33
  • @amenadiel es exactamente lo que tenía en mente pero con los pequeños detalles que J. Mick mencionó. El hover color negro no debería funcionar en los menú activado y un último detalle como se añade aquella flecha hacia la izquierda será posible ayudarme en esos dos últimos detalles gracias :)
    – Alex
    Commented el 9 mar. 2017 a las 20:57

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