1

Al seleccionar el menú 1, aparece subrayado marcando que está seleccionado, pero al seleccionar el menú 2, sigue subrayando al menú 1.

Intenté que quede seleccionado cuando hago click en el menú 2 con css(.selected:before) pero no entiendo qué pasa.

Este es el código donde se ve la diferencia si hacen click en un menú o en el otro.

$('ul.menu-lateral .sub-menu').hide(); //Ocultar hijos de forma predeterminada
	
	$('ul.menu-lateral li a').click(function(){
			
	$(this).siblings('.sub-menu').slideToggle('slow');
			
});


$('ul.menu-lateral > li').click(function(){
  $('ul.menu-lateral > li').removeClass('selected');
  $(this).addClass('selected');
});
ul {
  list-style: none;
}

ul > li {
  margin: 30px;
}

ul > li.selected:before {
  content: '';
  position: absolute;
  left: 55px;
  right: 0;
  top: 45px;
  margin: 3px;
  height: 2px;
  background: #F39323;
  width: 100px;
}

ul > li > a {
  text-decoration: none;
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-menu" role="navigation">
    <ul class="menu-lateral">
        <li><a href="#"> MENU 1 </a>
            <ul class="sub-menu">
                <li><a href="#"> SUB MENU 1</a></li>
            </ul>
        </li>

        <li><a href="#"> MENU 2 </a>
            <ul class="sub-menu">
                <li><a href="#">SUB MENU 2</a></li>
            </ul>
        </li>
    </ul>
</div>

5
  • Podrias elaborar un poco mas?
    – Hackerman
    Commented el 6 ene. 2017 a las 20:53
  • @hackeman cuando click menu 2 no puede active con css(.selected:before) y no se que paso. Commented el 6 ene. 2017 a las 20:55
  • pienso que el problema es el position: absolute
    – Rene Limon
    Commented el 6 ene. 2017 a las 21:50
  • @ReneLimon si en serio? Commented el 9 ene. 2017 a las 12:36
  • El valor absolute hace que la ubicación de un elemento sea relativo al elemento padre más cercano que tenga un position: relative. En tu caso no hay elementos con esa posición, por ende, el elemento :before será relativo al body. Lo que puedes hacer es adoptar la solución que te han dado o ponerle un position: relative al li y darle un top del alto del li + 10px para que quede la barra justo debajo de él. Mira éste ejemplo para que te veas el efecto.
    – gugadev
    Commented el 9 ene. 2017 a las 17:18

1 respuesta 1

1

Buenas!!

Tienes un error en tu CSS ya que estas posicionando en absolute lo cual se posiciona de acuerdo "a su ancestro mas cercano posicionado" eso quiere decir que tus valores left,top etc... comenzaran a moverse desde el valor del DOM ya que no tienes algún ancestro posicionado, de esta manera la linea de subrayado esta una sobre otra por eso no se ve, otra posible solución sería usar un margen bottom para subrayar el menú activo

Por otro lado puedes usar toggleClass en el mismo evento para desplegar los menús secundarios y al mismo tiempo colorear el subrayado el menú principal, te propongo la siguiente solución

$('ul.menu-lateral .sub-menu').hide(); //Ocultar hijos de forma predeterminada

$('ul.menu-lateral li').click(function(){
  $(this).children('.sub-menu').slideToggle('slow')
  $(this).children(':first').toggleClass('selected')
})
ul {
  list-style: none;
}

ul > li {
  margin: 30px;
}

.selected{
  border-bottom: 2px solid red;
}

ul > li > a {
  text-decoration: none;
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-menu" role="navigation">
    <ul class="menu-lateral">
        <li class=""><a href="#"> MENU 1 </a>
            <ul class="sub-menu">
                <li><a href="#"> SUB MENU 1</a></li>
            </ul>
        </li>

        <li class=""><a href="#"> MENU 2 </a>
            <ul class="sub-menu">
                <li><a href="#">SUB MENU 2</a></li>
            </ul>
        </li>
    </ul>
</div>

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.