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


Moderador: web

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

Background fading com jQuery

16-01-2009 19:36

Vou passar um script para você ter um menu com fading do background ao passar o cursor por cima do menu.

CSS

<style type="text/css"> #menu { margin: 0; padding: 0; } #menu li { position: relative; list-style: none; float: left; } .back { position: absolute; width: 100%; height: 0; margin: 0; top: 0; z-index: 0; } #menu li a { display: block; position: relative; z-index:100; padding: 5px 5px; } </style>

JavaScript

<script type="text/javascript"> $(document).ready(function() { $('#menu li a').hover(function() { $(this).siblings().css({height:"30px", background:"#cccccc"}); $(this).siblings().fadeTo(300,1.0); }, function() { $(this).siblings().fadeTo(300,0.0); }); }); </script>

HTML

<ul id="menu"> <li><a href="#">menu1</a><span class="back"></span></li> <li><a href="#">menu2</a><span class="back"></span></li> </ul>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Google [Bot]