Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 
  
<div class="TopNav">
  <ul>
      <li><a href="#">one</a></li>
      <li><a href="#">two</a></li>
      <li><a href="#">three</a></li>
  </ul>
</div>
<div class="LowerNav">
   <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>  
      <li><a href="#">Item 3</a></li>
   </ul>
</div>
  
  
  
  
</body>
</html>
 
.BothNav{
  
  background:#eee;
  padding:10px;
  border-radius:10px;
  
}
 
var $LowerNavLI = $('.LowerNav li');
function navResize(){
  
  var winW = window.innerWidth;
  var appended = false;
  if(winW < 768 && !appended ){
    appended = true;
    $LowerNavLI.appendTo('.TopNav ul');
    $('.TopNav').addClass('BothNav');
  }else{
    appended = false;
    $LowerNavLI.appendTo('.LowerNav ul');
    $('.TopNav').removeClass('BothNav');
  }
  
}
navResize();
$(window).resize(function(){
  navResize();
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers