CODEWITHSUNDEEP
javascriptjquerycss
mark_newbie
mark_newbie

Reputation: 63

Selected menu is never active in jQuery plugin by mmenu

I am using a jQuery menu plugin from http://mmenu.frebsite.nl/

Everything is working fine, but when I select the sub menu, it never shows the active state. It keeps on sending to the main page after page loads. See the screenshot for more information.

sub-menu

keep on sending to the main menu

I am doing this:

<div id="menu">
    <ul class="listview-icons">
        <li>
            <a>
                <form method="post" action="{$site_url}/tracking.html" name="trak_now_homepage" id="trak_now_homepage">
                    <div class="form-group texttransform">
                        <input type="text" class="form-control" id="shipment_track_num" name="track_num" placeholder="Enter the booking ID">
                        <span id="shipment_alert" class="alert" style="color:#CF0"></span>
                        <BR />
                        <input name="news_go" type="submit" value="Track now" class="com_buton" id="send" onclick="return valid_shipment_tracking_form(document.trak_now_homepage);" />
                    </div>
                </form>
            </a>
        </li>
        <li><a href="{$site_url}"><i class="fa fa-home"></i> &nbsp; HOME</a></li>
        <li>
            <span><i class="fa fa-file-text-o"></i> &nbsp; SEND</span>
            <ul>
                <li><a href="{$site_url}/send_document.html"><i class="fa fa-file-text-o"></i> &nbsp;DOCUMENTS</a></li>
            </ul>
        </li>
        <li>
            <span><i class="fa fa-plane"></i> &nbsp; SERVICES</span>
            <ul>
                <li><a href="{$site_url}/sameday.html"><i class="fa fa-map-marker"></i> &nbsp;SAME DAY DELIVERY</a></li>
            </ul>
        </li>
        <li>
            <span><i class="fa fa-user"></i> &nbsp; ABOUT US</span>
            <ul>
                <li><a href="{$site_url}/about_us.html"><i class="fa fa-info-circle"></i> &nbsp; ABOUT US</a></li>
                <li><a href="{$site_url}/faq.html"><i class="fa fa-info-circle"></i> &nbsp;FAQ</a></li>
                <li><a href="{$site_url}/how.html"><i class="fa fa-info-circle"></i> &nbsp;HOW IT WORKS</a></li>
                <li><a href="{$site_url}/advice.html"><i class="fa fa-info-circle"></i> &nbsp;PACKAGING ADVICE</a></li>
                <li><a href="{$site_url}/reviews.html"><i class="fa fa-info-circle"></i> &nbsp;REVIEWS</a></li>
                <li><a href="{$site_url}/terms.html"><i class="fa fa-info-circle"></i> &nbsp; TERMS</a></li>
                <li><a href="{$site_url}/policy.html"><i class="fa fa-info-circle"></i> &nbsp; POLICIES</a></li>
                <li><a href="{$site_url}/volume_calculator.html"><i class="fa fa-info-circle"></i> &nbsp; VOLUME CALCULATOR</a></li>
            </ul>
        </li>
        <li><a href="{$site_url}/contact_us.html"><i class="fa fa-phone"></i> &nbsp;CONTACT US</a></li>
        <li><a href="{$site_url}/my_cart_details.html"><i class="fa fa-fw fa-shopping-cart"></i>ITEMS</font></a></li>
        <li><a href="{$site_url}/my_account.html"><i class="fa fa-fw fa-user"></i> my account</a></li>
    </ul>
</div>

How to fix this? The working demo is at www.matchcouriers.com

Upvotes: 1

Views: 496

Answers (2)

mark_newbie
mark_newbie

Reputation: 63

I have solved it, using smarty condition as i am using smarty as a template and the class that need to be used from mmenu is mm-seleced

<li class="mm-selected"><a href="http://match.local"><i class="fa fa-home"></i> &nbsp; HOME</a></li>

Upvotes: 1

alan0xd7
alan0xd7

Reputation: 1851

By default mmenu uses the css class Selected (note the capital S) on the current li for the current selected item.

selected menu have a dark background

You must define your own li.Selected style, I don't think you have done this.

sub-menu panel should stay as it is, but after selecting menu and page load, main-menu appear no the selected sub-menu panel

This is actually not automatic. You need to add Selected class to the relevant li on your pages. For example, in the About Us page, you would do this:

<li class="Selected"><a href="/about_us.html"><i class="fa fa-info-circle"></i> &nbsp; ABOUT US</a></li>

References:

Upvotes: 0

Related Questions