make an unordered list into a drop down menu

Question

If I have this code showing on Wordpress, what is the easiest way to turn this into a jump menu?

<ul class='toc-odd level-1'>
  <li><a href="1">It's finally here</a></li>
  <li><a href="2">Improvements</a></li>
  <li><a href="3">Handling</a></li>
</ul>

Can i use jquery like it showed in this thread: How to convert unordered list into nicely styled <select> dropdown using jquery?

and if so, where would i place the code examples shown in said post?

@ShankarSangoli I'm assuming that Jim means one of those old school selects that changed the window's url on change. — MetalFrog, Feb 14 '12 at 16:42

score 3 · Answer 1 · edited Jun 14 '22 at 21:55

For starters, if you're new to jQuery, you might have noticed that you can create inline jQuery using script tags inside of your HTML web page, or you can create a separate .js file that is linked to your HTML file (preferred) using either a CDN (check it out here) or manually providing the script doc files yourself. I prefer using Google's CDN because they have plenty of servers that are most likely closer to the client, and the client only has to load the scripts once through the CDN.

In your HTML, provide the script tags, and then start working with JavaScript and jQuery!

<head>
<title>your webpage</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
//BELOW IS YOUR OWN SCRIPT FILE REFERENCE!
<script src="Scripts/Jscript1.js" type="text/javascript" ></script>

Also, if you would like the jQuery IntelliSense to work in the script file, all you have to do is add a reference link in the script file you are using!

/// <reference path="jquery-1.7.1-vsdoc.js" />

$(document).ready(function () { 
     
    $('.toc-odd level-1').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(100);
 
        }, 
        function () {
            //hide its submenu
            $('ul', this).slideUp(100);         
        }
    );
     
});

The above jQuery example is just 1 way out of millions that you could implement to render your code. If you have interest in learning a fast and concise library, then check out the learn jQuery in 30 days.

make an unordered list into a drop down menu

1 Answers1

Linked