4V Connect

Criando menu com Jquery

Olá à todos!
Hoje vou postar um código para criarmos menu dropdown com jquery. Para aqueles que trabalham com esse magnífico framework sabem que é muito fácil criar qualquer tipo de função/animação com ele.

Mas vamos ao que interessa.

Primeiro vamos criar uma lista com quatro itens.

<ul id="nav">
	<li>Menu 1
    	<ul>
        	<li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </li>
	<li>Menu 2
    	<ul>
        	<li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </li>
	<li><a href="#">Link 1</a</li>
	<li>Menu 3
    	<ul>
        	<li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </li>
</ul>

Em seguida formatar o css para que o menu posso ser horizontal e seus submenu´s verticais.

<style type="text/css">
	*{
		padding:0;
		margin:0;
		list-style:none
	}

	#nav{
		width:auto;
		float:left
	}

	#nav li{
		display:inline;
		float:left;
		margin:0 20px;
		position:relative;
	}

	#nav li ul{
		display:none;
		left:0;
		position:absolute;
		top:20px;
	}

	#nav li ul li{
		width:auto;
		margin:0
	}

	#nav li .on{
		display:block
	}

</style>

Após isso vamos fazer a magia com jquery para que quando passemos o rato (mouse) por cima do menu escolhido o submenu apareça.

<script type="text/javascript">
	$(function(){
		$('#nav li').mouseenter(function(){
			$(this).children('ul')
                        .slideToggle()
                         .addClass('on');
		}).mouseleave(function(){
			$(this).children('ul')
                       .delay(500)
                       .slideUp()
                       .removeClass('on');
		});
	});
</script>

Observem que não utilizamos mais que cinco linhas para criarmos esse menu dropdown. Fácil,não?

[]s.