Sub-menu de login

Detalhes da questão

Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Descrição

Bom, tenho essa caixa de login: http://prntscr.com/glpqc7
Gostaria que ela ficasse como um sub-menu ao clicar em login junto com uma setinha :before
Código que uso:

Código:

<div id="inboxShek" class="caixa" name="topic_109026">
          
   <table>
                 
      <tbody>
            
         <tr>
                         
            <td class="bgWhite">
                          
               <form action="/login" method="post" name="form_login">
                                   
                  <div class="blourpShek_box">
                                        
                     <h2>
                          Formulário de Login 
                     </h2>
                                        
                     <p>
                          Digite os dados da sua conta no formulário abaixo. 
                     </p>
                                            
                     <div class="groupsField">
                                                <dd style="height: 30px;background: #efefef;"><span class="icon"><em class="fa fa-users"></em></span><input type="text" tabindex="1" name="username" maxlength="40" value="" placeholder="Usuário" class="inputbox" /></dd>                    <dd style="height: 30px;background: #efefef;"><span class="icon"><em class="fa fa-lock"></em></span><input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" placeholder="********" class="inputbox" /></dd>                <dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" checked="checked" class="radio" /> Conexão automática</label></dd>                    <br />                    <dd><input class="buttonConn" type="submit" name="login" value="Conectar-se" /></dd>                   
                     </div>
                                      
                  </div>
                             
               </form>
                            
            </td>
                         
            <td class="messagShek">
                                
               <div class="boxShek" align="center">
                                     
                  <div class="blourpShek_box">
                                            
                     <h2>
                          CONEXÃO COM SUA CONTA 
                     </h2>
                                            
                     <p>
                          Bem-vindo ao fórum do Ultimate Life RP! Para participar das discussões, você precisa conectar-se usando um usuário e senha! Inscreva-se e mantenha-se por dentro das novidades. Para mais informações contate um administrador in-game. 
                     </p>
                                         <br />                  <a href="/register" class="buttonLink"><em class="fa fa-users"></em> Cadastrar-me!</a>                 
                  </div>
                                   
               </div>
                            
            </td>
                       
         </tr>
                
      </tbody>
         
   </table>
</div>

JS:

Código:

$(document).ready(function(){
  var idCrowleys = '#fundo, #inboxShek';
  var menuCrow = 'a#user_link[href="/login"]:eq(0)';
  $(menuCrow).click(function() {
      event.preventDefault();
      $(idCrowleys).show("slow").delay(3000);
  });
  $('#fundo').click(function() {
      $(idCrowleys).hide();
  });
});

OBs: O JS só funciona no portal e indice, se possível queria para todas as páginas.

Seria possível ?

Creio que o senhor poderá usar esse tutorial que será lançado em breve:

Código:

