Menu to Drop down menu while Resize the browser

Menu to Dropdown menu <select> type while we resize the browser, this one of the features of responsive design. now a days we are viewing the web page in PC, mobile, tap and etc, that's why it will be very flexible to user. here we are going to do that with Jquery. let see the coding.

DOWNLOAD LIVE DEMO

HTML

<nav>
<ul>
  <li><a href="./#home">Home</a></li>
  <li><a href="./#tutorials">Tutorials</a></li>
  <li><a href="./#demos">Demos</a></li>
  <li><a href="./#popular">Popular</a></li>
  <li><a href="./#work">work</a></li>
</ul>
</nav>

CSS

<style>
* {
    margin: 0;
    padding: 0;
    font-family:Tahoma, Geneva, sans-serif;
}
h1 {
    font-size:18px;
    font-weight:bold;
    min-width: 50px;
    padding:10px;
}
nav {
    max-width: 960px;
    padding:10px;
    overflow:auto;
    margin: 0 auto;
    text-align: center;
    margin-top:50px;
}
nav ul {
    list-style: none;
}
nav li {
    display: inline-block;
}
nav a {
    display: inline-block;
    background-color:#004040;
    color:#FFF;
    padding: 5px 15px;
    text-decoration: none;
}
nav a:hover {
    background-color:#CCC;
    color:#000;
    text-decoration:underline;
}
nav select {
    display: none;
}
 @media (max-width: 960px) {
 nav ul {
display: none;
}
 nav select {
display: inline-block;
}
}
</style>

here we are using media query for the width of 960px. if the browser with is lower or less than 960px the <select> dropdown menu will come. if more than 960px the page will be with normal menu. and here
nav select
{ display : none };
to hide the <select> until the expected size will come.

JQUERY

<script src="jquery.min.js"></script>
<script>
  // DOM ready
 $(function() {
  // Create the dropdown base
  $("<select />").appendTo("nav");
  // Create default option "select menu"
  $("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Select menu"
  }).appendTo("nav select");
  // dropdown with menu items
  $("nav a").each(function() {
  var el = $(this);
  $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
  }).appendTo("nav select");
  });
  // To make dropdown work
  $("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
  });
 });
</script>