On resize, moving li from nested ul into top level ul is creating lots of lis

Question

I am trying to create a responsive menu. On the mobile version, I want a ul to display 4 list items. On resize to desktop, 2 list items get appended to a previously unused nested ul. This works fine. However, if I resize back to mobile size, instead of appending the 2 list items back to the top level ul, it seems to create a bunch of lis.

$(document).ready(function() {
  $('.has-child').click(function() {
    $(this).toggleClass('clicked');
    $('.has-child ul').toggleClass('clicked');
  });
});

$(window).on('resize', function() {
  if ($(window).width() >= 800) {
    $('.nav-container').detach().appendTo('.header-content');
    $('.has-parent').appendTo('.has-child ul');
  } else {
    $('.nav-container').detach().appendTo('.site');
    $('.has-parent').appendTo('.site-navigation ul');
  }
}).trigger('resize');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-container">
  <nav class="site-navigation">
    <ul>
      <li><a href="pageone.php">Home</a>
      </li>
      <li id="has-child" class="has-child"><a href="#"><i class="ion-person"></i></a>
        <ul>
        </ul>
      </li>
      <li class="has-parent"><a href="account.php">Account</a>
      </li>
      <li class="has-parent"><a href="logout.php">Logout</a>
      </li>

      <li><a href="logout.php">Login</a>
      </li>
      <li><a href="register.php">Register</a>
      </li>
    </ul>
  </nav>
</div>

Thanks in advance!

Converted to snippet. Your resize function is currently deleting everything from the page. — Serg Chernata, Jan 25 '17 at 19:40
To add on to what roger just said, see this: [http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing](http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing) — n_plum, Jan 25 '17 at 19:45
@db1500 then you should take a look at css media queries. as i can see your task can be done with css without js at all. — taburetkin, Jan 25 '17 at 20:26

score 1 · Accepted Answer · answered Jan 25 '17 at 20:14

I think I got it working how you wanted.

However, I must say this is a somewhat strange way of doing things. Modern frameworks like Bootstrap and Foundation provide css utility classes for showing and hiding menus depending on media queries at play.

In simpler terms, you can have 2 menus and then show or hide either one depending on screen size with css only.

$(document).ready(function() {
  $('.has-child').click(function() {
    $(this).toggleClass('clicked');
    $('.has-child ul').toggleClass('clicked');
  });
});

$(window).on('resize', function() {
  if ($(window).width() >= 800) {
    $('.nav-container').detach().appendTo('.header-content');
    
    if($('.has-child ul li').length  == 0){
      $('.header-content .has-parent').detach().appendTo('.has-child ul');
    }
  } else {
    $('.nav-container').detach().appendTo('.site');
    
    if($('.site-navigation > ul > .has-parent').length  == 0){
      $('.site .has-parent').detach().appendTo('.site-navigation > ul');
    }
  }
});

*{box-sizing: border-box;}

.header-content, .site{
  float: left;
  width:50%;
  background: gray;
  height: 300px;
  padding: 30px;
}

.site{border-left: 2px solid white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="header-content">
  <h4>Header Content</h4>

</div>

<div class="site">
 <h4>Site</h4>
  
</div>

<div class="nav-container">
  <nav class="site-navigation">
    <ul>
      <li><a href="pageone.php">Home</a>
      </li>
      <li id="has-child" class="has-child"><a href="#"><i class="ion-person"></i></a>
        <ul>
        </ul>
      </li>
      <li class="has-parent"><a href="account.php">Account</a>
      </li>
      <li class="has-parent"><a href="logout.php">Logout</a>
      </li>

      <li><a href="logout.php">Login</a>
      </li>
      <li><a href="register.php">Register</a>
      </li>
    </ul>
  </nav>
</div>

Thanks! I had previously done it two separate menus, but decided to experiment. — DB1500, Jan 25 '17 at 20:31

score -1 · Answer 2 · answered Jan 25 '17 at 19:40

-1

On resize event fires repeatedly as you change the browser width. Essentially to fix this problem you would need to have some indicator that the function to append has already fired and to stop firing after completion.

answered Jan 25 '17 at 19:40

rogercady

1

On resize, moving li from nested ul into top level ul is creating lots of lis

2 Answers2