将菜单转换为下拉菜单

Question

I'm trying to convert a menu to a dropdown for use in the mobile-version

I found a website where it explained how to convert a menu into drop down and I succeeded in having the drop down in the page, but the problem I have is that the JavaScript doesn't work. Clicking different options doesn't change the page.

HTML:

<nav>
    <nav id="menu">
        <ul>
            <li><a href="indexoriginal.html">Home</a></li>
            <li><a href="#">Bio</a>
                <ul>
                    <li><a href="aboutme.html">Biography</a></li>
                    <li><a href="repertoire_english.html">Repertoire</a></li>
                </ul>
            </li>   
            <li><a href="#">Gallery</a>
                <ul>
                    <li><a href="media.html">Media</a></li>
                    <li><a href="photosgeneral.html">Photos</a></li>
                </ul>
            </li>    
            <li><a href="agenda_english.html">Agenda</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

        <select>                    
            <option value="/" selected="selected">Home</option> 
            <option value="aboutme.html">Biografía</option> 
            <option value="repertoire_english.html">Repertorio</option> 
            <option value="media.html">Media</option> 
            <option value="photosgeneral.html">Fotos</option> 
            <option value="agenda_english.html">Agenda</option>
            <option value="contact.html">Contact</option>
        </select>* 

    </nav>

And here is the JavaScript I put in the of the html document:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

<script>

    //DOM ready
    $(function(){
        // Create the dropdown base
        $("<select />").appendTo("nav");

        // Create default option "Go to..."
        $("<option />", {
            "selected": "selected",
            "value"   : "",
            "text"    : "Go to..."
        }).appendTo("nav select");

        // Populate dropdown with menu items
        $("nav a").each(function() {
            var el = $(this);
            $("<option />", {
            "value"   : el.attr("href"),
            "text"    : el.text()
        }).appendTo("nav select");
    });

    $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
    });
</script>

And the webpage whose code I'm referencing: https://css-tricks.com/convert-menu-to-dropdown/

Answer 1

Elena, I just took the code from the site you mention and made this fiddle and it does works, it does changes to the links. You were missing an oppening nav tag on HTML side and just had to comment out the append(nav) on JS side since you already had it on the DOM. (in that case because you are only using one dropdown as different as the example from the webpage)

// Create the dropdown base
//$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});

nav select {
  display: none;
}

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav> 

 
  
  <select> 


            <option value="/" selected="selected">Home</option> 
            <option value="aboutme.html">Biografía</option> 
            <option value="repertoire_english.html">Repertorio</option> 
            <option value="media.html">Media</option> 
            <option value="photosgeneral.html">Fotos</option> 
            <option value="agenda_english.html">Agenda</option>
            <option value="contact.html">Contact</option>
        </select>

</nav>

</div>

Answer 2

$(function() {
       var $newDiv = $("<div/>").addClass("headmenu")
                 ;
      // Create the dropdown base
      $($newDiv).appendTo("nav");
      $("<select />").appendTo($newDiv);
      
      // Create default option "Go to..."
      $("<option />", {
         "selected": "selected",
         
         "value"   : "",
         "text"    : "&#9776;",
         "label" : "User Menu"
      }).appendTo("nav select");
      
      // Populate dropdown with menu items
      $("nav ul a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });
      
       // To make dropdown actually work
       // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
        $("nav option:selected").text('');
      });
     $("nav option:selected").attr('disabled',true);
    
         
     
     });

nav select {
  display: none; 
}
/*adjust css for your screen size eg for mobile 600 or 480*/

@media (max-width:980px) {
  nav ul     { display: none; }
  nav select { display: block;width:70% }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<nav>
    
        <ul>
            <li><a href="indexoriginal.html">Home</a></li>
            <li><a href="#">Bio</a>
                <ul>
                    <li><a href="aboutme.html">Biography</a></li>
                    <li><a href="repertoire_english.html">Repertoire</a></li>
                </ul>
            </li>   
            <li><a href="#">Gallery</a>
                <ul>
                    <li><a href="media.html">Media</a></li>
                    <li><a href="photosgeneral.html">Photos</a></li>
                </ul>
            </li>    
            <li><a href="agenda_english.html">Agenda</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

        

    </nav>

</div>