drop down menu

**lkgoldie** · 02-05-2015, 03:23 AM

hello,
I am looking for a drop down menu which would allow the user to select options that would then load specific videos. Here is an example http://www.ekhartyoga.com/videos.
I was looking at the Isotope plugin in for wordpress but it doesn't have the drop down feature.

Is there a script or plugin for this kind of menu? Appreciate any direction.

**molendijk** · 02-05-2015, 07:52 PM

It all depends on what kind of menu you want and what type of videos you want to play.
Here's some code for a basic menu playing YouTube videos.

Code:

<!doctype html>
<html>
<head>

<title>Dropdown for videos</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<style>
body {margin: 0; padding: 0}
</style>

<script>
//This script enables execution of javascript in the options of a selectboxe
function load_script_container()
{
var div_node=document.createElement('div');
div_node.setAttribute("id", "script_container");
document.body.appendChild(div_node);
}

function javascript_in_selectbox(which_box) {
var optionValue=document.getElementById(which_box).options[document.getElementById(which_box).selectedIndex].value;
if (optionValue=="none") {}
else {
var script_inside_selectbox_option = document.createElement('script');
script_inside_selectbox_option.type = 'text/javascript';
script_inside_selectbox_option.text = optionValue;
while(document.getElementById("script_container").firstChild)
{document.getElementById("script_container").removeChild(document.getElementById("script_container").firstChild);}
document.getElementById("script_container").appendChild(script_inside_selectbox_option);
}
}
</script>

<body>

<div id="the_videos" style="position: absolute; top: 15%; left: 15%; right:15%; bottom:15%; background: black">
<iframe name="the_videos" style="position: absolute; width: 100%; height: 100%" scrolling="no" frameborder="0"></iframe>
</div>

<div style="position: absolute; top: 20px; width: 100%; text-align: center">

<select name="chopin" id="chopin" onchange="javascript_in_selectbox('chopin'); selectedIndex=0" onfocus="selectedIndex=0"   style="width: 70px; font-family: arial; font-size: 12px; " >
<option value="none" selected >Chopin</option>
<option value="frames.the_videos.location='http://www.youtube-nocookie.com/embed/ROVy9PC8_8A?autoplay=1&vq=large'" >--- Etude op. 10/1</option>
<option value="frames.the_videos.location='http://www.youtube-nocookie.com/embed/q2a6VQYSU20?autoplay=1&vq=large&playlist=rjyaBgB39j4'" >--- Fantasy on Polish Airs</option>
<option value="frames.the_videos.location='http://www.youtube-nocookie.com/embed/h2S5Kcb7bzk?autoplay=1&vq=large'" >--- Rondo à la Krakowiak</option>
</select>

<select name="dvorak" id="dvorak" onchange="javascript_in_selectbox('dvorak'); selectedIndex=0" onfocus="selectedIndex=0"   style="width: 70px; font-family: arial; font-size: 12px; " >
<option value="none" selected >Dvorak</option>
<option value="frames.the_videos.location='http://www.youtube-nocookie.com/embed/smIB0aC7XCY?autoplay=1&vq=large'" >--- Polak from Czech Suite</option>
<option value="frames.the_videos.location='http://www.youtube-nocookie.com/embed/mDtWw0nbMbM?autoplay=1&vq=large'" >--- Serenade for strings</option>
<option value="frames.the_videos.location='http://www.youtube-nocookie.com/embed/_9RT2nHD6CQ?autoplay=1&start=60&vq=large'" >--- Symphony No. 9</option>
</select>

</div>

<!-- Put this at the end of the body section -->
<script>load_script_container()</script>

</body>

</html>

**lkgoldie** · 02-06-2015, 03:11 PM

Thanks Molendijk!
The videos would be in a photo galley on the website.

In your code I see one large box?
Like the example http://www.ekhartyoga.com/videos
The menu I am looking for is like the example ...5 drop down taps that load specific videos when user selects an option selected from the drop down menu

**molendijk** · 02-06-2015, 03:31 PM

Like I said, it all depends on the kind of menu you want. I just gave you an example. Try to find a menu that fits your needs, on DD, for instance. I'll be glad to help you after that.

**lkgoldie** · 02-07-2015, 02:55 PM

Thanks again Molendijk. I appreciate the patience...
I think a split menu button would work best ..found this one which would work....I would need five of these buttons.
http://www.dynamicdrive.com/dynamici...enubuttons.htm

**molendijk** · 02-07-2015, 08:09 PM

If you don't know javascript well, this may be hard to do.
Anyway, you could start with the following:

Code:

<!doctype html>
<html>

<head>

<title>Your title</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/dynamicindex1/splitmenubuttons.css" />

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<script src="http://www.dynamicdrive.com/dynamicindex1/splitmenubuttons.js"></script>

<script>
jQuery(function(){ // on document load
$('a[data-showmenu]').splitmenubuttonMenu() // Add split button menu to links with "data-showmenu" attr
})
</script>

<style>
body {margin: 0; padding: 0}
</style>

</head>

