Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rai Siqueira

Menu css e jquery

Recommended Posts

desenvolvi um menu em css e jquery, mais só pega quando passo o mouse 2 vezes, o teste do site é esse ai -> clickfesta.musicasparadownload.org

 

qualquer duvida o css é esse:

 

/*MENU*/
#menu{ background:#008dca; width:100%; height:40px; box-shadow: 0 2px 9px #CCCCCC; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#009bd1', endColorstr='#0084c3');background:-webkit-gradient(linear, left top, left bottom, from(#009bd1), to(#0084c3));background:-moz-linear-gradient(#009bd1, #37c6e2 10%, #0084c3); clear:both;}
#menu ul{ list-style-type:none; font-family:myriad, sans-serif; font-weight:400; margin:0; padding:0; float:left; z-index:2;}
#menu ul li{ position:relative; float:left; margin:0;}
#menu ul li a{ color:#FFF; text-shadow:1px 1px #000; text-decoration:none; float:left; margin:5px 0 0 15px; font-size:20px; display:block;}
#menu span{ background:url(images/imagens.png) no-repeat -16px -57px; width:10px; height:12px; float:right; margin:15px 0 0 3px;}
/*sub-menu*/
#submenu .submenu_cima{ background:url(images/imagens.png) no-repeat -388px -10px; width:394px; height:59px; float:left; position:absolute; display:none;}

#submenu ul{ position:absolute; z-index:1; display:block; top:50px; left:60px; background:url(images/imagens.png) no-repeat -389px -7px; width:395px; height:279px;}
#submenu ul li{ float:left; margin:0 10px 0 0; display:inline; top:50px; left:15px;}
#submenu ul li a{ color:#008dca; text-shadow:none;}
#submenu ul li:hover{ display:block;}

 

O Jquery:

//SubMenus
$(document).ready(function(){
$("#submenu ul").hide();//aqui eu escondo as ul´s que forem filhas de li.  
$("ul li").hover(function(){//O método hover recebe dois parametros que são duas funções.


   }, function(){
       $(this).find("ul").slideUp("slow"); //aqui é como se fosse o callback e você também faz o que quiser.

//show subnav on hover  
               $(this).mouseenter(function() {  
                   $(this).find("ul").stop(true, true).slideDown();  
				}, function(){
       $(this).find("ul").slideUp("slow"); //aqui é como se fosse o callback e você também faz o que quiser.
               });  

});});

 

e o HTML:

 

<div id="menu">
   	<div id="centro">
       	<ul>
           	<li><a href="#Home" title="Menu">Home</a></li>
               <li><a href="#Contato" title="Menu">Contato</a></li>
               <li><a href="#Sobre" title="Menu">Sobre</a></li>
               <li><a href="#Coberturas" title="Menu">Coberturas</a><span></span>
               		<div id="submenu">
                       <div class="submenu_cima"></div>

                   <ul>
                   <div class="submenu_cima"></div>
                   <li><a href="#sub-cobertura1" title="sub">Sub Cobertura 1</a></li>
                   <li><a href="#sub-cobertura2" title="sub">Sub Cobertura 2</a></li>
                   <li><a href="#sub-cobertura3" title="sub">Sub Cobertura 3</a></li>
                   <li><a href="#sub-cobertura4" title="sub">Sub Cobertura 4</a></li>
                   </ul></div>
               </li>
               <li><a href="#Galerias" title="Menu">Galeria</a></li>
               </ul>
       </div><!-- fim div #centro*2 -->
   </div><!-- fim div #menu -->

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.