Menu tipo essa

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Menu tipo essa

Mensagem por _DrAgOnPrO_ em 21/03/13, 02:08 pm

Qual é minha questão:
Olá eu andei vendo esse menu deste forum e será que teria como fazer um pelo menos parecido com o dele:  http://narutorpgstorm.ultimaterpg.net/forum

Endereço do meu fórum:
http://narutovirus.ativoforum.com

Versão do fórum:
PUNBB


Última edição por _DrAgOnPrO_ em 21/03/13, 02:45 pm, editado 1 vez(es)
avatar

_DrAgOnPrO_
Nível 9

Masculino
Inscrito dia : 05/02/2013
Mensagens : 167
Pontos Ativos : 231

Ver perfil do usuário http://narutovirus.ativoforum.com

Resolvido Re: Menu tipo essa

Mensagem por BrunoH. em 21/03/13, 02:09 pm

Olá!
Leia o conteúdo do spoiler:
Spoiler:
- Código a ser utilizado:
O código a ser utilizado será este:
jQuery(document).ready(function(){
jQuery("#page-header .navbar, body table.bodylinewidth tbody tr td.bodyline table tbody tr td a:eq(0), #pun-head #pun-navlinks, #submenu").before("<div class='novomenu'></div>");
jQuery("#page-header .navbar, body table.bodylinewidth tbody tr td.bodyline table tbody tr td a:eq(0), #pun-head #pun-navlinks, #submenu").css({"display":"none"});});
jQuery(document).ready(function(){if(jQuery('#logout').length){var m="HTML_ENTRAR"}else{var m="HTML_SAIR"};jQuery('.novomenu').replaceWith(m)});
Vermelho -> O html do menu que será exibido ao efetuar o login no fórum.
Laranja -> O html do menu que será exibido ao efetuar o logout do fórum.

- Aplicação do código:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
Seta Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

  • Resultado:
    (carregue na imagem para aumentar)

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Menu tipo essa

Mensagem por Gaaratsu em 21/03/13, 02:10 pm

Saudações!

Painel de Controle ► Módulos ► Gestão dos Widgets do fórum

Nome do widget : Você escolhe
Utilizar um table type : Sim


Fonte do widget:
Código:
<style>/* Some stylesheet reset */
#cssmenu2  > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1;
}
#cssmenu2 {
position: absolute;
z-index: 9999;
}
#cssmenu2 a:hover {color:white!important;}
/* The container */
#cssmenu2  > ul {
  display: block;
  position: relative;
  width: 150px;
}

  /* The list elements which contain the links */
  #cssmenu2  > ul li {
      display: block;
      position: relative;
      margin: 0;
      padding: 0;
      width: 150px; 
  }

      /* General link styling */
      #cssmenu2  > ul li a {
        /* Layout */
        display: block;
        position: relative;
        margin: 0;
        border-top: 1px dotted #3a3a3a;
        border-bottom: 1px dotted #1b1b1b;
        padding: 11px 20px;
        width: 110px;

        /* Typography */
        font-family: Helvetica, Arial, sans-serif;
        color: #d8d8d8;
        text-decoration: none;
        text-transform: uppercase;
        text-shadow: 0 1px 1px #000;
        font-size: 13px;
        font-weight: 300;       

        /* Background & effects */
        background: #282828;
      }

      /* Rounded corners for the first link of the menu/submenus */
      #cssmenu2  > ul li:first-child>a {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-top: 0;
      }

      /* Rounded corners for the last link of the menu/submenus */
      #cssmenu2  > ul li:last-child>a {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom: 0;
      }


      /* The hover state of the menu/submenu links */
      #cssmenu2  > ul li>a:hover, #cssmenu2  > ul li:hover>a {
        color: #fff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
        background: #2672C8 !important;
        background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
        background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3);
        background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
        background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
        border-color: transparent;
      }

      /* The arrow indicating a submenu */
      #cssmenu2  > ul .has-sub>a::after {
        content: '';
        position: absolute;
        top: 16px;
        right: 10px;
        width: 0px;
        height: 0px;

        /* Creating the arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #d8d8d8;
      }

      /* The same arrow, but with a darker color, to create the shadow effect */
      #cssmenu2  > ul .has-sub>a::before {
        content: '';
        position: absolute;
        top: 17px;
        right: 10px;
        width: 0px;
        height: 0px;

        /* Creating the arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #000;
      }

      /* Changing the color of the arrow on hover */
      #cssmenu2  > ul li>a:hover::after, #cssmenu2  > ul li:hover>a::after {
        border-left: 4px solid #fff;
      }

      #cssmenu2  > ul li>a:hover::before, #cssmenu2  > ul li:hover>a::before {
        border-left: 4px solid rgba(0, 0, 0, .3);
      }

 
      /* THE SUBMENUS */
      #cssmenu2  > ul ul {
        position: absolute;
        left: 150px;
        top: -9999px;
        padding-left: 5px;
        opacity: 0;
        /* The fade effect, created using an opacity transition */
        -webkit-transition: opacity .3s ease-in;
        -moz-transition: opacity .3s ease-in;
        -o-transition: opacity .3s ease-in;
        -ms-transition: opacity .3s ease-in;
      }

      /* Showing the submenu when the user is hovering the parent link */
      #cssmenu2  > ul li:hover>ul {
        top: 0px;
        opacity: 1;
      }
</style>
<span style="display:none;" id="link-perfil"><a href="http://narutorpgstorm.ultimaterpg.net/profile.forum?mode=viewprofile&u=-1">Convidado</a></span><div id='cssmenu2'>
<ul>
  <li class='has-sub '><a href='/f1-regras' target='_blank'><span>Regras</span></a>
      <ul>
        <li><a href='/f132-regras-diversas' target='_blank'><span>Diversas</span></a></li>
        <li><a href='/f133-jutsus' target='_blank'><span>Jutsus</span></a></li>
        <li><a href='/f131-regras-de-status' target='_blank'><span>Status</span></a></li>
        <li><a href='/f130-' target='_blank'><span>Personagem</span></a></li>
        <li><a href='/f134-' target='_blank'><span>Batalha</span></a></li>
      </ul>
  </li>
  <li class='has-sub '><a href='/f79-fichas-de-personagem' target='_blank'><span>Fichas</span></a>
      <ul>
        <li><a href='/f4-' target='_blank'><span>Aprovadas</span></a></li>
        <li><a href='/f28-' target='_blank'><span>Prontas</span></a></li>
      </ul>
  </li>
  <li><a href='/f25-area-de-mudancas' target='_blank'><span>Mudanças</span></a></li>
  <li><a href='/f13-konoha' target='_blank'><span>Konoha</span></a></li>
  <li><a href='/f17-suna' target='_blank'><span>Suna</span></a></li>
  <li><a href='/f105-kiri' tarfet='_blank'><span>Kiri</span></a></li>
  <li><a href='/f16-akatsuki' target='_blank'><span>Akatsuki</span></a></li>
</ul>
</div>
Salve.

Até mais. Piscada


GaaratsuAjudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Menu tipo essa

Mensagem por _DrAgOnPrO_ em 21/03/13, 02:45 pm

Eu consegui mas valeu
avatar

_DrAgOnPrO_
Nível 9

Masculino
Inscrito dia : 05/02/2013
Mensagens : 167
Pontos Ativos : 231

Ver perfil do usuário http://narutovirus.ativoforum.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum