Criar um menu personalizado

Qual é minha questão:
Crei um 2 menus personalizados no CC Menu Maker, porém, não sei como usufruir dos códigos e colocá-los no lugar certo.
Recentemente vi um tutorial que ensinava como, mas este era só para a versão PHPBB3.

Queria saber se tem alguma linha que eu possa usar e criar o widget na versão PHPBB2.


Agreadecido.



Endereço do meu fórum:
http://specialforces.foruns.com.pt

Versão do fórum:
PHPBB2

Cara, não entendi muito sua questão Você quer um menu igual a o CC Menu Maker pra versão PHPBB2 ?

Sim, exatamente. Porém, só pude acompanhar um tutorial que apresentasse uma linha para a versão PHPBB3...

No caso, seria esse o tutorial: http://spdesign.ativoforum.com/t3522-tutorial-adiciocando-um-novo-menu-do-forum-css-menu-maker?highlight=menu+phpbb2

Olá!
O senhor deve desenvolver o menu neste site: http://cssmenumaker.com/builder/357575

Desenvolvendo o menu maker, me envie o HTML e o CSS do mesmo para que eu possa lhe ensinar a instala-lo.

Até mais.

Olá. Aqui vai os códigos dos dois menus. Obrigado pela ajuda.

Menu 1:

HTML

Código:

<div id='cssmenu'>
<ul>
  <li><a href='http://specialforces.foruns.com.pt/'><span>Início</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/memberlist'><span>Membros</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/search'><span>Buscar</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/register'><span>Registrar-se</span></a></li>
  <li class='last'><a href='http://specialforces.foruns.com.pt/login'><span>Entrar</span></a></li>
</ul>
</div>

CSS

Código:

#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);}


#cssmenu > ul > li {
    float: left;
    margin-left: 15px;
    position: relative;
}

#cssmenu > ul > li > a {
    color: rgb(160,160,160);
    font-family: Verdana, 'Lucida Grande';
    font-size: 15px;
    line-height: 70px;
    padding: 15px 20px;
-webkit-transition: color .15s;
  -moz-transition: color .15s;
    -o-transition: color .15s;
        transition: color .15s;
}

#cssmenu > ul > li > a:hover {color: rgb(250,250,250); }


#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
  -moz-transition: all .3s .1s;
    -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
}

#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}

#cssmenu > ul ul > li { position: relative;}

#cssmenu ul ul a{
    color: rgb(50,50,50);
    font-family: Verdana, 'Lucida Grande';
    font-size: 13px;
    background-color: rgb(250,250,250);
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
  -moz-transition: background-color .1s;
    -o-transition: background-color .1s;
        transition: background-color .1s;
}

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}


#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
  -moz-transition: all .3s;
    -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}


#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}


#cssmenu ul ul a:hover{
    background-color: rgb(205,44,36);
    color: rgb(240,240,240);
}


Menu 2:

HTML

Código:

<div id='cssmenu'>
<ul>
  <li><a href='http://specialforces.foruns.com.pt/'><span>Início</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/search'><span>Buscar</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/memberlist'><span>Membros</span></a></li>
  <li class='has-sub last'><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile'><span>Profile</span></a>
      <ul>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=avatars'><span>Avatar</span></a></li>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=preferences'><span>Preferências</span></a></li>
        <li class='last'><a href='http://specialforces.foruns.com.pt/privmsg?folder=inbox'><span>MPs</span></a></li>
      </ul>
  </li>
</ul>
</div>

CSS

Código:

#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);}


#cssmenu > ul > li {
    float: left;
    margin-left: 15px;
    position: relative;
}

#cssmenu > ul > li > a {
    color: rgb(160,160,160);
    font-family: Verdana, 'Lucida Grande';
    font-size: 15px;
    line-height: 70px;
    padding: 15px 20px;
-webkit-transition: color .15s;
  -moz-transition: color .15s;
    -o-transition: color .15s;
        transition: color .15s;
}

#cssmenu > ul > li > a:hover {color: rgb(250,250,250); }


#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
  -moz-transition: all .3s .1s;
    -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
}

#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}

#cssmenu > ul ul > li { position: relative;}

