Botão com efeito dropdown

[wellingtonmelo 8]

Fala pessoal, beleza?

 

Bom, estou desenvolvendo um site de jogos online, em wordpress, basicamente jogos em flash e afins, até ai tudo bem, só que estou com uma dificuldade na hora de mostrar algumas opções de páginas para os usuários cadastrados.

 

Eu usei um plugin pra gerar o cadastro e coloquei pra exibir o nome do usuário quando logado.
Como na imagem abaixo:

Estou puxando esse nome de usuário pelo seguinte código:

<div class="ola-visitante">
<?php global $current_user; if ( isset($current_user) ) { echo $current_user->user_login; }?>
</div>

Eu quero fazer um efeito link, com menu dropdown no nome desse usuário, pois ao passar o mouse quero que exiba algumas opções, como: Favoritos, Pontos, Editar Perfil etc. Um exemplo exato do que quero fazer é aqui no próprio imasters, que ao logarmos aparece o nosso nome de usuário e várias opções aparecem ao clicarmos, como na imagem abaixo:

 

 

Quando o usuário clicar expande as opções:

 

 

Tentei colocar esse código que exibe o nome de usuário dentro de um href e não funcionou. O nome de usuário perdeu a formatação, essa cor branca, que é dada a div que o contém, mas a formatação do href não funcionou, veja o código com o href:

<div class="ola-visitante">
<a href="#"><?php global $current_user; if ( isset($current_user) ) { echo $current_user->user_login; }?></a>
</div>

IMPORTANTE! É possível puxar uma formatação dentro dessa div "ola-visitante" de modo que seja ativado para exibir somente quando o nome de usuário aparecer? ou seja, no estado normal, sem o usuário ter efetuado login não aparecer nada, e só então quando ele logar aparecer o efeito dropdown ao passar o mouse sobre o nome do usuário?

 

Caso alguém queira dar uma olhada no botão de login e o nome do usuário sendo exibido, vou deixar um login de teste aqui:

http://clubejogos.com.br

login: clickviciante

senha: 123456

 

Desde já agradeço por toda e qualquer ajuda!

Abraço.

[L. Henrique 179]

Bem, você mesmo resolveu seu problema ao explicá-lo. Você só precisa adicionar um dropdown (do tamanho que encaixe todas as informações) e dentro desse dropdown, colocar o que você precisa.

Exemplo de teste:

<div class="menu">
   <ul class="usuario">
      <li class="dropdown">
         <ul>
            <li>Foto</li>
            <li>Nome</li>
            <li>Etc</li>
         </ul>
      </li>
   </ul>
</div>

Dentro do dropdown é que você vai chamar informações como Avatar, nome, configurações, perfil, logout, etc.

[wellingtonmelo 8]

Fala L. Henrique, beleza cara?

 

Primeiramente muito obrigado pela sua ajuda, obrigado mesmo! funcionou legal a sua dica.

 

Só tem 2 pontos que acho que não estou fazendo da forma certa. Pode me dar mais uma dica? na verdade duas.

 

Eu usei o mesmo exemplo que você deu, não sei se inseri o código da forma certa, mas funcionou quase que perfeito, usei o código assim:

   <ul class="usuario">
      <li class="dropdown">
         <ul>
           <li><a href="#"><?php global $current_user; if ( isset($current_user) ) { echo $current_user->user_login;}?></a>
                <ul>
                      <li><a href="#">Favoritos</a></li>
                      <li><a href="#">Histórico</a></li>
                      <li><a href="#">Editar Perfil</a></li>                   
                </ul>
           </li>
         </ul>
      </li>
   </ul>

Beleza que não é exibido link ou texto, só que o link é exibido ao passar o mouse onde apareceria o nome do usuário, como na imagem:

 

Existe algum jeito pra não exibir esse link no caso o "#" ?

 

E o segundo ponto, é com relação ao dropdowm ficar por trás do meu menu, eu tentei usar o z-index: 2; como o menu já tem um "z-index: 1;". Mas não funcionou.

 

 

CSS do menu:

 

 

CSS do dropdown:

 

 

 

Devo estar fazendo algo errado mas não sei. Consegue me dar uma solução pra essas duas situações?

 

Caso queira dar uma olhada nos pontos que falei:

http://clubejogos.com.br

login: clickviciante

senha: 123456

 

Obrigado mais uma vez por sua ajuda, abraço!

[L. Henrique 179]

Beleza Wellington?

/* Problema 1 - Anchor sem HREF */

Então, você pode remover os parâmetros href dentro do anchor que ele CONTINUARÁ sendo válido. A única diferença é que, se você quiser que o mouse aparece como pointer, você precisa adicionar a propriedade CSS: cursor: pointer;

 

OBS.: Se não quiser adicionar a propriedade href, também pode ser utilizado o name no lugar.

 

/* Problema 2 - Dropdown atrás de menu */

Esse eu dei uma olhada no site e consegui uma solução. Dentro da sua classe header você possui a propriedade overflow: hidden; bem... Esse tipo de propriedade significa que: Todos os elementos que forem maior que sua extensão, não vão aparecer, pois não há espaço.

 

Considerando que seu dropdown é um elemento filho de header, então não tem como ele quebrar a altura e largura do elemento pai se ele estiver bloqueado por um overflow: hidden.

 

Nesse caso você tem duas opções e elas são:

• Remover a propriedade overflow: hidden; da classe header ou;
• Criar uma div pai para a header (um wrapper, container...) pra header.

A segunda opção da um pouco mais de trabalho, até porque você vai ter que criar nova classe CSS, trabalhar no HTML e tudo mais.

A primeira opção é bem viável. Você não precisa se preocupar com a falta de overflow: hidden; se a sua header tiver uma altura fixa em pixels.

[wellingtonmelo 8]

Opa Henrique, bom demais cara!

 

Direto e claro, muito bom mesmo, sei nem como te agradecer!

 

O menu funcionou perfeitamente, só removi o overflow e pimba!

 

Mas o problema 1 ainda persiste, acho que me expressei mal, eu não queria esconder o "#", mas sim o campo de texto, que fica dentro do href. Eu usei apenas o <a> e não exibe mais o "#" no link, mas ainda sim, ao passar o mouse do lado esquerdo do botão "Cadastre-se | Login", o dropdown aparece, mesmo sem ter nenhum texto dentro do <a>, da pra entender?

 

Por favor, acessa lá, e veja que mesmo sem ter efetuado o login, ao passar o mouse do lado esquerdo do botão cadastre-se, aparece o dropdown. Como nessa imagem:

 

Eu gostaria de remover a possibilidade de passar o mouse ali e aparecer o dropdown, tem alguma solução pra isso?

 

O código está assim:

   <ul class="usuario">
      <li class="dropdown">
         <ul>
           <li><a><?php global $current_user; if ( isset($current_user) ) { echo $current_user->user_login;}?></a>
                <ul>
                      <li><a href="#">Favoritos</a></li>
                      <li><a href="#">Histórico</a></li>
                      <li><a href="#">Editar Perfil</a></li>                   
                </ul>
           </li>
         </ul>
      </li>
   </ul>

Estou fazendo tudo na mão mesmo, mesmo sem ser um profissional na área.

Gratidão por sua ajuda cara, abraço!

[L. Henrique 179]

Pra isso você precisa criar uma condição if. Vou tentar uma solução com o mínimo do PHP que eu vi nos seus comentários, mas tente trabalhar com essa condição.

 

O que precisamos fazer exatamente é fornecer uma propriedade a esse anchor através de uma condição if, ou seja, caso o usuário esteja logado, o anchor recebe display: block;, caso contrário recebe display: none;

 

Talvez uma solução (hardcode):

