make an unordered list into a drop down menu

javascript jquery css wordpress

21,595

Solution 1

Check this one. Simplest one

HTML, CSS & jQuery

Solution 2

There's about hundreds of plugins with this purpose... A simple search should bring a lot of results like "50 jQuery plugins for dropdown menu"..

Some results will show you how to build your own menu like this one "Build a dropdown menu with CSS and jQuery"

Other results will give to you a plugin that you just need to call a jQuery function to transform this UL into a menu, like "jQuery plugin for dropdown menu"

In both cases you don't need to use exactly how they show, just feel the idea and, if you need, modify to fit your case...

Solution 3

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.

21,595

Author by

Jim

Updated on February 15, 2020

Comments

Jim over 4 years
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?