Eu gostaria de ter um Menu CSS Maker

Não sou muito bom e sou novata,
Eu queria botar esse CSS Menu Maker.
http://cssmenumaker.com/menu/3d-navigation-bar
Tem como meus senhores?
Eu sei que tem um tutorial disso e eu não sei mexer ainda com códigos,
Dá você me mandar com javascript pronto com este menu senhores?
Agradeço,
Tem como @Fraise ?

Olá @Mywhalei!

Vamos lá então:
Painel de Controle ->> Visualização ->> Cores ->> Folha de estilos CSS

Adicione o seguinte código:

Código:

#cssmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px; }
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#ff0000; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }


#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); }
#cssmenu{border-color:#000;}
#cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#444;}
#cssmenu > ul > li > a:hover{background:#111;}

Agora vamos em:
Painel de Controle ->> Módulos ->> Gestão dos códigos Javascript

E adicione este código.

Código:

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="<div id='cssmenu'>
<ul>
  <li class='active'><a href='forum'><span>Forum</span></a></li>
  <li><a href='http://mebelay.forumeiros.com/'><span>Portal</span></a></li>
  <li><a href='#'><span>Faq</span></a></li>
  <li><a href='http://mebelay.forumeiros.com/search'><span>Pesquisar</span></a></li>
  <li><a href='http://mebelay.forumeiros.com/memberlist'><span>Membros</span></a></li>
  <li><a href='http://mebelay.forumeiros.com/profile?mode=editprofile'><span>Perfil</span></a></li>
  <li><a href='http://mebelay.forumeiros.com/privmsg?folder=inbox'><span>Mensagem Privada</span></a></li>
  <li class='last'><a href='http://mebelay.forumeiros.com/login?logout=1&tid=2a8e6f2fcdd6afc8f9f7295b920c9e8b&key=95e583'><span>Sair</span></a></li>
</ul>
</div>"}else{var m="<ul>
  <li class='active'><a href='forum'><span>Forum</span></a></li>
  <li class='last'><a href='http://mebelay.forumeiros.com/login'><span>Login</span></a></li>"};jQuery('.novomenu').replaceWith(m)});

O investimento deve ser em todas as páginas.

Deseja alguma alteração no menu?

Cumprimentos.
Fraise

Não funcionou @Fraise,

Eu botei o CSS também e não funcionou.
Meu fórum: www.mebelay.forumeiros.com
Tchau,

Olá @Mywhalei!
Aceda a:
Painel de Controle ->> Módulos ->> Gestão dos códigos Javascript

Em "Habilitar o gerenciamento dos códigos JavaScript" marque Sim.

Cumprimentos.
Fraise

Eu falei a imagem lá cima que está ativado.

Olá!

Infelizmente não estou a conseguir ver as imagens que a senhora está a enviar.
Poderia verificar se colocou o Investimento em "Todas as páginas"?

Cumprimentos.
Fraise

Está em investimento em todas as páginas.
E não funcionou
@Fraise,

Olá novamente!

Eu testei aqui e funcionou na perfeição. Queira tentar novamente, pode ter errado alguma coisa.

Cumprimentos.
Fraise

@Fraise,
Me mande este código hospedado em bloco de notas ou hospede em pastebin.com
É uma problema do meu computador,
o código está misturado.
Hospede lá.
Grata
JQUERY

Olá @Mywhalei
Tente adicionar este código de menu com submenu feito em HTML5 e CSS, em seu template overall_header.

Painel de Controle -> Visualização -> Templates -> Geral -> overall_header

Código:

<style>
<div class="menu-container">

    <ul class="menu clearfix">
        <li><a href="#">Item</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">Sub</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub</a>
                            <!-- Nível 3 -->
                            <!-- submenu do submenu do submenu -->
                            <ul class="sub-menu">
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                            </ul><!-- submenu do submenu do submenu -->
                        </li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
            </ul><!-- submenu -->
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>


Localize no template por este código e altere para o que passei acima.

Código:


