1. 
   
   <script type="text/javascript">
   $(function() {
   $("ul#menu span").css("opacity","0");
   $("ul#menu span").hover(function () {
   $(this).stop().animate({
   opacity: 1
   }, "slow");
   },
   function () {
   $(this).stop().animate({
   opacity: 0
   }, "slow");
   });
   });
   </script>
   
   
   
   
   
   
   
   
   
   
   
   
   
   

html:

1. <ul id="menu">
       <li><a href="onama.html" class="onama"><span>O nama</span></a></li>
       <li><a href="radovi.html" class="radovi"><span>Naši radovi</span></a></li>
       <li><a href="projekti.html" class="projekti"><span>Naši projekti</span></a></li>
       <li><a href="web_dizajn.html" class="webdizajn"><span>Web dizajn</span></a></li>
       <li><a href="kontakt.html" class="kontakt"><span>Kontakt</span></a></li>
       <li><a href="pojmovi.html" class="pojmovi"><span>Pojmovi</span></a></li>
   </ul>
   
   
   
   
   
   
   
   
   
   

css:

1. ul#menu li a.onama {
   width:100px;
   }
   
   
   
2. ul#menu li a.onama span {
   background-position:0px -131px;
   text-indent:-9999px;
   }
   
   
   
   
   
   

#2


Second one has select states easy to implement by manually applying selected clas to "li",
not perfect but I don't mind as I have only a few pages. But animation is jerky and looks kinda, ugly.
It always plays whole opacity-changing animation even if I hover 1/10th of a second over a button.

code:

1. $(document).ready(function(){
       $('#hnav').autosprites({
           offset: '131px',
           activeState: true,
           activeSprites: true
       });
       $('#vnav').autosprites({
           orientation: 'vertical',
           offset: '262px'
       });
   });
   
   
   
   
   
   
   
   
   
   

and another js file, and omg sorry about this, it's really huge and messy.

1. (function($){
             $.fn.autosprites=function(settings){settings=$.extend({offset:'100%',orientation:'horizontal',over:{opacity:'show'},overSpeed:500,out:{opacity:'hide'},outSpeed:1000,activeState:false,activeClass:'active',activeSprites:false},settings);function rempx(string){return Number(string.substr(0,string.length-2));}
             
   function addpx(number){return number+'px';}
   $(this).each(function(){var backgroundImage=$(this).css('background-image');
   $(this).css('zIndex',100).find('a').css('zIndex',99);var totalPositionOffset=0;
   $(this).children().each(function(){var positionOffset='-'+addpx(totalPositionOffset);var baseOffset='0px';if(settings.activeState&&$(this).hasClass(settings.activeClass)){baseOffset='-'+addpx(rempx(settings.offset));if(settings.activeSprites)
   baseOffset='-'+addpx(rempx(settings.offset)*1);}
   
   var position=settings.orientation=='horizontal'?positionOffset+' '+baseOffset:baseOffset+' '+positionOffset;var offsetPosition=settings.orientation=='horizontal'?positionOffset+' -'+settings.offset:'-'+settings.offset+' '+positionOffset;
   
   $(this).css({backgroundImage:backgroundImage,backgroundPosition:position});var width=$(this).css('width');var height=$(this).css('height');var hover=$('<div>&nbsp;</div>').css({cursor:'hand',zIndex:1,position:'absolute',top:0,left:0,width:width,height:height,backgroundImage:backgroundImage,backgroundPosition:offsetPosition}).hide();
   $(this).prepend(hover);$(this).hover(function(){
   $(this).find('div').stop(true,true).animate(settings.over,settings.overSpeed),
   {queue:false, duration:800 };},function(){$(this).find('div').stop(true,true).animate(settings.out,settings.outSpeed),{queue:false, duration:800 };});totalPositionOffset+=settings.orientation=='horizontal'?rempx(width):rempx(height);});});}})(jQuery);
   
   
   
   
   
   
   
   
   
   
   
   
   
   

So, either way is fine. If you can help me with making first navigation keep button pressed, awesome,
or if you can make the second one stop and "rewind" animation on mouse out, awesome as well.

Thank you very much :)