/*globals jQuery, _userdata*/
(function ($) {
  'use strict';

  var $loginPopover;

  $(function () {

    if (_userdata["session_logged_in"] !== 0) {
      return;
    }

    $('a[href="/login"]').on('click', function (event) {

      event.preventDefault();
      event.stopPropagation();

      if ($('.fa-popover-login').length > 0) {
        $loginPopover.remove();
        return;
      }

      var $this = $(this);

      /**
      * Variáveis de posição:
      */
      var pos = $this.offset();
      var posY = pos.top;
      var posX = pos.left;
      var mgnL = $this.innerWidth() / 2;
      var mgnT = $this.innerHeight();

      $loginPopover = $([
        '<div class="fa-popover-login">',
        '  <div class="fa-popover-intro">',
        '    <span class="h3">Login</span>',
        '  </div>',
        '  <form action="/login" method="post" name="form_login">',
        '    <div class="input-group">',
        '      <label for="username">Usuário:</label>',
        '      <input type="text" name="username" id="username" maxlength="40" />',
        '      <label for="password">Senha:</label>',
        '      <input type="password" id="password" name="password" maxlength="25" />',
        '    </div>',
        '    <input type="checkbox" name="autologin" id="autologin" checked="checked" />',
        '    <label for="autologin">Conexão automática.</label>',
        '    <footer>',
        '      <input type="submit" name="login" value="Conectar-se" class="submit-btn" />',
        '      <a href="/profile?mode=sendpassword">Esqueci a senha</a>',
        '    </footer>',
        '  </form>',
        '</div>',
      ].join('\n'))
        .appendTo('body')
          .css({
            top: posY + 'px',
            left: posX + 'px',
            marginLeft: mgnL + 'px',
            marginTop: mgnT + 'px',
            position: 'absolute',
            transform: 'translateX(-50%)'
          })
            .on('click', function (event) {
              event.stopPropagation();
            })
      ;
    });

    $(document).on('click', function (event) {
      if ($('.fa-popover-login').length > 0) {
        $loginPopover.remove();
      }
    });

    var styles = [
      '.fa-popover-login {',
      '  background-color: #fff;',
      '  -webkit-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  -moz-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  -ms-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  -o-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  width: 265px;',
      '  border-radius: 2px;',
      '  padding: 15px;',
      '  border: solid 1px #ddd;',
      '  font-size: 16px;',
      '  z-index: 999999999999999999999999;',
      '  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
      '}',
      '',
      '.fa-popover-login,',
      '.fa-popover-login * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-popover-intro .h3 {',
      '  font-family: "Trebuchet MS", "Segoe UI", Helvetica, "Helvetica Neue", Arial, "Open Sans", Lato, sans-serif;',
      '  font-size: 20px;',
      '  color: #818181;',
      '  border-bottom: solid 0px;',
      '  width: 100%;',
      '  display: block;',
      '  margin: 0px;',
      '}',
      '',
      '.fa-popover-login form {',
      '  margin: 10px -15px;',
      '  padding: 15px;',
      '  margin-bottom: 0px;',
      '  padding-bottom: 0px;',
      '  border-top: solid 1px #ddd;',
      '}',
      '',
      '.fa-popover-login form div.input-group label {',
      '  display: block;',
      '  margin-bottom: 5px;',
      '  color: #656565;',
      '  font-size: 14px;',
      '}',
      '',
      '.fa-popover-login form div.input-group label[for="password"] {',
      '  margin-top: 14px;',
      '}',
      '',
      '.fa-popover-login form div.input-group input {',
      '  display: block;',
      '  width: 100%;',
      '  padding: 5px 10px;',
      '  font-size: 1rem;',
      '  line-height: 1.25;',
      '  color: #464a4c;',
      '  background-color: #fff;',
      '  background-image: none;',
      '  -webkit-background-clip: padding-box;',
      '  background-clip: padding-box;',
      '  border: 1px solid rgba(0,0,0,.15);',
      '  border-radius: 2px;',
      '  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;',
      '  transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;',
      '  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;',
      '  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;',
      '  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;',
      '}',
      '',
      '.fa-popover-login form div.input-group input:focus {',
      '  color: #464a4c;',
      '  background-color: #fff;',
      '  border-color: #5cb3fd;',
      '  outline: 0;',
      '}',
      '',
      '.fa-popover-login label[for="autologin"] {',
      '  margin-top: 15px;',
      '  display: inline-block;',
      '}',
      '',
      '.fa-popover-login footer {',
      '  background-color: #ddd;',
      '  padding: 10px;',
      '  margin: -15px;',
      '  margin-top: 15px;',
      '  position: relative;',
      '}',
      '',
      '.fa-popover-login footer a {',
      '  border-bottom: solid 1px transparent;',
      '  color: #39c;',
      '  position: absolute;',
      '  right: 11px;',
      '  top: 47%;',
      '  -webkit-transform: translateY(-50%);',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '}',
      '',
      '.fa-popover-login footer a:hover {',
      '  border-color: #39c;',
      '}',
      '',
      '.fa-popover-login footer input {',
      '  border: none;',
      '  background-color: #3072ab;',
      '  color: #fff;',
      '  cursor: pointer;',
      '  padding: 4px 8px;',
      '}',
      '',
      '.fa-popover-login footer input:hover {',
      '  background-color: #275e8c;',
      '}',
      '',
      '.fa-popover-login::before {',
      '  content: "";',
      '  position: absolute;',
      '  height: 15px;',
      '  width: 15px;',
      '  background-color: #fff;',
      '  top: -2px;',
      '  left: 50%;',
      '  -webkit-transform: rotate(45deg) translateX(-50%);',
      '  -moz-transform: rotate(45deg) translateX(-50%);',
      '  -ms-transform: rotate(45deg) translateX(-50%);',
      '  -o-transform: rotate(45deg) translateX(-50%);',
      '  transform: rotate(45deg) translateX(-50%);',
      '  border: solid 1px transparent;',
      '  border-left: solid 1px #ddd;',
      '  border-top: solid 1px #ddd;',
      '}',
    ].join('\n');

    $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');
  });
}(jQuery));

