#menu ul still being displayed in smaller window.

@media (min-width: 320px) and (max-width: 568){
  #menu ul{
    display:none;
  }
}

@media (min-width: 568px){
  #menu select, #menu button{
    display:none;
  }
}

//create a select and append to menu
var $selectMenu = $( "<select></select>");
$("#menu").append($selectMenu);

//Cycle over menu links



$("#menu a").each(function(){

     //a.create an option
var $option = $("<option></option>"); 

    //b.option's value is the href
var $hrefValue = $(this).attr("href");
  //the code below not the best option to set the value of option in the select element.
//$option.attr("href",$hrefValue);  ************

  //better option below.
  $option.val($hrefValue);

    //c.option's text is the text of link
var $linkText = $(this).text();
$option.text($linkText);

    //d.append option to select
$selectMenu.append($option);

  var $parent = $(this).parent();
  if($parent.hasClass("selected")){

    $option.prop("selected",true);
  }



})


//create a button
var $button = $("<button>button</button>");
//append the button to the div with an id ="menu"
$("#menu").append($button);

//bind click to button
$button.click(function(){
    //Go to select's location

  window.location = $selectMenu.val();
    //Deal with select option depending on the current page

})