Hi everyone
I'm currently trying to create a "mega" dropout menu using JQuery but have encountered an issue I'm yet to be able to resolve. At
the moment I have
the following HTML structure:
<div id="TopNav" class="grid_16">
<ul class="cmsListMenuUL level0" id="TopNavMenu">
<li class="cmsListMenuLIcmsListMenuLI highlightedLI" id="TopNavMenu_Home"><a href="/">
<span class="text">Home</span></a></li>
<li class="cmsListMenuLIfirst" id="TopNavMenu_0_1"><a href="/Key-Sectors.aspx" class="cmsListMenuLink">
<span class="text">Key Sectors</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_2"><a href="/Global-Brands.aspx" class="cmsListMenuLink">
<span class="text">Global Brands</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_3"><a href="/News---Features.aspx" class="cmsListMenuLink">
<span class="text">News & Features</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_4"><a href="/Videos.aspx" class="cmsListMenuLink">
<span class="text">Videos</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_5"><a href="/Events.aspx" class="cmsListMenuLink">
<span class="text">Events</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_6"><a href="/Key-Cities.aspx" class="cmsListMenuLink">
<span class="text">Key Cities</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_7"><a href="/Doing-Business-in-Yorkshire.aspx"
class="cmsListMenuLink"><span class="text">Doing Business in Yorkshire</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_8"><a href="/How-We-Can-Help.aspx" class="cmsListMenuLink">
<span class="text">How We Can Help</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_9"><a href="/Contact-Us.aspx" class="cmsListMenuLink">
<span class="text">Contact Us</span></a></li>
</ul>
</div>
<div class="sectorsDropped">
<div class="floatLeft leftColumn">
<div class="parentItem" style="border-color: #0064BE;">
<a href="/Key-Sectors/Advanced-Engineering---Materials.aspx" class="parentItemContent">
Advanced Engineering & Materials</a><div class="childItem">
<a href="/Key-Sectors/Advanced-Engineering---Materials/Nuclear.aspx">- Nuclear</a></div>
<div class="childItem">
<a href="/Key-Sectors/Advanced-Engineering---Materials/Logistics---Infrastructure.aspx">
- Logistics & Infrastructure</a></div>
</div>
<div class="parentItem" style="border-color: #FFB611;">
<a href="/Key-Sectors/Chemicals.aspx" class="parentItemContent">Chemicals</a></div>
<div class="parentItem" style="border-color: #B7CC0B;">
<a href="/Key-Sectors/Environmental-Technologies.aspx" class="parentItemContent">Environmental
Technologies</a><div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Offshore-Wind.aspx">- Offshore Wind</a></div>
<div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Carbon-Capture---Storage.aspx">- Carbon
Capture & Storage</a></div>
<div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Tidal-Power.aspx">- Tidal Power</a></div>
<div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Biomass.aspx">- Biomass</a></div>
</div>
</div>
<div class="floatLeft rightColumn">
<div class="parentItem" style="border-color: #AC26AA;">
<a href="/Key-Sectors/Digital---New-Media.aspx" class="parentItemContent">Digital &
New Media</a></div>
<div class="parentItem" style="border-color: #e1477e;">
<a href="/Key-Sectors/Food---Drink.aspx" class="parentItemContent">Food & Drink</a></div>
<div class="parentItem" style="border-color: #00c5b5;">
<a href="/Key-Sectors/Healthcare-Technologies.aspx" class="parentItemContent">Healthcare
Technologies</a><div class="childItem">
<a href="/Key-Sectors/Healthcare-Technologies/Biotechnology.aspx">- Biotechnology</a></div>
<div class="childItem">
<a href="/Key-Sectors/Healthcare-Technologies/Pharmaceuticals.aspx">- Pharmaceuticals</a></div>
<div class="childItem">
<a href="/Key-Sectors/Healthcare-Technologies/Medical-Devices.aspx">- Medical Devices</a></div>
</div>
<div class="parentItem" style="border-color: #AC1A2F;">
<a href="/Key-Sectors/Financial---Professional.aspx" class="parentItemContent">Financial
& Professional</a></div>
</div>
</div>
In normal circumstances
the div containing
the "mega" menu options would sit inside
the li item that fires
the show/hide but this is currently not possible as
the ul list of navigation links is rendered using a 3rd party piece of software which does not provide an equivalent of an OnItemDataBound event for me to be able to inject
the div into
the item
Does anyone know of a way, using JQuery, of showing
the div but maintain
the display of
the div as
the mouse focus leaves
the li that originaly displayed
the div and actually enters
the div?
I'm currently using
the following JQuery which displays
the div correctly but as
the mouse focus enters
the div
the div then disappears as
the mouse focus from
the li has now moved:
$(document).ready(function() {
function addMega(){
$(".sectorsDropped").toggle("fast");
}
function removeMega(){
$(".sectorsDropped").toggle("fast");
}
var megaConfig = {
interval: 500,
sensitivity: 4,
over: addMega,
timeout: 500,
out: removeMega
};
$("#TopNavMenu_0_1").hoverIntent(megaConfig)
});
Thanks
Dave
