Resizing with Jquery

Asked

Viewed 30 times

0

I’m trying to put a responsive menu on my site, I need that 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 look like I want when I resize the browser to a size equal to or less than 740, but then when I increase again I can’t "undo" the process, would anyone know how to help me?

jquery mobile menu resizing

1 answer

0


EDIT 1

See if this plugin suits you: http://responsivemobilemenu.com/en/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="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 -->

<div class="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);
    });
});

  • Hello friend, thanks for the reply, but I already have a plugin that works, and I could for example create 2 menus to define which will appear via css. But in this case what I want is to know how I "disable" via jquery the responsive menu. Here is the problem: if (viewPortWidth <= 740) { $('Nav#menu-mobile'). mmenu(); } Else { //... how to disable??? //this is the problem }

  • What is the plugin?

  • the plugin is the mmenu

  • See the EDIT 2..

  • take a look here: http://mmenu.frebsite.nl/on-and-off-canvas.html

  • even tried EDIT 2?

Show 1 more comment

Browser other questions tagged jquery mobile menu resizing

You are not signed in. Login or sign up in order to post.