#cssmenu ul ul a{
    color: rgb(50,50,50);
    font-family: Verdana, 'Lucida Grande';
    font-size: 13px;
    background-color: rgb(250,250,250);
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
  -moz-transition: background-color .1s;
    -o-transition: background-color .1s;
        transition: background-color .1s;
}

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}


#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
  -moz-transition: all .3s;
    -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}


#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}


#cssmenu ul ul a:hover{
    background-color: rgb(205,44,36);
    color: rgb(240,240,240);
}


Olá!
Aceda a Folha de Estilo CSS:

Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Código:

Código:

#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);}


#cssmenu > ul > li {
    float: left;
    margin-left: 15px;
    position: relative;
}

#cssmenu > ul > li > a {
    color: rgb(160,160,160);
    font-family: Verdana, 'Lucida Grande';
    font-size: 15px;
    line-height: 70px;
    padding: 15px 20px;
-webkit-transition: color .15s;
  -moz-transition: color .15s;
    -o-transition: color .15s;
        transition: color .15s;
}

#cssmenu > ul > li > a:hover {color: rgb(250,250,250); }


#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
  -moz-transition: all .3s .1s;
    -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
}

#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}

#cssmenu > ul ul > li { position: relative;}

#cssmenu ul ul a{
    color: rgb(50,50,50);
    font-family: Verdana, 'Lucida Grande';
    font-size: 13px;
    background-color: rgb(250,250,250);
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
  -moz-transition: background-color .1s;
    -o-transition: background-color .1s;
        transition: background-color .1s;
}

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}


#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
  -moz-transition: all .3s;
    -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}


#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}


#cssmenu ul ul a:hover{
    background-color: rgb(205,44,36);
    color: rgb(240,240,240);
}

e Valide!

Aceda a Gestão dos códigos JavaScript:

Painel de Controle Módulos HTML e JavaScript Gestão dos códigos JavaScript

Código:

Código:

