Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17519
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu animado no onMouseOver com jQuery

28-02-2011 16:25

Esse é um bom script de menu animado usando jQuery. Ao passar o cursor sobre as opções do menu, a mesma se movimenta para direita.

<script src="http://code.jquery.com/jquery-latest.js"></script> <script> (function($){ $.fn.extend({ //plugin name - animatemenu animateMenu: function(options) { var defaults = { animatePadding: 60, defaultPadding: 10, evenColor: '#ccc', oddColor: '#eee' }; var options = $.extend(defaults, options); return this.each(function() { var o =options; var obj = $(this); var items = $("li", obj); $("li:even", obj).css('background-color', o.evenColor); $("li:odd", obj).css('background-color', o.oddColor); items.mouseover(function() { $(this).animate({paddingLeft: o.animatePadding}, 300); }).mouseout(function() { $(this).animate({paddingLeft: o.defaultPadding}, 300); }); }); } }); })(jQuery); </script> <script type="text/javascript"> $(document).ready(function() { $('#menu').animateMenu({animatePadding: 30, defaultPadding:10}); }); </script>


<style> body {font-family:arial;font-style:bold} a {color:#555; text-decoration:none} #menu {list-style:none;width:160px;padding-left:10px;} #menu li {margin:0;padding:5px;cursor:hand;cursor:pointer} </style>


<ul id="menu"> <li>Home</li> <li>Posts</li> <li>About</li> <li>Contact</li> </ul>

Fonte: http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado