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'),
        $TopNav = $('.TopNav');    
    function navResize(){  
      var mob = window.innerWidth<768;
      $LowerNavLI.appendTo((mob?".TopNav":".LowerNav")+' ul');
      $TopNav[mob?"addClass":"removeClass"]('BothNav');
    }    
    navResize();
    $(window).resize(navResize); 
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers