arifwidip / mobilemenu

Turn unorderer list menu into dropdown select menu

jQuery Mobilemenu

jQuery mobile menu is a jquery plugin for turn an unordered list menu into dropdown select menu

Instalation

Just include the script on your html files

<script type="text/javascript" src="jquery.mobilemenu.js"></script>

Usage

After including the script on your html, just write this code somewhere on your javascript file.

$('.menu').mobileMenu();

Options

jQuery mobilemenu have some options:

• defaultText: default text for option element

• className: Class name for dropdown select menu

• subMenuClass: Class name for submenu /* Updated you don't need to add class to sub menu */

• subMenuDash: Separator for submenu

$('.menu').mobileMenu({
	defaultText: 'Navigate to...',
	className: 'select-menu',
	subMenuDash: '–'
});

mobilemenu's Issues

Apply the script two times on one page

I'd like to use the script for 2 navigations on one page:

$("#menu-main").mobileMenu({
  prependTo: '#header nav .container',
  switchWidth: 600
});
$("#menu-footer").mobileMenu({
  prependTo: '#footer .footer-menu',
  switchWidth: 600
});

But only the first one works. Footer navigation disappears.

Third Level Menu

This keeps out anything in the third level of the menu. How can I add those items? I love this! Thank you so much for the code!

Title not centering on Mobile

I have managed to "text-align: center" for the title when looking at responsive view in chrome and firefox etc.

But when I pull up the page on my iphone on either chrome or safari it is still left justified.

the popup selector is all centered but I believe this is default on iphones

thanks

Bug with multiple menus

There is a bug if you use multiple menus!

If I set up for example to menus

$('ul.sf-menu').mobileMenu();
$('ul.top-menu-nav').mobileMenu();


Then the .sf-menu menus select contains also .top-menu-nav content

.sf-menu menu

.top-menu-nav menu

Is there a fix for this?

Hide when not mobile

I would like to use this plugin when the client is using my site through a device, and therefore hide the dropdown when they aren't.

I've tried to use CSS to hide it with media queries but have found anything that works yet.
Is this something you will be addressing?

Thank you

Can't fire a click event

I am using a gallery library called light gallery and I need to fire a click event on the mobilemenu item:
here is the html:

   <div class="wrapper hidden row2">
        <nav id="mainav" class="clear">
            <!-- ################################################################################################ -->
            <ul class="clear">
                <div itemscope itemprop="breadcrumb" itemtype="http://schema.org/BreadcrumbList">
                    <li class="active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="https://www.aljazeerabros.com" hreflang="ar"><span itemprop="name">الرئيسية</span></a>
                        <meta itemprop="position" content="1" />
                    </li>
                    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="services.html" hreflang="ar"><span itemprop="name">خدمات</span></a>
                        <meta itemprop="position" content="2" />
                    </li>
                    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="branch.html" hreflang="ar"><span itemprop="name">مراكز الخدمة</span></a>
                        <meta itemprop="position" content="3" />
                    </li>
                    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="market.html" hreflang="ar"><span itemprop="name">سوق العملة</span></a>
                        <meta itemprop="position" content="4" />
                    </li>
                    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="#" class="gallery" hreflang="ar"><span itemprop="name">الاستديو</span></a>
                        <meta itemprop="position" content="5" />
                    </li>
                    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="beagent/index.html" target="_blank" hreflang="ar"><span itemprop="name">كن وكيلا</span></a>
                        <meta itemprop="position" content="6" />
                    </li>
                </div>
            </ul>
            <!-- ################################################################################################ -->
        </nav>
    </div>

the JavaScript:

