Correção de transição

Detalhes da questão

Endereço do fórum: https://testedoword.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá,

Bom, recentemente eu editei e adaptei um código de uma espécie de menu em dropdown, só que os 3 ícones desaparecem de pressa. Gostaria de mudar a opção para que os ícones só aparecessem caso clique no menu, e não quando passa o mouse em cima.



Código HTML:

Código:

 <!-- BEGIN switch_user_logged_in -->
                                      <div class="navbar-user">
                                          <div class="is-normal">
                                            <input type="checkbox" href="#" class="user-menu-open" name="user-menu-open" id="user-menu-open" />
                                            <label class="user-menu-open-button" for="user-menu-open">
                                              <div class="avatar">
                                                 <script type="text/javascript">
                                                   document.write(_userdata.avatar);
                                                   </script>
                                                
                                              </div>
                                            </label>
                                            <a href="/profile?mode=editprofile" title="Editar o meu perfil" class="user-item blue"><i class="fas fa-user-cog"></i></a>
                                            <a href="/privmsg?folder=inbox" data-status="{PRIVATE_MESSAGE_INFO}" title="{PRIVATE_MESSAGE_INFO}" class="user-item green"><i class="fas fa-envelope"></i></a>
                                            <a href="/login?logout=1" title="Fechar sessão" class="user-item red"><i class="fas fa-sign-out-alt"></i></a>
                                          </div>
                                            <!-- END switch_user_logged_in -->

Código CSS:

Código:

.navbar-user {
    position: absolute;
    right: 400px;
}
 
.navbar-user .is-normal {
    position: absolute;
    top: -15px;
    right: 20px;
}
 
.navbar-user .is-normal .user-menu-open { display: none!important;
    transition-delay: 10s;
}
 
.navbar-user .is-normal .avatar {
    position: relative;
    width: 80px;
    height: 80px;
    background-image: url(https://i.pinimg.com/originals/96/7d/b7/967db783e02abd15bdb5c21e5207af29.jpg);
    padding: 7px;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: 0 2px 3px rgba(0,0,0,0.8), 0 0 2px rgb(0,0,0);
    border: none;
    z-index: 1;
}
 
.navbar-user .is-normal .avatar img {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 0px;
    left: 0px;
}
 
.is-normal .user-item {
    background: #EEEEEE;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    margin-left: -30%;
    position: absolute;
    color: #FFFFFF!important;
    text-align: center;
    font-size: 20px;
    padding-top: 15px;
    -webkit-transform: translate3d(5px, -65px, 0);
    transform: translate3d(5px, -65px, 0);
    -webkit-transition: -webkit-transform ease-out 200ms;
    transition: -webkit-transform ease-out 200ms;
    transition: transform ease-out 200ms;
    transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
 
.is-normal .user-item:hover { background-color: #FFF!important; }

.is-normal .user-menu-open:hover ~ .user-item:nth-child(3) {
  transition-duration: 280ms;
  -webkit-transition-duration: 280ms;
  -webkit-transform: translate3d(5px, -135px, 0);
  transform: translate3d(5px, -135px, 0);
}
 
.is-normal .user-menu-open:hover ~ .user-item:nth-child(4) {
  transition-duration: 180ms;
  -webkit-transition-duration: 180ms;
  -webkit-transform: translate3d(-55px, -135px, 0);
  transform: translate3d(-55px, -135px, 0);
}
 
.is-normal .user-menu-open:hover ~ .user-item:nth-child(5) {
  transition-duration: 380ms;
  -webkit-transition-duration: 380ms;
  -webkit-transform: translate3d(65px, -135px, 0);
  transform: translate3d(65px, -135px, 0);
}
 
.is-normal .user-item.blue {
  background-color: #669AE1;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
 
.is-normal .user-item.blue:hover {
  color: #669AE1!important;
  text-shadow: none;
}
 
.is-normal .user-item.green {
  background-color: #70CC72;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
 
.is-normal .user-item.green:hover {
  color: #70CC72!important;
  text-shadow: none;
}
 
.is-normal .user-item.red {
  background-color: #FE4365;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
 
.is-normal .user-item.red:hover {
  color: #FE4365!important;
  text-shadow: none;
}
 
.user-item[data-status*="Nova"]:after {
    content: '';
    width: 7px;
    height: 7px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 25%;
    right: 20%;
}
 
.user-nav {
    background-color: rgba(0,0,0,.3);
    position: relative;
    width: auto;
    min-width: 160px;
    font-size: 15px;
    height: 50px;
    padding: 13px;
    cursor: pointer;
}
.user-nav:hover { background-color: rgba(0,0,0,.5); }

.user-nav i { margin-left: 7px; }
 
.dropdown-submenu {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 0 3px 3px;
    font-size: 14px;
    font-weight: 300;
    padding: 10px 0;
    cursor: pointer;
    margin-top: 14px;
    background-color: #2c353b;
}
 
.dropdown-submenu a {
    color: #fff;
    font-size: 1.4rem;
    display: block;
    padding: 5px;
}
.dropdown-submenu a:hover { background-color: rgba(0,0,0,.3); }
 
.user-nav > .dropdown-submenu { display: block; }
.user-nav:hover > .dropdown-submenu { display: block; }

Conta teste:

Nome: Equipe FdF
Senha: teste123

Up...

Olá,

Crie um novo código JavaScript com investimento Em todas as páginas com o código abaixo

Código:

  var clique = document.getElementById("user-menu-open");
  var loginOculto = document.getElementById("options-perfil-id");

clique.onclick = function (e) {
    e.preventDefault();
    loginOculto.classList.toggle('toggleLogin');
};


Substitua o HTML por esse

https://pastebin.com/UfgzbjLh

Depois substitua o CSS por esse

https://pastebin.com/SjkYzxK6

Até mais!

Olá,

Fiz tudinho, e acho que ficou meio bugado, o que pode ter sido?

Olá,

Perdão, passei o CSS errado, substitua por esse

https://pastebin.com/iJQZKJKv

Até mais!

Olá,

Arrumou a posição dos ícones, mas a função de clicar para aparece-los não está pegando.

Olá,

Substitua o HTML por esse e exclua o código JS passado anteriormente

https://pastebin.com/5tizaAiE

Até mais!

Olá,

Agora resultou, muito obrigado! Pode fechar.