search

adgsm / multi-level-push-menu

MultiLevelPushMenu jQuery Plugin implementation
http://multi-level-push-menu.dzunic.net
804 stars 214 forks source link

Auto expand or open specific child menu when loading a section #181

Open funcion opened 7 years ago

funcion commented 7 years ago

As I can auto expand or open the menu item automatically when loading a specific section, example, if I am in the home and enter the menu category

Devices>Mobile phones

This would take me to the section Mobile phones, but when it opens it does not expand automatically , But it stays in the beginning.

Here example: https://jsfiddle.net/b464Lgt1/

Here HTML

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

Code JS:

$(function(){
    $('#menu').multilevelpushmenu({
      collapsed: false,
      menuWidth: '300px',
      mode: 'cover',
      fullCollapse: false,
      swipe: 'both'
    });
});
adgsm commented 7 years ago

I can not find in your example that you're using expand functions as declared below.

/**
 * Expand menu
 */
// Menu expand from fully collapsed mode to level 0
$('#menu').multilevelpushmenu('expand');

// Expand menu up to the $menuLevelObject
$('#menu').multilevelpushmenu('expand', $menuLevelObject);

// Expand menu up to the menu level object with title 'Devices' (not recommended since there could be many menu level objects with the same title; in such cases expanding will be unsuccessful)
$('#menu').multilevelpushmenu('expand', 'Devices');

I have updated your example to expand to 'Devices' menu. https://jsfiddle.net/b464Lgt1/1/