$('.gallery').on('click', function(e) {
    e.preventDefault();
    $(this).lightGallery({
        dynamic: true,
        mode: 'lg-zoom-out-in',
        hideBarsDelay: 3000,
        fourceAutoplay: true,
        pause: 6000,
        facebookDropdownText: 'فيس بوك',
        twitterDropdownText: 'تويتر',
        googlePlusDropdownText: 'جوجل بلس',
        pinterestDropdownText: 'بين ترست',
        fullScreen: true,
        autoplay: true,
        pager: true,
        zoom: true,
        dynamicEl: [{
            "src": 'layout/scripts/gallery/images/1.jpg',
            'thumb': 'layout/scripts/gallery/images/thumbs/1.jpg',
            'subHtml': '<h3>شركة الجزيرة إخوان للصرافة</h3><p>شركة الجزيرة إخوان للصرافة شركة الجزيرة إخوان للصرافة شركة الجزيرة إخوان للصرافة</p>'
        }, {
            'src': 'layout/scripts/gallery/images/2.jpg',
            'thumb': 'layout/scripts/gallery/images/thumbs/2.jpg',
            'subHtml': '<h3>شركة الجزيرة إخوان للصرافة</h3><p>شركة الجزيرة إخوان للصرافة شركة الجزيرة إخوان للصرافة شركة الجزيرة إخوان للصرافة</p>'
        }, {
            'src': 'layout/scripts/gallery/images/3.jpg',
            'thumb': 'layout/scripts/gallery/images/thumbs/3.jpg',
            'subHtml': '<h3>شركة الجزيرة إخوان للصرافة</h3><p>شركة الجزيرة إخوان للصرافة شركة الجزيرة إخوان للصرافة شركة الجزيرة إخوان للصرافة</p>'
        }]
    })

});

Please show example page

Please show example page on jsfiddle or codepen

Keeping class

How do you change the script so that it keeps the class for the option that was set in the Wordpress menu navigation for the link?

Default Text not Showing

I am using this plugin within the purchased wordpress theme SimpleKey.

It is a one page design and as you scroll down the page when viewing on a desktop it highlights the current section in the navbar.

unfortunately when viewing in mobile the title displays whatever section the page is loaded on (for example if you scroll down to "about" and press refresh the navbar will say "about" instead of "navigation"

I assume this has something to do with the above feature of highlighting the current section but I am not sure.

I would like it to at all times display the default text of "Navigation" since this is much more user friendly

thanks so much

How to build the navigation?

Thanks a lot for this mobile menu. But it is not clear how the menu has to be build. Is it a normal UL with class attached or is it wrapped with a DIV?

A working example is much appreciated.

Cheers,
Ralph

Collapsed menus drop the twitter bootstrap glyphicons.

This is what the normal menu looks like:

And this is what it looks like in the select:

<ul>
    <li><a href="#"><i class="icon-user" title="User"></i>: 
        <asp:Label ForeColor="#FF6801" ID="labelUser" runat="server"></asp:Label></a>
        <ul>
            <li><a href="ChangeVendorPassword.aspx">Change Password</a></li>
            <li><a href="Logout.aspx">Log Out</a></li>
        </ul>
    </li>
<li><a href="RedirectUser.aspx"><i class="icon-home" title="Home"></i></a></li>
<li><a href="FAQ.aspx"><i class="icon-question-sign" title="FAQ"></i></a></li>
<li><a href="#"><i class="icon-cog" title="Maintenance"></i></a>
     <ul>
          <li><a href="VendorContactPersonalInfo.aspx">Contact</a></li>
     </ul>
</li>
</ul>```

warning: redeclaration of var $select_menu

http://www.javascriptlint.com/online_lint.php

Provide an example page

It would be great to be able to easily see an example on the menu in action. This could be easily achieved using gh-pages.

How can I hide a sepecific menu item?

Hi, is there any way to hide a certain menu item which I don't want it to display on the mobile, but I still want it to display on the desktop version. Thanks!

"Navigate to..." is a link itself

Thank you for this script, very useful. I'm wondering how I can stop the "Navigate to..." from actually being a link. If I select it, it takes me to a url of /Navigate to...