Make unordered list in dropdown menu

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

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

Is it possible to use jquery as shown in this thread: How to convert an unordered list to a nicely styled <select> drop-down list using jquery?

and if so, where would I put the code examples shown in the indicated message?

+6
source share
3 answers

Check this. Simplest

http://jsfiddle.net/Tpf7E/22/

HTML, CSS and jQuery

+8
source

There are about a hundred plugins for this purpose ... A simple search should bring a lot of results, such as "50 jQuery plugins for the drop-down menu."

Some results will show you how to create your own menu like this. Build a drop-down menu with CSS and jQuery. "

Other results will provide you with a plugin that you just need to call the jQuery function to convert this UL to a menu, such as a " jQuery plugin for dropdown menu "

In both cases, you do not need to use exactly what they show, just feel the idea and, if you need, change it according to your case ...

+7
source

how about some jQuery :)

For starters, if you are new to jQuery, you might notice that you can create embedded jQuery using script tags inside your html web page, or you can create a separate one. js file that is associated with your html file (preferred) using the CDN ( here) or manually providing the script doc files yourself. I prefer to use google CDN because they have many servers that are most likely closer to the client and the client only needs to download scripts through the CDN once.

In the html, specify script tags, and then get started with JS 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 want jQuery intellisense to work in the script file, all you have to do is add the link link in the script file that 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 jQuery example above is just one way out of the millions that you can implement to render your code. If you are interested in learning a fast and concise library, check out jQuery for 30 days.

Good luck Ben

+3
source

Source: https://habr.com/ru/post/908444/


All Articles