help me

each option in the select menu gets a unique value (which you will later on use to specify as the url you redirect the user to after selecting any option as it is obviously the path to your selected page to visit). Then, the text of the link (which is the text displayed for the user to click on in the normal menu) is set to the text of the option so that the user can see it in the menu and click on it to select it. Finally, the option tag is inserted to the select menu using the "append()" method in order for it to appear in the browser..

this part is hard to understand... plz.. give me an example...

So basically you have a link in the menu list which contains the the list items you have as buttons. Each link obviously has an "href" attribute because, what's the purpose of adding a link if you don't have an actual link you want to redirect the user to?

In your jQuery file, there is a function that applies whatever is inside it to each and every anchor element. So for each anchor element, an option element is created and has the properties given to it in the fuction.

In the first part of the function, we set "the link inside the anchor element" as the "value of the value attribute of the option element (which is inside the select menu)." Each option element in a select menu has a specific value attribute which differentiates it from the rest of the options. Usually, programmers use the value attribute to be able to specify specific styles and other properties to the chosen option... For example, this code:

<ul>
  <a href="contact.html">
    <li> CONTACT </li>
  </a>
</ul>
<select></select>

<script>
//cycle over menu links
$("menu a").each(function(){
var $anchor = $(this);
//create an option
var $option = $("<option></option>");

//option's value is the href
  $option.val($anchor.attr("href"));
</script>

returns this select menu:

<select>
  <option value="contact.html"></option>
</select>

The second part states that each option gets specific text based on the text of one of the links. For instance, this code:

<ul>
  <a>
    <li> CONTACT </li>
  </a>
</ul>
<select></select>

<script>
  $("menu a").each(function(){
    //option's text is the text of link
      $option.text($anchor.text()); 
     $select.append($option); 
  });
</script>

// I took the event that started the function and put it here so that you can see clearly that the code inside the function is being applied to all links and options.
// Keep in mind that the ***$option*** and ***$select*** variables have already been created and given values.

returns this code:

 <select>
  <option>CONTACT</option>
</select>

// This is because the text inside the link is also *CONTACT* as you can see.

The final part just puts everything together with the append() method used in:

  $select.append($option); 

as this part of code selects the "$select" variable, which is the select menu, and adds the option (with all of its new properties - the value attribute and the text) to the menu.