Como criar esse menu

Qual é minha questão:
Como criar um menu no widget dessa maneira:
https://i.servimg.com/u/f49/14/99/55/84/como_c10.jpg

Fórum onde ví: http://narutorpgstorm.ultimaterpg.net/forum

Endereço do meu fórum:
http://maniaonline.foroactivo.com.mx

Versão do fórum:
PUNBB

Creio que seja no Css Menu Maker.
Caso queira o link : http://cssmenumaker.com/

~DarkCheats escreveu:Creio que seja no Css Menu Maker.
Caso queira o link : http://cssmenumaker.com/

Olá,

È não, fiz o teste e não resultou.

Tente Esse Codigo ,

CSS -

Código:


ul.submenu {
display: none;
float: left;
position: absolute;
top: 1em;
left:0;
right:0;
width: 12em;
z-index: 999;
}

Css ² -

Código:


.flutuante {
position:fixed;
bottom:500px;
right:20px;
}

Agora Aceda Em Configuração Do Portal E Crie Um Novo Widgets |

Adicione No Widget esse Codigo

Código:

<div class="flutuante"><div style="position:fixed; bottom:500px; left:0px; top:0px;">
  <ul class="ulmenu" id="nav"><li class="limenu"><a href="link1" class="off" onmouseover="className='on'" onmouseout="className='off'">link1</a></ul>
 <ul class="ulmenu" id="nav">
    <li class="limenu"><a href="link2" class="off" onmouseover="className='on'" onmouseout="className='off'">link2</a></ul>
<ul class="ulmenu" id="nav">
 <li class="limenu"><a href="link3" class="off" onmouseover="className='on'" onmouseout="className='off'">link3</a> 
  <ul class="ulmenu" id="nav">
            <li class="limenu"><a href="sublink3" class="off" onmouseover="className='on'" onmouseout="className='off'">sublilnk3</a></li>
            <li class="limenu"><a href="sublink3-2" class="off" onmouseover="className='on'" onmouseout="className='off'">sublink3-2</a></li>
            <li class="limenu"><a href="sublink3-3" class="off" onmouseover="className='on'" onmouseout="className='off'">sublink3-3</a></li>
      </ul></li>
</div></div>

Resulta ?? Se Sim Clique No '+'

Não resulta.

Crie Um Widget E Coloque Esse Codigo , -

Código:

<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>

OnlyFast escreveu:Crie Um Widget E Coloque Esse Codigo , -

Código:

<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>

Olá, não resultou.

Olá Camaro !

Entre nesse site : http://cssmenumaker.com/css-flyout-menus
Escolha seu menu desejado , crie ele , depois , deixe aqui no tópico , o CSS e o HTML dele .

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&amp;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.

Assombrosamente.

Podem bloquear.