So I'm currently trying out with JQuery and have so far got a navigation working properly. I've come to add the dropdowns and it's causing issues and wondered if someone could see why.
HTML:
<ul id="navigation">
<li id="first" onclick="window.location='index.html';"><span id="logo"></span><span class="navigation-text">Home</span></li>
<li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span>
<ul class="subnavigation">
<li>Portfolio 1 Column</li>
<li>Portfolio 2 Column</li>
</ul>
</li>
<li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span></li>
<li class="standard"><span class="gallery_icon"></span><span class="navigation-text">GalleryGallery123</span></li>
</ul>
JQuery:
<script type="text/javascript">
$(document).ready(function() {
// On hover:
$('#navigation li').hoverIntent(function () {
width = $(this).children('span:nth-child(2)').width();
text = $(this).children('span:nth-child(2)');
var newwidth = (width + 15) // Original width + 15px padding
text.filter(':not(:animated)').animate({"width":"1px"}, 0).show(); // Make the width 0px and make the element visible
text.animate({"width":+newwidth+"px"}, 300); // Animate the width to the new size
$(this).children('ul').slideDown('slow')
},
function () {
text.animate({"width":"1px"}, 150); // Animate the width to 0px and hide the element
text.animate({"width":+width+"px"}, 0);
setTimeout(function() {
$('#navigation li .navigation-text').hide();
},100);
$(this).children('.subnavigation').slideUp('slow');
});
});
</script>
If you hover on the green bar or any of the LIs that doesn't contain the dropdown then it works fine. It opens and closes and carries on working if you do it again. If however you hover on to the dropdown and hold it on the first LI of that dropdown then move on to the second LI the parent closes, ends up at the wrong size and the first LI of the dropdown hides its self.
Probably best if you have a play with it so you know what I'm on about as I'm not sure that made much sense.
JFiddle: http://jsfiddle.net/5NcHk/ Live: http://dev.evaske.com/Navigation/