jQuery(document).ready(function(){if(jQuery('#logout').length){var m="<div id='cssmenu'>
<ul>
  <li><a href='http://specialforces.foruns.com.pt/'><span>Início</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/search'><span>Buscar</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/memberlist'><span>Membros</span></a></li>
  <li class='has-sub last'><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile'><span>Profile</span></a>
      <ul>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=avatars'><span>Avatar</span></a></li>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=preferences'><span>Preferências</span></a></li>
        <li class='last'><a href='http://specialforces.foruns.com.pt/privmsg?folder=inbox'><span>MPs</span></a></li>
      </ul>
  </li>
</ul>
</div>"}else{var m="<div id='cssmenu'>
<ul>
  <li><a href='http://specialforces.foruns.com.pt/'><span>Início</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/search'><span>Buscar</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/memberlist'><span>Membros</span></a></li>
  <li class='has-sub last'><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile'><span>Profile</span></a>
      <ul>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=avatars'><span>Avatar</span></a></li>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=preferences'><span>Preferências</span></a></li>
        <li class='last'><a href='http://specialforces.foruns.com.pt/privmsg?folder=inbox'><span>MPs</span></a></li>
      </ul>
  </li>
</ul>
</div>"};jQuery('.linklist.navlinks').replaceWith(m)});

e Salve!

Até mais.

Olá. Fiz todos os procedimentos, mas não deu certo. ;/

Olá,
Substitua o JavaScript por este:

Código:

jQuery(document).ready(function(){if(jQuery('#logout').length){var m="<div id='cssmenu'>
<ul>
  <li><a href='http://specialforces.foruns.com.pt/'><span>Início</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/search'><span>Buscar</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/memberlist'><span>Membros</span></a></li>
  <li class='has-sub last'><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile'><span>Profile</span></a>
      <ul>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=avatars'><span>Avatar</span></a></li>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=preferences'><span>Preferências</span></a></li>
        <li class='last'><a href='http://specialforces.foruns.com.pt/privmsg?folder=inbox'><span>MPs</span></a></li>
      </ul>
  </li>
</ul>
</div>"}else{var m="<div id='cssmenu'>
<ul>
  <li><a href='http://specialforces.foruns.com.pt/'><span>Início</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/search'><span>Buscar</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/memberlist'><span>Membros</span></a></li>
  <li class='has-sub last'><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile'><span>Profile</span></a>
      <ul>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=avatars'><span>Avatar</span></a></li>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=preferences'><span>Preferências</span></a></li>
        <li class='last'><a href='http://specialforces.foruns.com.pt/privmsg?folder=inbox'><span>MPs</span></a></li>
      </ul>
  </li>
</ul>
</div>"};jQuery('.mainmenu').replaceWith(m)});

* Não esqueça de marcar a opção "Em todas as páginas"!

Até mais.

Olá!
O senhor deve desenvolver o menu neste site: http://cssmenumaker.com/builder/357575

Desenvolvendo o menu maker, me envie o HTML e o CSS do mesmo para que eu possa lhe ensinar a instala-lo.

Até mais.

Olá, funcionou aqui, obrigado.

Queria fazer uma pergunta: tem como colocar 2 menus, um para convidados e um outro para membros conectados?

Olá!
Opa, esqueci disso, desculpe amigão! Aqui está, substitua o JS por este:

Código:

jQuery(document).ready(function(){if(jQuery('#logout').length){var m="<div id='cssmenu'>
<ul>
  <li><a href='http://specialforces.foruns.com.pt/'><span>Início</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/search'><span>Buscar</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/memberlist'><span>Membros</span></a></li>
  <li class='has-sub last'><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile'><span>Profile</span></a>
      <ul>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=avatars'><span>Avatar</span></a></li>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=preferences'><span>Preferências</span></a></li>
        <li class='last'><a href='http://specialforces.foruns.com.pt/privmsg?folder=inbox'><span>MPs</span></a></li>
      </ul>
  </li>
</ul>
</div>"}else{var m="<div id='cssmenu'>
<ul>
  <li><a href='http://specialforces.foruns.com.pt/'><span>Início</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/memberlist'><span>Membros</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/search'><span>Buscar</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/register'><span>Registrar-se</span></a></li>
  <li class='last'><a href='http://specialforces.foruns.com.pt/login'><span>Entrar</span></a></li>
</ul>
</div>"};jQuery('.mainmenu').replaceWith(m)});

Até mais.

Olá! Tudo certo, funcionou, porém, tem só um probleminha, ficou múltiplos menus:



Obrigado.

Olá!

Acabo de verificar e o código que eu te passei não foi colocado em seu fórum. Mantenha o código ativo para que eu possa encontrar o erro.

Até mais.

Olá! Já está ativo.

Olá,
Faça o seguinte, eu preciso que o senhor apague todos os JavaScripts que envolva este menu Maker, parece que há um código que está fazendo que o mesmo repita, enfim, preciso que delete todos os JavaScript que envolva o Menu maker, e em seguida adicione este código:

Código:

jQuery(document).ready(function(){if(jQuery('#logout').length){var m="<div id='cssmenu'>
<ul>
  <li><a href='http://specialforces.foruns.com.pt/'><span>Início</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/search'><span>Buscar</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/memberlist'><span>Membros</span></a></li>
  <li class='has-sub last'><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile'><span>Profile</span></a>
      <ul>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=avatars'><span>Avatar</span></a></li>
        <li><a href='http://specialforces.foruns.com.pt/profile?mode=editprofile&page_profil=preferences'><span>Preferências</span></a></li>
        <li class='last'><a href='http://specialforces.foruns.com.pt/privmsg?folder=inbox'><span>MPs</span></a></li>
      </ul>
  </li>
</ul>
</div>"}else{var m="<div id='cssmenu'>
<ul>
  <li><a href='http://specialforces.foruns.com.pt/'><span>Início</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/memberlist'><span>Membros</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/search'><span>Buscar</span></a></li>
  <li><a href='http://specialforces.foruns.com.pt/register'><span>Registrar-se</span></a></li>
  <li class='last'><a href='http://specialforces.foruns.com.pt/login'><span>Entrar</span></a></li>
</ul>
</div>"};jQuery('.mainmenu').replaceWith(m)});

Até mais.

Olá, não entendi. Tenho que deletar o Javascript que adicionei anteriormente para criá-lo e adicionar este ou simplesmente substituí-lo?

Olá!
Há possibilidades de haver algum outro código que deve estar multiplicando está função, não entendi o porque do código estar gerando este bug, o senhor já verificou se há outro código JS?

Até mais.

Olá, o único como java ativo daqui é do "copyright"! Não seria algum conflito gerado pelo CSS?

Obrigado.