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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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