JQuery navigation active page.

I'm building a jQuery navigation and i cant seem to figure out how to make the navigation stay in the roll over state on the active page.

HTML...

<body>
<form id="form1" runat="server">
<div>
    <div id="pageWrap">
        <div id="pageBody">
            <a class="hoverBtn" href="#"></a>
            <a class="hoverBtn1" href="#"></a>
            <a class="hoverBtn2" href="#"></a>
            <a class="hoverBtn3" href="#"></a>        
            <a class="hoverBtn4" href="#"></a>
            <a class="hoverBtn5" href="#"></a>
            <a class="hoverBtn6" href="#"></a>
            <div class="clear">
            </div>
        </div>
    </div>
</div>
</form>

JQ...

$(function(){
$("a.hoverBtn").show("fast", function() {
    $(this).wrap("<div class=\"hoverBtn\">");
    $(this).attr("class", "");
});
//display the hover div
$("div.hoverBtn").show("fast", function() {
    //append the background div
    $(this).append("<div></div>");

    //get link's size
    var wid = $(this).children("a").width();
    var hei = $(this).children("a").height();

    //set div's size
    $(this).width(wid);
    $(this).height(hei);
    $(this).children("div").width(wid);
    $(this).children("div").height(hei);

    //on link hover
    $(this).children("a").hover(function(){
        //store initial link colour
        if ($(this).attr("rel") == "") {
            $(this).attr("rel", $(this).css("color"));
        }
        //fade in the background
        $(this).parent().children("div")
            .stop()
            .css({"display": "none", "opacity": "1"})
            .fadeIn("fast");
        //fade the colour
        $(this) .stop()
            .css({"color": $(this).attr("rel")})
            .animate({"color": hoverColour}, 350);
    },function(){
        //fade out the background
        $(this).parent().children("div")
            .stop()
            .fadeOut("slow");
        //fade the colour
        //$(this)   .stop()
            //.animate({"color": $(this).attr("rel")}, 250);
    });
}); 
});

css...

div.hoverBtn1 {
position:       relative;
/*float:            left;*/
background:     black url(nav_imgs/pbtn2a.png) repeat-x 0 0 scroll;

}
div.hoverBtn1 a {
position:       relative;
z-index:        2;
display:        block;
width:          223px;
height:         39px;
line-height:    30px;
text-align:     center;
font-size:      1.1em;
text-decoration:none;
color:          #000;
background:     transparent none repeat-x 0 0 scroll;
}
div.hoverBtn1 div
{
display:        none;
position:       absolute;
z-index:        1;
top:            0px;
background:     white url(nav_imgs/pbtn2b.png) repeat-x 0 0 scroll;
}

I have tried

$("#nav a").each(function() {
    var hreflink = $(this).attr("href");
    if (hreflink.toLowerCase()==location.href.toLowerCase()) {
    $(this).parent("li").addClass("selected");
    }
});

with no luck the closed i have come was with..

$(function() {
  $("a.hoverBtn").click(function(){
    $("a.hoverBtn").wrap("<div class=\"active\">");
  });
});

This made it possible to leave the btn the the rollover state once clicked but i couldn't find a way to release it from that state once the page and\or another btn was clicked. i tried the .unwrap() function but that didn't` work ether

So, I just solved this problem on my own project. Basically I have a CSS class specified that creates the rollover effect (.current in this case). I then select all items in my menu, remove the one with the current class on it and then match the href attribute to the document's address. I then set the class on the leftover match. You may need to do some filtering if you get more than one match...but that should be it.

The key here is to use CSS to create the hover effect (I see you're doing additional work in you JS) and to ensure your href tags are properly defined.

<script type="text/javascript">
    $(function () {
        // I build my menus out of lists and style them using CSS as well.
        var menus = $('#navmenu ul li a');
        menus.removeClass('current');

        var matches = menus.filter(function () {
            return document.location.href.indexOf($(this).attr('href')) >= 0;
        });

        matches.addClass('current');
    });
</script>

ansaurus

tags:

views:

answers:

JQuery navigation active page.

related questions