<body onload="frames.the_videos.location='http://www.youtube-nocookie.com/embed/XPN8wRkk94I?autoplay=0&amp;rel=0&amp;vq=large'">

<div id="the_videos" style="position: absolute; top: 100px; left: 15%; right:15%; bottom:15%; border: 1px solid black">
<iframe name="the_videos" style="position: absolute; width: 100%; height: 100%" scrolling="auto" frameborder="0"></iframe>
</div>

<div style="position: absolute; width: 100%; text-align: center">
<a href="#" class="splitmenubutton" data-showmenu="dropmenu1" data-splitmenu="false" >First button</a>
<ul id="dropmenu1" class="splitdropdown">
<li><a href="http://mesdomaines.nu/music" target="the_videos">Music videos</a></li>
<li><a href="http://www.youtube-nocookie.com/embed/XPN8wRkk94I?autoplay=1&amp;rel=0&amp;vq=large" target="the_videos">David Fray plays Bach</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" target="the_videos">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm" target="the_videos">Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" target="the_videos">DD Forums</a></li>
<li><a href="http://www.dynamicdrive.com/style/" target="the_videos">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/" target="the_videos">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/gradient/" target="the_videos">Gradient Image Maker</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/" target="the_videos">FavIcon Generator</a></li>
</ul>

<a href="#" class="splitmenubutton" data-showmenu="dropmenu2" data-splitmenu="false" >Second button</a>
<ul id="dropmenu2" class="splitdropdown">
<li><a href="http://mesdomaines.nu/music" target="the_videos">Music videos</a></li>
<li><a href="http://www.youtube-nocookie.com/embed/XPN8wRkk94I?autoplay=1&amp;rel=0&amp;vq=large" target="the_videos">David Fray plays Bach</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" target="the_videos">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm" target="the_videos">Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" target="the_videos">DD Forums</a></li>
<li><a href="http://www.dynamicdrive.com/style/" target="the_videos">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/" target="the_videos">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/gradient/" target="the_videos">Gradient Image Maker</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/" target="the_videos">FavIcon Generator</a></li>
</ul>

<a href="#" class="splitmenubutton" data-showmenu="dropmenu3" data-splitmenu="false" >Third button</a>
<ul id="dropmenu3" class="splitdropdown">
<li><a href="http://mesdomaines.nu/music" target="the_videos">Music videos</a></li>
<li><a href="http://www.youtube-nocookie.com/embed/XPN8wRkk94I?autoplay=1&amp;rel=0&amp;vq=large" target="the_videos">David Fray plays Bach</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" target="the_videos">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm" target="the_videos">Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" target="the_videos">DD Forums</a></li>
<li><a href="http://www.dynamicdrive.com/style/" target="the_videos">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/" target="the_videos">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/gradient/" target="the_videos">Gradient Image Maker</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/" target="the_videos">FavIcon Generator</a></li>
</ul>

<a href="#" class="splitmenubutton" data-showmenu="dropmenu4" data-splitmenu="false" >Fourth button</a>
<ul id="dropmenu4" class="splitdropdown">
<li><a href="http://mesdomaines.nu/music" target="the_videos">Music videos</a></li>
<li><a href="http://www.youtube-nocookie.com/embed/XPN8wRkk94I?autoplay=1&amp;rel=0&amp;vq=large" target="the_videos">David Fray plays Bach</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" target="the_videos">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm" target="the_videos">Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" target="the_videos">DD Forums</a></li>
<li><a href="http://www.dynamicdrive.com/style/" target="the_videos">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/" target="the_videos">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/gradient/" target="the_videos">Gradient Image Maker</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/" target="the_videos">FavIcon Generator</a></li>
</ul>

<a href="#" class="splitmenubutton" data-showmenu="dropmenu5" data-splitmenu="false" >Fifth button</a>
<ul id="dropmenu5" class="splitdropdown">
<li><a href="http://mesdomaines.nu/music" target="the_videos">Music videos</a></li>
<li><a href="http://www.youtube-nocookie.com/embed/XPN8wRkk94I?autoplay=1&amp;rel=0&amp;vq=large" target="the_videos">David Fray plays Bach</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" target="the_videos">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm" target="the_videos">Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" target="the_videos">DD Forums</a></li>
<li><a href="http://www.dynamicdrive.com/style/" target="the_videos">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/" target="the_videos">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/gradient/" target="the_videos">Gradient Image Maker</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/" target="the_videos">FavIcon Generator</a></li>
</ul>

</div>

</body>

</html>

Then you would replace the links and text inside the li-tags with your own.

As I understand, you want images in the files referred to by your links, and then load videos by clicking on the images. Putting the images in a file is not a hard thing to do, but you would have to create or use some other script specifically made for playing the videos. It can be done, see the first link in the buttons; it refers to a music site of mine.

**molendijk** · 07-17-2015, 09:43 PM

Originally Posted by nicolekidman358

How to use my wordpress site in this code?

I don't know, sorry. The code is meant for people who write or 'borrow' there own code. Isn't there a Wordpress forum where you could ask how to insert your own code?