<?php
   global $current_user;
   if ( isset($current_user) ) {
      echo "<ul class='usuario'><li class='dropdown'><ul><li><a>".if ( isset($current_user) ){ $current_user->user_login; }."</a><ul><li><a href='#'>Favoritos</a></li><li><a href='#'>Histórico</a></li><li><a href='Editar Perfil'></a></li></ul></li></ul></li></ul>"
   } else {
      echo "<ul class='usuario' style='display: none !important;'><li class='dropdown'><ul><li><a>".if ( isset($current_user) ){ $current_user->user_login; }."</a><ul><li><a href='#'>Favoritos</a></li><li><a href='#'>Histórico</a></li><li><a href='Editar Perfil'></a></li></ul></li></ul></li></ul>"
?>

Bem, você pode criar dessa forma como acima, mas isso é péssimo (html dentro de echo), então vamos ao que interessa de verdade:

 

Talvez outra solução (mais clean):

<?php global $current_user; if ( isset($current_user) ) : ?>   
   <ul class="usuario">
      <li class="dropdown">
         <ul>
            <li><a><?php global $current_user; if ( isset($current_user) ) { echo $current_user->user_login;}?></a>
               <ul>
                  <li><a href="#">Favoritos</a></li>
                  <li><a href="#">Histórico</a></li>
                  <li><a href="#">Editar Perfil</a></li>                   
               </ul>
            </li>
         </ul>
      </li>
   </ul>
<?php endif; ?>

[wellingtonmelo 8]

Opa Henrique, cara, você ta literalmente salvando esse meu projeto com suas dicas.

 

O modelo que você passou não funcionou, não teve alteração nenhuma, o anchor continuou ativo mesmo sem o visitante estar logado, como na imagem:

 

 

Eu vi sua resposta ontem mesmo, poucos minutos após você responder. Mas passei o dia estudando sobre a condição if, infelizmente ainda não tive nenhum sucesso. Sou leigo quando o assunto é programação em si.

 

O que eu gostaria, é de uma condição que: Visitante não estando logado, a div dropdown receba display:none, com o visitante logado, display:block; , exatamente como você citou anteriormente.

 

Pode ser uma solução em javascript mesmo, funcionando ta bom, pois to preso a isso, e tem muita coisa pra ser feita no site ainda.

 

Vi algo a respeito nesse tópico no stackoverflow, mas não sei modificar pro meu caso.

 

Gratidão por sua ajuda!

[L. Henrique 179]

Bora continuar resolvendo então!

Bem, existem alguns statements em jQuery que podem verificar se o elemento possui conteúdo, texto ou qualquer outra coisa dentro dele e, caso tenha uma condição, você pode definir propriedades CSS pro elemento que quiser.

 

Você vai precisar criar um span ao redor do nome de usuário (ou uma div, ou qualquer container/wrapper). O código deve ficar assim:

<div class="wrapper">
   <div class="nome"> <!-- Aqui entra o PHP pra exibir o nome do usr --> </div>
   <ul class="dropdown">
      <li></li>
      <!-- ... -->
   </ul>
</div>

Feito isso, você pode criar uma condição JS que, se a div com classe nome estiver vazia, a classe dropdown recebe display none.

Ex.:

$(document).ready(function() {
   if ( $('.nome').text().length == 0 ) {
      $('.dropdown').css('display','none');
   } 
});

Bem, o código fala por si próprio, ele só pega a variável com classe .nome e verifica se existe comprimento de texto dentro dele. Então se o comprimento for == 0 (Igual), a variável com classe dropdown recebe um display none através do .CSS

Se quiser ver esse código funcionando, pode testá-lo no JSFiddle. Lá dentro você vai ver um texto: "Apague isso e clique em RUN". Apague todo o conteúdo dentro da div, deixando ela dessa forma: <div class="sem-conteudo"></div>.

[wellingtonmelo 8]

Ae!!! Perfeito Henrique!

 

Funcionou perfeitamente, agora só preciso dar uma estilização para o dropdown, e continuar a batalha!

 

Gratidão a você amigo! Abraço!