Avinash's Blog

In this effect, instead of the element in focus having some changes, rest of the elements go DIM or have a decreased opacity so that the elements outstands. Here is a Demo and a basic code for the effect can be found below

The HTML

		<div id="navigation">
			<ul>
				<li><a href="http://blog.avinash.com.np">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Details</a></li>
				<li><a href="#">Feedback</a></li>
			</ul>
		</div>

The CSS

            #navigation{
                border-bottom:1px solid #777;
				color:#000;
				height:31px;
				font-family:ubuntu;
			}
			#navigation ul{
				list-style-type:none;
				margin:0px;
				padding:0px;
				margin:0px 3px;
			}
			#navigation ul li{
				display:inline-block;
				margin:3px 0px;
				height:23px;
				text-align:center;
                border-right:1px solid #777;
			}
			#navigation ul li a{
                font-family:'Artifika',arial,serif;
				padding:0px 20px;
				margin:0px 10px;
				color:#000;
                text-decoration:none;
                text-shadow:1px 1px 1px #ccc;
            }

Using jQuery for the Effect

			$(document).ready(function () {
			$("div#navigation ul li a").hover(function()
            {
                $("div#navigation ul li a").stop().animate({opacity:0.2},400);
                $(this).stop().animate({opacity:1},1);
			},
			function(){
                $("div#navigation ul li a").stop().animate({opacity:1},400);
				});

			});

Using CSS3 Transistions

The CSS Rules will have to be changed accordingly.

	#navigation ul li a{
                font-family:'Artifika',arial,serif;
				padding:0px 20px;
				margin:0px 10px;
				color:#000;
                text-decoration:none;
                text-shadow:1px 1px 1px #ccc;
                -webkit-transition: opacity 1s ease-in-out;
                -moz-transition: opacity 1s ease-in-out;
                -o-transition: opacity 1s ease-in-out;
                -ms-transition: opacity 1s ease-in-out;
                transition: opacity 1s ease-in-out;
            }
            #navigation ul:hover > li a {opacity:0.2;}
            #navigation ul:hover > li a:hover {border-bottom:2px solid #c21; opacity:1;}

Using this simple technique a very classy effect can be created

Some more navigation techniques can be found here and here (lavalamp effect)