Menu
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?
750
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
Example Explained. HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
Check this one. Simplest one
http://jsfiddle.net/Tpf7E/22/
HTML, CSS & jQuery
139
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...
32
how about some jQuery :)
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 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 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.
Best of luck, Ben
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