Invista em todas as páginas e abandone o antigo JavaScript.
PS: Não é legal usar a "setinha" nesse tipo de popup de login. Esse, feito pelo Shek, é útil como popup, mas não como popover.

Certo, dá para deixa-lo semelhante a este:
https://prnt.sc/glpqc7
Pelo menos a parte de login

UP

UP

UP

É o melhor que conseguimos:

Código:

.fa-popover-login {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 400px;
    padding: 0;
}

.fa-popover-login::before {
    display: none;
}


.fa-popover-intro {
    padding: 1rem 1rem 0.5rem ;
    position: relative;
}

.fa-popover-intro::before {
    content: ' ';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 1px;
    background-color: #0076b1;
}

.fa-popover-login > form {
    margin: 0;
    border: none;
}

.fa-popover-login > form::before {
    content: 'Digite os dados da sua conta no formulário abaixo.';
    font-size: 12px;
    margin-bottom: 1rem;
    display: block;
}

.fa-popover-login > form > div.input-group {
    overflow: hidden;
}

.fa-popover-login > form > div.input-group > label {
    text-indent: -9999px;
    overflow: hidden;
    height: 32px;
    width: 32px;
    float: left;
    margin: 0 0 1rem !important;
    background-color: #efefef;
    position: relative;
}

.fa-popover-login > form > div.input-group > label::after {
    display: block;
    text-indent: 0;
    font-family: FontAwesome;
    line-height: 32px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}

.fa-popover-login > form > div.input-group > label[for="username"]::after {
    content: "\f0c0";
}

.fa-popover-login > form > div.input-group > label[for="password"]::after {
    content: "\f023";
}

.fa-popover-login > form > div.input-group > input {
    background-color: #efefef;
    float: right;
    width: calc(100% - 32px);
    margin: 0 0 1rem
}

.fa-popover-login > form > label[for="autologin"] {
    margin-top: 0;
}

.fa-popover-login > form > footer {
    background-color: transparent;
    box-shadow: none;
    padding: 0 0 1rem;
    margin: 1rem 0 0;
    height: auto;
}

.fa-popover-login > form > footer > a {
    right: 0;
    bottom: 1rem;
    margin: 0;
    top: auto;
    transform: none;
}

Bom Kyo, era pra ser um sub-menu, não dá para deixa-lo largo como o meu antigo ?

Você quer um submenu ou um popup? Submenus são bem "finos". ._.

Acho que não.
Veja este: http://prntscr.com/gnnqz0
Poderia ser o meu misturado com esse se fosse o caso.

Remova o CSS passado.

Feito.

CSS:

Código:

.fa-popover-login {
    transform: translate(-80%, 30px) !important;
    margin: 0 !important;
    right: 0 !important;
    width: 400px;
    padding: 0;
}
 
.fa-popover-login::before {
    right: 35px;
    left: auto;
}
 
.fa-popover-intro {
    padding: 1rem 1rem 0.5rem ;
    position: relative;
}
 
.fa-popover-intro::before {
    content: ' ';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 1px;
    background-color: #0076b1;
}
 
.fa-popover-login > form {
    margin: 0;
    border: none;
}
 
.fa-popover-login > form::before {
    content: 'Digite os dados da sua conta no formulário abaixo.';
    font-size: 12px;
    margin-bottom: 1rem;
    display: block;
}
 
