I am trying to build an navigation plugin and I am having a lot of
trouble with getting it to work.
What I want is to have a horizontal main navigation and a horizontal
sub navigation just below it (kind of like a tab navigation) but what
I want is for when you mouse over one of the main nav elements, I want
the sub nav elements to slide in from the right. Then, when you mouse
over the next main nav element, the subnav should hide and the next
one will slide in from the right.
I have it working now but ONLY if I hard code the main nav elements
and subnav elements actions.
Here is an example of how the code looks when hard coded:
on the main html:
[code]
<script type="text/javascript">
$j = jQuery.noConflict();
// Begin dock menu setup //
$j(document).ready(
function()
{
$j(".navheader").hsubs({navcount:4});
}
);
</script>
<div class="navheader" id="nav1"><a href="index.php">Home</a></div>
<div class="navheader" id="nav2"><a href="crowdboard.php"
class='notlast'>Talent</a></div>
<div class="navheader" id="nav3"><a href="revision.php"
class='notlast'>Tools</a></div>
<div class="navheader" id="nav4"><a href="impact.php"
class='notlast'>Impact</a></div>
<br clear='all' />
<div class='navcontent' id="subnav1"></div>
<div class='navcontent' id="subnav2">
<a href="#">Crowdboard</a>
<a href="#">Find Talent</a>
<a href="#">SignUp as Talent</a>
</div>
<div class='navcontent' id="subnav3">
<a href="#">Scope a Project</a>
<a href="#">Tips & Tricks</a>
<a href="#">Project Management</a>
</div>
<div class="navcontent" id="subnav4">
<a href="#">How We Impact</a>
<a href="#">Get Involved</a>
</div>
[/code]
And then in my jquery.hsubs.js file:
[code]
jQuery.fn.extend({
hsubs: function(params){
var jQ = jQuery;
var params = jQ.extend({
speed: 500
},params);
$j('#nav1').mouseover(function()
{
$j('#subnav2').animate({
height: "0px",
width: "0px"
},params.speed);
$j('#subnav3').animate({
width: "0px",
height: "0px"
},params.speed);
$j('#subnav4').animate({
height: "0px",
width: "0px"
},params.speed);
});
$j('#nav2').mouseover(function()
{
$j('#subnav2').animate({
height: "30px",
width: "950px"
},params.speed);
$j('#subnav3').animate({
height: "0px",
width: "0px"
},params.speed);
$j('#subnav4').animate({
height: "0px",
width: "0px"
},params.speed);
});
$j('#nav3').mouseover(function()
{
$j('#subnav2').animate({
height: "0px",
width: "0px"
},params.speed);
$j('#subnav3').animate({
height: "30px",
width: "950px"
},params.speed);
$j('#subnav4').animate({
height: "0px",
width: "0px"
},params.speed);
});
$j('#nav4').mouseover(function()
{
$j('#subnav2').animate({
height: "0px",
width: "0px"
},params.speed);
$j('#subnav3').animate({
height: "0px",
width: "0px"
},params.speed);
$j('#subnav4').animate({
height: "30px",
width: "950px"
},params.speed);
});
}
});
[/code]
So what I want to do is something like the following:
[code]
for(t=0;t<params.navcount;t++){
var navid = '#nav'+t;
var subnavid = '#subnav'+t
$j(navid).mouseover(function()
{
// hide all subnavs
for(z=1;z<=params.navcount;z++) {
$j('#subnav'+z).animate({
height: "0px",
width: "0px"
},params.speed);
}
// show the moused over subnav
$j(subnavid).animate({
height: "30px",
width: "950px"
},params.speed);
});
}
[/code]
But this won't work. The mouseover only shows the last main nav
element's subnav.....
I also want to make it so that the hiding only happens to a subnav
that is currently open.
Can anyone point me in the right direction? I am new to jQuery and
love it, but have hit a roadblock. I need the navigation to be dynamic
so that the owner of the site can simply add more navigation elements
and subnavs (and increment the navcount param).
Thanks for your help!
