So I’m trying to adapt this Dropdown menu on Joomla the styles work great as expected so I’ll post the javascript includes on the head of my website:
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/dropdown.js'></script>
<script type='text/javascript'>
$(function() {
$('.menu').droppy();
});
</script>
<script type='text/javascript'>
$(function() {
$('.menu').droppy({speed: 100});
});
</script>
ok I don’t know why its is not working I’ll post the dropdown.js should I post the jQuery too? it’s really big!
$.fn.droppy = function(options) {
options = $.extend({speed: 250}, options || {});
this.each(function() {
var root = this, zIndex = 1000;
function getSubnav(ele) {
if (ele.nodeName.toLowerCase() == 'li') {
var subnav = $('> ul', ele);
return subnav.length ? subnav[0] : null;
} else {
return ele;
}
}
function getActuator(ele) {
if (ele.nodeName.toLowerCase() == 'ul') {
return $(ele).parents('li')[0];
} else {
return ele;
}
}
function hide() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', false);
setTimeout(function() {
if (!$.data(subnav, 'cancelHide')) {
$(subnav).slideUp(options.speed);
}
}, 500);
}
function show() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', true);
$(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
if (this.nodeName.toLowerCase() == 'ul') {
var li = getActuator(this);
$(li).addClass('hover');
$('> a', li).addClass('hover');
}
}
$('ul, li', this).hover(show, hide);
$('li', this).hover(
function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); },
function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); }
);
});
};
My question here is: Why is it not working! I know that this is really complex (I don’t anything about JavaScript) but if you help me I’ll post a tutorial and edited files that will help a lot of people!
By the way I’ve download jQuery from the original site so I don’t think that this can be the problem!
Thanks in advance!
Here is the HTML generated from 2 levels til the UL:
<div id="topmenu">
<div class="moduletabledropdown">
<ul class="menu">
<li id="current" class="first level0 home active"><a href="http://www.mundosoftware.com.br/templatex/" title="Home"><span>Home</span></a></li>
<li class="level0 parent faq"><a href="/templatex/index.php?option=com_content&view=section&id=3&Itemid=41" title="FAQ"><span>FAQ</span></a><ul class="level1">
<li class="first last level1 item-01"><a href="http://www.google.com" title="Item 01"><span>Item 01</span></a></li></ul></li>
<li class="level0 parent the-news"><a href="/templatex/index.php?option=com_content&view=category&layout=blog&id=1&Itemid=50" title="The News"><span>The News</span></a><ul class="level1"><li class="first last level1 item-02"><a href="http://www.google.com" title="Item 02"><span>Item 02</span></a></li></ul></li>
<li class="level0 web-links"><a href="/templatex/index.php?option=com_weblinks&view=categories&Itemid=48" title="Web Links"><span>Web Links</span></a></li><li class="last level0 parent news-feeds"><a href="/templatex/index.php?option=com_newsfeeds&view=categories&Itemid=49" title="News Feeds"><span>News Feeds</span></a><ul class="level1"><li class="first last level1 item-03"><a href="http://www.google.com" title="Item 03"><span>Item 03</span></a></li></ul></li></ul></div>
Here is the HTML for a page that does work pure HTML CSS:
<html>
<head>
<title>droppy - Nested drop down menus</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type='text/javascript' src='assets/jquery.js'></script>
<link rel="stylesheet" href="assets/project-page.css" type="text/css" />
<!-- per Project stuff -->
<script type='text/javascript' src='javascripts/jquery.droppy.js'></script>
<link rel="stylesheet" href="stylesheets/droppy.css" type="text/css" />
<!-- END per project stuff -->
</head>
<body>
<div id='container'>
<h1>
droppy
<span class='subtitle'> - Nested drop down menus</span>
</h1>
<div id='sidebar'>
<ul id='project-nav'>
<li><a href='#overview'>Overview</a></li>
<li><a href='#example'>Example</a></li>
<li><a href='#usage'>Usage</a></li>
<li><a href='#download'>Download</a></li>
<li><a href='#known-issues'>Known Issues</a></li>
</ul>
<ul id='ohoa-nav'>
<li><a href='http://onehackoranother.com/projects/'>Back to projects »</a></li>
<li><a href='http://onehackoranother.com/'>Back to onehackoranother.com »</a></li>
</ul>
<a href='http://thepixeltrap.com' id='pixel-trap' title='The Pixel Trap: New Directory for Web Professionals'>
<img src='http://onehackoranother.com/images/pixel-16.png' alt='' /> The Pixel Trap - A New Directory for Web Professionals
</a>
</div>
<div id='main'>
<h2 class='first' id='overview'>Overview</h2>
<p>Quick and dirty nested drop-down menu in the jQuery styleee. I needed a nav like
this for a recent project and a quick Googling turned up nothing that really suited,
so droppy was born. It hasn't been designed with flexibility in mind - if you like
what you see, great, integration should be a breeze - otherwise I'd look for something
more configurable elsewhere.</p>
<h2 id='example'>Example</h2>
<ul id='nav'>
<li><a href='#'>Top level 1</a></li>
<li><a href='#'>Top level 2</a>
<ul>
<li><a href='#'>Sub 2 - 1</a></li>
<li>
<a href='#'>Sub 2 - 2</a>
<ul>
<li>
<a href='#'>Sub 2 - 2 - 1</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
</ul>
</li>
<li><a href='#'>Sub 2 - 2 - 2</a></li>
<li>
<a href='#'>Sub 2 - 2 - 3</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Sub 2 - 3</a></li>
</ul>
</li>
</ul>
<script type='text/javascript'>
$(function() {
$('#nav').droppy();
});
</script>
<h2 id='usage'>Usage</h2>
<p>No mandatory configuration options or nothin' here, just use include the Javascript/CSS
resources and insert the following code in your document head, or any other
suitable place:</p>
<div class='caption'>Javascript:</div>
<pre><script type='text/javascript'>
$(function() {
$('#nav').droppy();
});
</script></pre>
Don’t mind unclosed divs that is not the full code!
Can you post some of your drop down menu HTML?
Right now you are applying the droppy plugin to the selector ‘.menu’, which looks for an element on your page that has the CSS class ‘menu’, is that what you intended? If you want to apply the dropdown to an element with id=”menu” you would use $(‘#menu’).
Update
I would recommend using superfish instead, the mechanics of drop down menus are really hard to get right to make the menus easy to use. Superfish does an excellent job of being very forgiving for the site visitors.
I can’t find anything particularly wrong with the code, seems to work ok. The only change I had to do to get it to work was to initially set the submenus to hidden using CSS. Try this out, you’ll need to add your CSS back into the HTML. I would suggest using Firefox, Firebug and Firequery. This will give you insight into what exactly is breaking if there are any JavaScript errors.