.fa-popover-login > form > div.input-group {
    overflow: hidden;
}
 
.fa-popover-login > form > div.input-group > label {
    text-indent: -9999px;
    overflow: hidden;
    height: 32px;
    width: 32px;
    float: left;
    margin: 0 0 1rem !important;
    background-color: #efefef;
    position: relative;
}
 
.fa-popover-login > form > div.input-group > label::after {
    display: block;
    text-indent: 0;
    font-family: FontAwesome;
    line-height: 32px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}
 
.fa-popover-login > form > div.input-group > label[for="username"]::after {
    content: "\f0c0";
}
 
.fa-popover-login > form > div.input-group > label[for="password"]::after {
    content: "\f023";
}
 
.fa-popover-login > form > div.input-group > input {
    background-color: #efefef;
    float: right;
    width: calc(100% - 32px);
    margin: 0 0 1rem
}
 
.fa-popover-login > form > label[for="autologin"] {
    margin-top: 0;
}
 
.fa-popover-login > form > footer {
    background-color: transparent;
    box-shadow: none;
    padding: 0 0 1rem;
    margin: 1rem 0 0;
    height: auto;
}
 
.fa-popover-login > form > footer > a {
    right: 0;
    bottom: 1rem;
    margin: 0;
    top: auto;
    transform: none;
}

Estranho...
Veja: http://prntscr.com/gnzh93

No script, mude:

Código:

.appendTo('head');

Por:

Código:

.insertBefore('head > link[rel="stylesheet"]:first');

Perfeito, ultimos detalhes:
Dá para deixar quando aparece igual a esta caixa? http://prntscr.com/gnzvky
O efeito hover que eu estou falando no caso.

UP

UP

Troque por:

Código:

