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
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>