<div id="pun-head">
<div id="pun-navlinks">
<ul class="clearfix">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
</div>

Salve o template e publique-o

Resulta?

Até mais.

Troubleshoot escreveu:Olá @Mywhalei
Tente adicionar este código de menu com submenu feito em HTML5 e CSS, em seu template overall_header.

Painel de Controle -> Visualização -> Templates -> Geral -> overall_header

Código:

<style>
<div class="menu-container">

    <ul class="menu clearfix">
        <li><a href="#">Item</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">Sub</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub</a>
                            <!-- Nível 3 -->
                            <!-- submenu do submenu do submenu -->
                            <ul class="sub-menu">
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                            </ul><!-- submenu do submenu do submenu -->
                        </li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
            </ul><!-- submenu -->
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>


Localize no template por este código e altere para o que passei acima.

Código:


<div id="pun-head">
<div id="pun-navlinks">
<ul class="clearfix">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
</div>

Salve o template e publique-o

Resulta?

Até mais.

Não deu e eu dei + e salvei e publiquei e não deu
Algum solução  @JScript e @Fraise e @Raffy

@Mywhalei
Me desculpe, passei o código incompleto...
Edite o template por este:

Código:


<style>
body,
.menu,
.sub-menu {
    margin: 0;
    padding: 0;
}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
.menu,
.sub-menu {
    list-style: none;
    background: #000;
}
.sub-menu {
    background: #444;
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
}
.menu > li:hover {
    background: #444;
}
.menu li:hover > .sub-menu {
    display: block;
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 150px;
}
.sub-menu li:hover {
    background: #555;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}
</style>
<div class="menu-container">

    <ul class="menu clearfix">
        <li><a href="#">Item</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">Sub</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub</a>
                            <!-- Nível 3 -->
                            <!-- submenu do submenu do submenu -->
                            <ul class="sub-menu">
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                            </ul><!-- submenu do submenu do submenu -->
                        </li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
            </ul><!-- submenu -->
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>


Até mais.

Troubleshoot escreveu:@Mywhalei
Me desculpe, passei o código incompleto...
Edite o template por este:

Código:


<style>
body,
.menu,
.sub-menu {
    margin: 0;
    padding: 0;
}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
.menu,
.sub-menu {
    list-style: none;
    background: #000;
}
.sub-menu {
    background: #444;
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
}
.menu > li:hover {
    background: #444;
}
.menu li:hover > .sub-menu {
    display: block;
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 150px;
}
.sub-menu li:hover {
    background: #555;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}
</style>
<div class="menu-container">

    <ul class="menu clearfix">
        <li><a href="#">Item</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">Sub</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub</a>
                            <!-- Nível 3 -->
                            <!-- submenu do submenu do submenu -->
                            <ul class="sub-menu">
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                            </ul><!-- submenu do submenu do submenu -->
                        </li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
            </ul><!-- submenu -->
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>


Até mais.

Não funcionou
@Raffy alguma solução?
To precisando de ajuda ainda,
Grata,

@Mywhalei

Você publicou o template?

Cumprimentos.
Fraise

Publiquei e tudo não ainda.
Dá fazer com JAVASCRIPT ?
Alguma solução @Fraise e @Raffy

Olá @Mywhalei!

De certeza que publicou? Ou só salvou?
Queira confirmar se clicou no para publicar.


Cumprimentos.
Fraise

Eu fiz isto e não deu,
Alguma solução @Fraise e @Raffy?
Grata,

Olá @Mywhalei.

Registrei-me no seu fórum. Poderia fornecer-me acesso ao painel de controle por uns minutos? Para que eu possa detetar qual o problema.

Cumprimentos.
Fraise

@Fraise,
Vai no CHATBOX, lá conversamos mais melhor, okay?
Tchau

Olá!

O problema foi resolvido visto que apenas tinha o código desalinhado. Se possível @Mywhalei queira confirmar que foi resolvido.

Cumprimentos.
Fraise

Já foi resolvido,
Obrigada,