0

Tengo este menú sidebar

<div class="sidebar" data-color="purple" data-image="assets/img/sidebar-1.jpg">
    <div class="logo">
        <a href="#" class="simple-text">
		    Administración
		</a>
	</div>
   	<div class=" sidebar-wrapper">
       <ul class="nav">
            <li>
                <a href="dashboard.php">
	                <i class="material-icons">Estadisticas</i>
	                <p>Estadisticas</p>
	            </a>
	        </li>	    
			<li>
	            <a href="pedidos.php">
	                <i class="material-icons">Pedidos_pendientes</i>
	                <p>Pedidos Pendientes</p>
	            </a>
	        </li>          
			<li>
	            <a href="addcat.php">
	                <i class="material-icons">Agregar_Categoría</i>
	                <p>Agregar Categoría</p>
	            </a>
	        </li>
			<li>
	            <a href="addprod.php">
	                <i class="material-icons">Agregar_Producto</i>
	                <p>Agregar Producto</p>
	            </a>
	        </li>
	        <li>
	            <a href="infEmp.php">
	                <i class="material-icons text-gray">Inf_Empresa</i>
	                <p>Inf. Empresa</p>
	            </a>
	        </li>
		</ul>
    </div>
</div>

Tengo el css para la marca "active", quisiera saber si hay alguna forma mediante JQuery para marcarlos como activos al momento de pasar item por item. use el siguiente ejemplo, pero no resulto.

$(document).ready(function() {
    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
    $('.nav li a').each(function() {
        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $('.nav li').removeClass('active');
            $(this).parent('li').addClass('active');
        }
    });
});

Agradezco su ayuda.

1 respuesta 1

1

Estarias necesitando algo como esto... aunque te aconsejo que uses css...

        $(document).on("mouseenter","li", function(){
            //$("li").removeClass("active");
            $(this).addClass("active");
        }) 
        //$(document).on("mouseleave","li", function(){
        //  $("li").removeClass("active");
        //}) 
2
  • Añado el css, porque la verdad no he logrado el resultado esperado. gracias: .sidebar[data-color="purple"] .nav li.active a, .off-canvas-sidebar[data-color="purple"] .nav li.active a { background-color: #9c27b0; box-shadow: 0 12px 20px -10px rgba(156, 39, 176, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(156, 39, 176, 0.2); }
    – Jhon117
    Commented el 11 may. 2017 a las 7:51
  • No se si entiendo bien que es lo que deseas. Pasar por encima de cada <li> y asignarle la clase "active"? Si asi es adapte el codigo para que esto ocurra. Commented el 11 may. 2017 a las 23:31

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.