Horizontal nav with fade in-out animate

Yeşil renkli ve mouse üzerine  gelince  renk değiştiren yatay açılır bir örnek.  Mouseyi butonların üzerinde gezdirdiğinizde yeşil renk fade efekti ile mor rengine dönüşüyor. Ayrıca  açılır liste de  aynı şekilde fade efekti ile görünüp kayboluyor. Açılır liste aşağı kayan türden değil. Birde  arama kutusu var. Arama kutusunun içine tıkladığınızda  uzunluğu  biraz daha artıyor. Herhangi bir  arama işlemi gerçekleştirmiyor tabi. Sadece süs  görünümünde. Sitenizin arama bölümü  ile birleştirirseniz eğer o zaman süs olmaktan çıkar. Süs  kelimesi  aslında işin şakasıydı. Tabi ki bu hali ile arama yaptığınız zaman herhangi bir sonuç karşınıza çıkmayacaktır. Çalışabilmesi için öncelikle sitenizde arama yapam form ile birleştirmeniz gerek.

Kullanım

• Head  etiketleri arasına eklemeniz gereken bölümler.

jQuery  ve Css dosyalarının url  adresleri : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />

JavaScript : 

<script type="text/javascript">
$(document).ready(function() {
	$("li").hover(function() {
			var itemwidth = $(this).width(); /* Getting the LI width */
			$(this).prepend("<div class='hover'></div>"); /* Inserting a blank div into within li above the <a> tag*/
			$(this).find("div").fadeIn('10000').css({ 'width' : itemwidth}); /* Using the itemwidth for the div to display properly*/
			$(this).find("ul").fadeIn('1000').slideDown('10000').css("display", "block");

	} , function() {
		$(this).find("div").slideUp('1000').fadeOut('1000');/* sliding up and fading out the hover div */
		$(this).find("div").remove();/* removing the <div> code from html at every mouseout event*/
		$(this).find("ul").fadeOut('1000'); /* fading out the sub menu */

	});

	$(".search-input").focus(function(){
		$(this).animate({width:'180px'}, 500); /* on focus, increasing the input width of search to left side*/
	});

	$(".search-input").focusout(function(){
		$(this).animate({width:'117px'}, 500);  /* on focus, decreasing the input width of search to left side*/
	});
});
</script>

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="main-navigation">
	<ul>
		<li><a href="#">Home</a>

			<ul>
				<li><a href="#">A 1</a></li>
				<li><a href="#">A 2</a></li>
				<li><a href="#">A 3</a></li>

				<li><a href="#">A 4</a></li>
				<li><a href="#">A 5</a></li>

			</ul>

		</li>
		<li><a href="#">Services</a>

			<ul>
				<li><a href="#">A 1</a></li>

				<li><a href="#">A 2</a></li>
				<li><a href="#">A 3</a></li>
				<li><a href="#">A 4</a></li>
				<li><a href="#">A 5</a></li>

			</ul>

		</li>
		<li><a href="#">Portfolio</a>

			<ul>
				<li><a href="#">A 1</a></li>
				<li><a href="#">A 2</a></li>
				<li><a href="#">A 3</a></li>
				<li><a href="#">A 4</a></li>
				<li><a href="#">A 5</a></li>

			</ul>

		</li>
		<li><a href="#">Contact</a>

			<ul>
				<li><a href="#">A 1</a></li>
				<li><a href="#">A 2</a></li>
				<li><a href="#">A 3</a></li>

				<li><a href="#">A 4</a></li>
				<li><a href="#">A 5</a></li>
			</ul>
		</li>
	</ul>

	<div class="search">
		<input type="text" name="search" class="search-input" />
		<input type="submit" name="search" value="" class="search-btn" />

	</div>

</div>