[Resolvido] HTML / CSS para show / hide...

[Bruno Augusto 417]

Pessoal, estou recriando um layout de um site o qual não fui eu quem fez.

 

E estou tendo uma certa dificuldade com a marcação (e com seu respectivo CSS) para criação de dois menus, sendo que o segundo estará, por padrão, invisível, abrindo-se quando um determinado hover feito com JavaScript for disparado, ocultando-se assim, o primeiro, anteriormente visível.

 

O problema nem é o HTML do menu, afinal uma lista resolve. O problema está naquilo que gatilhará o efeito.

 

No alto desse menu existem duas imagens, num mesmo arquivo, "categorizando" o menu.

 

O layout original usa duas imagens, em duas DIV's diferentes. Eu, achando ser possível unir num único sprite, fiz:

 

O primeiro menu se abre depois de o mouse passar pela casinha e o segundo, na mesma circunstância, mas pelo globo.

 

Mas acabei emperrando no HTML. Minha tentativa foi:

 

<div id="cityWorld">

   <ul>

       <li id="city">

           <img src="public/images/cityWorld.png" class="flag" />

           <ul>
               <li>Item</li>
           </ul>

       </li>

   </ul>

</div>

Tentei utilizando a tag IMG para poder experimentar a propriedade CSS clip e até que obtive um bom resultado, indiretamente provando a mim mesmo que é possível fazer CSS Sprites sem usar background:

 

#cityWorld {
   margin-left: 72px;
   margin-top: 55px; /** Igual a metade da altura da imagem (caracterizando o clipping) */
   width: 185px;
}

#cityWorld ul {
   list-style: none;
}

   #cityWorld li#city ul, #cityWorld li#world ul {
       background: url( 'images/submenu.jpg' ) repeat-y 1px; /* Não vem ao caso */
   }

   /* Por não estar finalizado, as propriedades ainda não foram agrupadas */

   #cityWorld #city img.flag {
       position: absolute;
       clip: rect( 0 181px 55px 0 );
       margin-top: -55px;
   }

   #cityWorld #world img.flag {
       position: absolute;
       clip: rect( 58px 181px 112px 0 );
       margin-top: -112px /* Mesmo que a altura da bandeira, mas negativa */
   }

Mas depois de feito eu pensei: Como vou disparar o evento se ambas as imagens de topo estão na mesma imagem?

 

E com isso todo o HTML foi pro espaço.

 

Imediatamente pensei naquelas coordenadas de área, mas como nunca usei isso, nem pesquisei a respeito.

 

Existe outra solução, que não seja inverter o clipping, de horizontal para vertical (pensei nisso agora).

[Samuel Volpato 4]

Cara quer fazer com css? ou Javascript(Jquery) ta valendo também?

[Bruno Augusto 417]

Fazer o menu aparecer/sumir eu acredito não ser possível SÓ com CSS.

 

O meu problema é que, estranhamente, não estou conseguindo montar um HTML decente para isso :upset:

[Samuel Volpato 4]

Mas se der pra usar JQuery, iria mais ou menos para esse lado:

 

<style type="text/css">
   ul#menuPrincipal{
       background: url(imagem.jpg) no-repeat 0 0;
       height: 50px;
       overflow: visible;
       width: 150px;
   }
</style>

<script type="text/javascript">
$(document).ready(function(){
   $('li#globo').mouseover(function(){
       $('ul#menuPrincipal').css('backgroundPosition','-40px 0');
   });

   $('li#cidade').mouseover(function(){
       $('ul#menuPrincipal').css('backgroundPosition','0 0');
   });
});
</script>

<ul id="menuPrincipal">
   <li id="cidade">
       <ul>
           <li>Item</li>
           <li>Item</li>
           <li>Item</li>
           <li>Item</li>
       </ul>
   </li>
   <li id="globo">
       <ul>
           <li>Item</li>
           <li>Item</li>
           <li>Item</li>
           <li>Item</li>
       </ul>
   </li>
</ul>

 

Isso é só uma ideia de como eu faria num primeiro momento. Teria a UL com o menu principal, e dentro dela as LIs dos menus. Dentro dessas LIs, outra UL com os submenus. A UL do menu principal teria como background a imagem (com sprite) na posição 0 0.

 

Em seguida com JQuery criaria o efeito de hover (mouseover) em cada uma das LIs do menu principal setando uma nova posição de background. Creio que da para aproveitar se mouseover para fazer um efeito de fade nos submenus tb.

 

Mas não testei o código, só o escrevi para exemplificar uma ideia.

[Bruno Augusto 417]

Hmmmm.... Não consegui fazer seu exemplo funcionar não. :mellow:

 

Mas ele já foi suficiente para me mostrar como fazer ^_^

 

HTML

<div id="cityWorld">

   <img src="public/images/cityWorld.png" class="city active" />
   <img src="public/images/cityWorld.png" class="world" />

   <ul>
       <li id="city">

           <ul>
               <li>City Item</li>
               <li>City Item</li>
               <li>City Item</li>
               <li>City Item</li>
               <li>City Item</li>
               <li>City Item</li>
           </ul>

       </li>

       <li id="world">

           <ul>
               <li>World Item</li>
               <li>World Item</li>
               <li>World Item</li>
               <li>World Item</li>
               <li>World Item</li>
               <li>World Item</li>
           </ul>

       </li>

   </ul>

</div>

CSS

#cityWorld {
   margin-left: 72px;
   width: 185px;
}

   #cityWorld ul {
       list-style: none;
   }

   #cityWorld li#city ul, #cityWorld li#world ul {
       background: url( 'images/submenu.jpg' ) repeat-y 1px;
   }

       /**
        * Heading Icons
        */
       #cityWorld img.city, #cityWorld img.world {
           position: absolute;
       }

       #cityWorld img.city {
           clip: rect( 55px, 94px, 110px, 0 );
           margin-top: -55px;
       }

        #cityWorld img.city[class~=active] {
            clip: rect( 0, 94px, 55px, 0 );
            margin-top: 0;
        }

       #cityWorld img.world {
           clip: rect( 0, 181px, 55px, 94px );
       }

        #cityWorld img.world[class~=active] {
            clip: rect( 55px, 181px, 110px, 90px );
            margin-top: -55px;
        }

   #cityWorld #world {
       display: none;
   }

JavaScript, com jQuery, claro, mesmo que fugindo do escopo do tópico:

 

$( document ).ready( function() {

   $( '#cityWorld img.city' ).hover(

       function() {

           $( this ).addClass( 'active' ).next().removeClass( 'active' );

           $( '#cityWorld #city' ).show();
           $( '#cityWorld #world' ).hide();
       }
   );

   $( '#cityWorld img.world' ).hover(

       function() {

           $( this ).addClass( 'active' ).prev().removeClass( 'active' );

           $( '#cityWorld #city' ).hide();
           $( '#cityWorld #world' ).show();
       }
   );
});

:grin: