How could I change this nav script to pull the class 'current-___'from the body tag?
Here is the original: http://alistapart.com/d/sprites2/exa...-function.html
I think the relevant part is
but the whole script is...Code:var parentClass = $(parent).attr('class'); $(parent).children('li').each(function() { var myClass = ($(this).attr('class')) var current = parent.substring(1) + ' current-' + ($(this).attr('class'));
currently a sample css of a nav item looks likeCode:// Navigation generateSprites('.nav', 'current-', true, 300, 'fade'); function generateSprites(parent, selectedPrefix, setActive, hoverSpeed, style) { var parentClass = $(parent).attr('class'); $(parent).children('li').each(function() { var myClass = ($(this).attr('class')) var current = parent.substring(1) + ' current-' + ($(this).attr('class')); attachNavEvents(parent, myClass, setActive, hoverSpeed, style); if (parentClass != current) { $(this).children('a').css({backgroundImage:'none'}); } }); } function attachNavEvents(parent, myClass, setActive, hoverSpeed, style) { $(parent + ' .' + myClass).mouseover(function() { $(this).append('<div class="nav-' + myClass + '"></div>'); if (style == 'slide') { $('div.nav-' + myClass).css({display:'none'}).slideDown(hoverSpeed); } else { $('div.nav-' + myClass).css({display:'none'}).fadeIn(hoverSpeed); } }).mouseout(function() { if (style == 'slide') { $('div.nav-' + myClass).slideUp(hoverSpeed, function() { $(this).remove(); }); } else { $('div.nav-' + myClass).fadeOut(hoverSpeed, function() { $(this).remove(); }); } }); if (setActive) { $(parent + ' .' + myClass).mousedown(function() { $('div.nav-' + myClass).attr('class', 'nav-' + myClass + '-click'); }).mouseup(function() { $('div.nav-' + myClass + '-click').attr('class', 'nav-' + myClass); }); } }
Code:/* home */ .nav .home a:link, .nav .home a:visited { left: 0; width: 70px; } .nav .home a:hover, .nav .home a:focus { background: url(../images/nav.png) no-repeat 0px -36px; } .nav .home a:active { background: url(../images/nav.png) no-repeat 0px -72px; } .current-home .home a:link, .current-home .home a:visited { background: url(../images/nav.png) no-repeat 0px -108px; cursor: default; } .nav-home, .nav-home-click { background: url(../images/nav.png) no-repeat 0px -36px; position: absolute; left: 0; top: 0; height: 35px; width: 70px;



Reply With Quote
Bookmarks