/*globals jQuery, _userdata*/
(function ($) {
  'use strict';

  var $loginPopover;

  $(function () {

    if (_userdata["session_logged_in"] !== 0) {
      return;
    }

    $('a[href="/login"]').on('click', function (event) {

      event.preventDefault();
      event.stopPropagation();

      if ($('.fa-popover-login').length > 0) {
        $loginPopover.slideUp(300, function () {
          $loginPopover.remove();
        });
        return;
      }

      var $this = $(this);

      /**
      * Variáveis de posição:
      */
      var pos = $this.offset();
      var posY = pos.top;
      var posX = pos.left;
      var mgnL = $this.innerWidth() / 2;
      var mgnT = $this.innerHeight();

      $loginPopover = $([
        '<div class="fa-popover-login">',
        '  <div class="fa-popover-intro">',
        '    <span class="h3">Login</span>',
        '  </div>',
        '  <form action="/login" method="post" name="form_login">',
        '    <div class="input-group">',
        '      <label for="username">Usuário:</label>',
        '      <input type="text" name="username" id="username" maxlength="40" />',
        '      <label for="password">Senha:</label>',
        '      <input type="password" id="password" name="password" maxlength="25" />',
        '    </div>',
        '    <input type="checkbox" name="autologin" id="autologin" checked="checked" />',
        '    <label for="autologin">Conexão automática.</label>',
        '    <footer>',
        '      <input type="submit" name="login" value="Conectar-se" class="submit-btn" />',
        '      <a href="/profile?mode=sendpassword">Esqueci a senha</a>',
        '    </footer>',
        '  </form>',
        '</div>',
      ].join('\n'))
        .hide()
          .appendTo('body')
            .slideDown(300)
              .css({
                top: posY + 'px',
                left: posX + 'px',
                marginLeft: mgnL + 'px',
                marginTop: mgnT + 'px',
                position: 'absolute',
                transform: 'translateX(-50%)'
              })
                .on('click', function (event) {
                  event.stopPropagation();
                })
      ;
    });

    $(document).on('click', function (event) {
      if ($('.fa-popover-login').length > 0) {
        $loginPopover.slideUp(300, function () {
          $loginPopover.remove();
        });
      }
    });

    var styles = [
      '.fa-popover-login {',
      '  background-color: #fff;',
      '  -webkit-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  -moz-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  -ms-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  -o-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  width: 265px;',
      '  border-radius: 2px;',
      '  padding: 15px;',
      '  border: solid 1px #ddd;',
      '  font-size: 16px;',
      '  z-index: 999999999999999999999999;',
      '  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
      '}',
      '',
      '.fa-popover-login,',
      '.fa-popover-login * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-popover-intro .h3 {',
      '  font-family: "Trebuchet MS", "Segoe UI", Helvetica, "Helvetica Neue", Arial, "Open Sans", Lato, sans-serif;',
      '  font-size: 20px;',
      '  color: #818181;',
      '  border-bottom: solid 0px;',
      '  width: 100%;',
      '  display: block;',
      '  margin: 0px;',
      '}',
      '',
      '.fa-popover-login form {',
      '  margin: 10px -15px;',
      '  padding: 15px;',
      '  margin-bottom: 0px;',
      '  padding-bottom: 0px;',
      '  border-top: solid 1px #ddd;',
      '}',
      '',
      '.fa-popover-login form div.input-group label {',
      '  display: block;',
      '  margin-bottom: 5px;',
      '  color: #656565;',
      '  font-size: 14px;',
      '}',
      '',
      '.fa-popover-login form div.input-group label[for="password"] {',
      '  margin-top: 14px;',
      '}',
      '',
      '.fa-popover-login form div.input-group input {',
      '  display: block;',
      '  width: 100%;',
      '  padding: 5px 10px;',
      '  font-size: 1rem;',
      '  line-height: 1.25;',
      '  color: #464a4c;',
      '  background-color: #fff;',
      '  background-image: none;',
      '  -webkit-background-clip: padding-box;',
      '  background-clip: padding-box;',
      '  border: 1px solid rgba(0,0,0,.15);',
      '  border-radius: 2px;',
      '  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;',
      '  transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;',
      '  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;',
      '  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;',
      '  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;',
      '}',
      '',
      '.fa-popover-login form div.input-group input:focus {',
      '  color: #464a4c;',
      '  background-color: #fff;',
      '  border-color: #5cb3fd;',
      '  outline: 0;',
      '}',
      '',
      '.fa-popover-login label[for="autologin"] {',
      '  margin-top: 15px;',
      '  display: inline-block;',
      '}',
      '',
      '.fa-popover-login footer {',
      '  background-color: #ddd;',
      '  padding: 10px;',
      '  margin: -15px;',
      '  margin-top: 15px;',
      '  position: relative;',
      '}',
      '',
      '.fa-popover-login footer a {',
      '  border-bottom: solid 1px transparent;',
      '  color: #39c;',
      '  position: absolute;',
      '  right: 11px;',
      '  top: 47%;',
      '  -webkit-transform: translateY(-50%);',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '}',
      '',
      '.fa-popover-login footer a:hover {',
      '  border-color: #39c;',
      '}',
      '',
      '.fa-popover-login footer input {',
      '  border: none;',
      '  background-color: #3072ab;',
      '  color: #fff;',
      '  cursor: pointer;',
      '  padding: 4px 8px;',
      '}',
      '',
      '.fa-popover-login footer input:hover {',
      '  background-color: #275e8c;',
      '}',
      '',
      '.fa-popover-login::before {',
      '  content: "";',
      '  position: absolute;',
      '  height: 15px;',
      '  width: 15px;',
      '  background-color: #fff;',
      '  top: -2px;',
      '  left: 50%;',
      '  -webkit-transform: rotate(45deg) translateX(-50%);',
      '  -moz-transform: rotate(45deg) translateX(-50%);',
      '  -ms-transform: rotate(45deg) translateX(-50%);',
      '  -o-transform: rotate(45deg) translateX(-50%);',
      '  transform: rotate(45deg) translateX(-50%);',
      '  border: solid 1px transparent;',
      '  border-left: solid 1px #ddd;',
      '  border-top: solid 1px #ddd;',
      '}',
    ].join('\n');

    $(['<style type="text/css">', styles, '</style>'].join('\n')).insertBefore('head > link[rel="stylesheet"]:first');
  });
}(jQuery));

Perfeito ,pode dar close.