1

Tengo este menú y necesito saber de https://github.com/adgsm/multi-level-push-menu, y necesito saber lo siguiente:

Como puedo auto expandir el menú automáticamente al cargar una sección especifica, ejemplo, si estoy en el home y entro en la categoría del menu, Devices->Mobile phones, esto me llevaría a la sección Mobile phones, pero al abrirse no se expande automáticamente, si no que se queda en el inicio.

$(function(){
    $('#menu').multilevelpushmenu({
      collapsed: false,
      menuWidth: '300px',
      mode: 'cover',
      fullCollapse: false,
      swipe: 'both'
    });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://rawgit.com/adgsm/multi-level-push-menu/master/jquery.multilevelpushmenu.css" rel="stylesheet"/>

<script src="https://rawgit.com/adgsm/multi-level-push-menu/master/jquery.multilevelpushmenu.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example</title>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				<div id="menu">
          <nav>
            <h2><i class="fa fa-reorder"></i>All Categories</h2>
            <ul>
                <li>
                    <a href="#"><i class="fa fa-laptop"></i>Devices</a>
                    <h2><i class="fa fa-laptop"></i>Devices</h2>
                    <ul>
                        <li>
                            <a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>
                            <h2><i class="fa fa-phone"></i>Mobile Phones</h2>
                            <ul>
                                <li>
                                    <a href="#">Super Smart Phone</a>
                                </li>
                                <li>
                                    <a href="#">Thin Magic Mobile</a>
                                </li>
                                <li>
                                    <a href="#">Performance Crusher</a>
                                </li>
                                <li>
                                    <a href="#">Futuristic Experience</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-desktop"></i>Televisions</a>
                            <h2><i class="fa fa-desktop"></i>Televisions</h2>
                            <ul>
                                <li>
                                    <a href="#">Flat Super Screen</a>
                                </li>
                                <li>
                                    <a href="#">Gigantic LED</a>
                                </li>
                                <li>
                                    <a href="#">Power Eater</a>
                                </li>
                                <li>
                                    <a href="#">3D Experience</a>
                                </li>
                                <li>
                                    <a href="#">Classic Comfort</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-camera-retro"></i>Cameras</a>
                            <h2><i class="fa fa-camera-retro"></i>Cameras</h2>
                            <ul>
                                <li>
                                    <a href="#">Smart Shot</a>
                                </li>
                                <li>
                                    <a href="#">Power Shooter</a>
                                </li>
                                <li>
                                    <a href="#">Easy Photo Maker</a>
                                </li>
                                <li>
                                    <a href="#">Super Pixel</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-book"></i>Magazines</a>
                    <h2><i class="fa fa-book"></i>Magazines</h2>
                    <ul>
                        <li>
                            <a href="#">National Geographics</a>
                        </li>
                        <li>
                            <a href="#">The Spectator</a>
                        </li>
                        <li>
                            <a href="#">Rambler</a>
                        </li>
                        <li>
                            <a href="#">Physics World</a>
                        </li>
                        <li>
                            <a href="#">The New Scientist</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-shopping-cart"></i>Store</a>
                    <h2><i class="fa fa-shopping-cart"></i>Store</h2>
                    <ul>
                        <li>
                            <a href="#"><i class="fa fa-tags"></i>Clothes</a>
                            <h2><i class="fa fa-tags"></i>Clothes</h2>
                            <ul>
                                <li>
                                    <a href="#"><i class="fa fa-female"></i>Women's Clothing</a>
                                    <h2><i class="fa fa-female"></i>Women's Clothing</h2>
                                    <ul>
                                        <li>
                                            <a href="#">Tops</a>
                                        </li>
                                        <li>
                                            <a href="#">Dresses</a>
                                        </li>
                                        <li>
                                            <a href="#">Trousers</a>
                                        </li>
                                        <li>
                                            <a href="#">Shoes</a>
                                        </li>
                                        <li>
                                            <a href="#">Sale</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
                                    <h2><i class="fa fa-male"></i>Men's Clothing</h2>
                                    <ul>
                                        <li>
                                            <a href="#">Shirts</a>
                                        </li>
                                        <li>
                                            <a href="#">Trousers</a>
                                        </li>
                                        <li>
                                            <a href="#">Shoes</a>
                                        </li>
                                        <li>
                                            <a href="#">Sale</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Jewelry</a>
                        </li>
                        <li>
                            <a href="#">Music</a>
                        </li>
                        <li>
                            <a href="#">Grocery</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Collections</a>
                </li>
                <li>
                    <a href="#">Credits</a>
                </li>
            </ul>
          </nav>
        </div>
			</div>
		</div>
	</div>
</body>
</html>

1
  • Hermano no vengo a responder a tu pregunta pero si a contribuir en algo, probé tu código y lo que dices en tu pregunta que no funciona, pues en el código mostrado funciona correctamente. Imagen de Demostración
    – bypabloc_
    Commented el 28 jun. 2017 a las 6:32

1 respuesta 1

1

Si quieres poner a la derecha el menú que por defecto te lo pone Boostrap es lo más sencillo. Por defecto viene así:

<ul class="navbar-nav mr-auto">

Lo que aquí está ordenando con el mr-auto es que el margen derecho sea automático, es decir que todo se vaya a la izquierda. "mr"= Margin Right (margen derecho).

Entonces si tu escribes:

<ul class="navbar-nav ml-auto"> 

Le estás ordenando que el menú se vaya a la derecha porque ml-auto = margen izquierdo sea automático. "ml" = Margin Left.

En conclusión, todo es a la inversa: "mr" si deseas el menú a la izquierda y "ml" si deseas el menú a la derecha.

1

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.