Redemption with JQuery

Navigation
0

I'm trying to put a responsive menu on my site, I need it when the screen is resized to a certain size it becomes responsive and when it increases again it goes back to the "normal" div 

$(function () {
var detectViewPort = function(){
        var viewPortWidth = $(window).width();
        if (viewPortWidth <= 740) {
            $('nav#menu-mobile').mmenu();
        }
        else {
         //... como desabilitar???
        }
    };

    $(function(){
        detectViewPort();
    });

    $(window).resize(function () {
        detectViewPort();
    });

I can make it stay as I want it when I resize the browser to a size of 740 or less, but then when I increase again I can not undo the process, would anyone know how to help me?     

asked by anonymous 22.10.2015 / 17:56

1 answer

0

EDIT 1

See if this plugin meets: link 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="http://responsivemobilemenu.com/demo/rmm-css/responsivemobilemenu.css" rel="stylesheet"/>
<script src="http://responsivemobilemenu.com/demo/rmm-js/responsivemobilemenu.js"></script><body><br><br><br><!--DEFAULT(GRAPHITE)STYLE--><divclass="rmm graphite" style="max-width: 638.4px;"><div class="rmm-toggled rmm-closed" style=""><div class="rmm-toggled-controls"><div class="rmm-toggled-title">Menu</div><div class="rmm-button"><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div><ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about-me">About me</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#links">Links</a></li>
            <li><a href="#sitemap">Sitemap</a></li> 
       </ul></div>
        <ul class="rmm-main-list" style="">
            <li><a href="#home">Home</a></li>
            <li><a href="#about-me">About me</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#links">Links</a></li>
            <li><a href="#sitemap">Sitemap</a></li> 
       </ul>
</div>



<br>
<br>
<br>



<!-- SAPPHIRE STYLE -->

<div class="rmm sapphire" data-menu-style="sapphire" style="max-width: 638.4px;"><div class="rmm-toggled rmm-closed" style=""><div class="rmm-toggled-controls"><div class="rmm-toggled-title">Menu</div><div class="rmm-button"><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div><ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about-me">About me</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#links">Links</a></li>
            <li><a href="#sitemap">Sitemap</a></li> 
       </ul></div>
        <ul class="rmm-main-list" style="">
            <li><a href="#home">Home</a></li>
            <li><a href="#about-me">About me</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#links">Links</a></li>
            <li><a href="#sitemap">Sitemap</a></li> 
       </ul>
</div>


<br>
<br>
<br>


<!-- MINIMAL STYLE -->
<div class="rmm minimal" data-menu-style="minimal" style="max-width: 632.1px;"><div class="rmm-toggled rmm-closed" style=""><div class="rmm-toggled-controls"><div class="rmm-toggled-title">Menu</div><div class="rmm-button"><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div><ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about-me">About me</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#links">Links</a></li>
            <li><a href="#sitemap">Sitemap</a></li> 
       </ul></div>
        <ul class="rmm-main-list" style="">
            <li><a href="#home">Home</a></li>
            <li><a href="#about-me">About me</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#links">Links</a></li>
            <li><a href="#sitemap">Sitemap</a></li> 
       </ul>
</div>

EDIT 2

Try the following: 

$(function () {
    var detectViewPort = function(event){
        var viewPortWidth = $(window).width();
        if (viewPortWidth <= 740) {
            $('nav#menu-mobile').mmenu();
        }
        else {
            event.preventDefault();
            event.stopPropagation();
        }
    };

    $(function(){
        detectViewPort();
    });

    $(window).resize(function(event) {
        detectViewPort(event);
    });
});
    
22.10.2015 / 18:03
Generate image with text AJAX with synchronization error