CSS Menu Maker

[Yugi Mouto]

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Administrador
Navegador usado : Google Chrome
Imagem :

Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Problema começou : Hoje, quando coloquei código, de menu CSS Menu Maker
Endereço do fórum : http://narutorpggamer.forumeiros.com

Descrição do problema

Tentei colocar um menu do CSS Menu Maker, como ensina no tutorial, mas acontece que não aparece fica assim.

[Sennior]

Saudações,

Mande-me os códigos criados por voce no site do Menu Maker.
Mande o HTML e o CSS.

Até mais.

[Yugi Mouto]

O Html:

Código:

<div id='cssmenu'>
<ul>
  <li class='active'><a href='index.html'><span>Forum</span></a></li>
  <li><a href='http://hearthnaruto.forumeiros.com/'><span>Portal</span></a></li>
  <li><a href='#'><span>Faq</span></a></li>
  <li><a href='http://hearthnaruto.forumeiros.com/search'><span>Pesquisar</span></a></li>
  <li><a href='http://hearthnaruto.forumeiros.com/memberlist'><span>Membros</span></a></li>
  <li><a href='http://hearthnaruto.forumeiros.com/profile?mode=editprofile'><span>Perfil</span></a></li>
  <li><a href='http://hearthnaruto.forumeiros.com/privmsg?folder=inbox'><span>Mensagem Privada</span></a></li>
  <li class='last'><a href='http://hearthnaruto.forumeiros.com/login?logout=1&tid=2a8e6f2fcdd6afc8f9f7295b920c9e8b&key=95e583'><span>Sair</span></a></li>
</ul>
</div>

O CSS Não consegui.

[Yugi Mouto]

UP

[Yugi Mouto]

UpdoUp

[RafaelS.]

Olá amigo.

Se você não adicionou o CSS, é completamente normal que o resultado seja esse.

Até mais.

[Yugi Mouto]

Mas como pego o css, sem acesso a ele, no site o registro é pago

[RafaelS.]

Olá amigo!

Você já tentou outro site?
Em qual site você gerou o seu menu?

Até.

[Yugi Mouto]

gerei no cssmenumaker.com, tentei procurar outros sites, mas não achei tão bons quanto este

[Sennior]

Saudações,

Desculpe a demora amigo.
Coloque em teu código CSS:

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:#fff; 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;}

E depois faça normalmente o que se pede no tutorial.
Até mais.

[Yugi Mouto]

Coloquei o CSS e ficou deste jeito. É por causa do template do forum?

[Sennior]

Saudações,

Poderia deixar o efeito ativo?
E qual o link do fórum que esta o efeito do menu?

Até mais.

[Yugi Mouto]

Como assim deixar o efeito ativo?

[Sennior]

Saudações,

Deixar o código ativo em teu fórum, para podermos ver o erro.
E mande o link que esta usando o código.

Até mais.

[Yugi Mouto]

O codigo é o primeiro que passei e o efeito ja está ativo

[Pastrana]

Poderia nos apontar qual foi o modelo que o senhor utilizou do site?

Css Menu Maker

E quais os menus que o senhor deseja, exemplo:

Home
Perfil
etc...

[Yugi Mouto]

http://cssmenumaker.com/menu/3d-navigation-bar

Home, Portal, Faq, Pesquisar, Membros, Perfil, Mensagem Privada, Sair

e também os quando não esta logado, mas somente se o primeiro der certo.

e meu forum ta com phpbb2 agora

[Yugi Mouto]

UP

[Sennior]

Saudações,

Amigo, quando entro neste fórum eu não vejo o código do menu:
http://narutorpggamer.forumeiros.com/

Qual é o fórum então com o efeito por favor?
Até mais.
Sennior

[Yugi Mouto]

Desculpe é esse http://hearthnaruto.forumeiros.com/forum

E não tenho o css por isso está assim

[Sennior]

Bem, coloque o código normalmente aí eu crio o CSS.
Já aconteceu comigo algumas vezes, aí é só criar o CSS manualmente.

Até mais.

[Yugi Mouto]

Aqui o HTML

Código:

<div id='cssmenu'>
<ul>
  <li class='active'><a href='index.html'>Home</a></li>
  <li class='active'><a href='http://hearthnaruto.forumeiros.com/'>Portal</a></li>
  <li class='active'><a href='#'>Faq</a></li>
  <li class='active'><a href='http://hearthnaruto.forumeiros.com/search'>Buscar</a></li>
  <li class='active'><a href='http://hearthnaruto.forumeiros.com/memberlist'>Membros</a></li>
  <li class='active'><a href='http://hearthnaruto.forumeiros.com/profile?mode=editprofile'>Perfil</a></li>
  <li class='active'><a href='http://hearthnaruto.forumeiros.com/privmsg?folder=inbox'>MP</a></li>
  <li class='active'><a href='http://hearthnaruto.forumeiros.com/login?logout=1&tid=f77b803a3cb3fd8f369d896ec3639b05&key=e77e67'>Sair</a></li>
</ul>
</div>

[Sennior]

Não amigo... Coloque o código em teu fórum, para que eu possa criar o CSS lá, entendeu?

Até mais.

[Yugi Mouto]

A sim ja coloquei ele lá, confere.

[Sennior]

Saudações,

Preciso que coloque o código no HTML Sair e HTML entrar, entendeu?
Porque só assim eu posso ver.

Até mais.

[Yugi Mouto]

pronto

[Sennior]

Certo meu brother, agora adicione esse CSS:

Código:

#cssmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; }
#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:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }


#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background: #333333!important; 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))!important; background: -webkit-linear-gradient(top, #333333 0%,#222222 100%)!important; 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;border-bottom: 4px solid rgb(0, 149, 255);}
#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;}

Ele deve ser posto no inicio de teu CSS, beleza?
Até mais.

[Yugi Mouto]

certo, coloquei mas o menu ficou branco e o logo ainda não aparece

[Yugi Mouto]

up

[Sennior]

Saudações,

Coloque agora este código no inicio de teu CSS:

Código:

div#cssmenu {
  background: url(http://worldwartwozone.com/forums/public/style_images/WorldWarIIZone/maintitle.png) repeat-x scroll 0 0 #252525!important;
  border-bottom: 4px solid #297CC5!important;
  border-radius: 5px 5px 0 0!important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  color: #FFF!important;
  margin-bottom: 0;
  overflow: hidden;
  padding: 3px 8px 4px 20px !important;
}

Até mais.

[Yugi Mouto]

ficou bem melhor, mas para aparecer o logo tenho que retirar o outro menu certo?

[Sennior]

Ué senhor... Nem mesmo a classe do logo esta aparecendo aqui.
Tente colocar o logo pelo painel de controle:
CPainel ->> Visualização ->> Gestão de imagens

Coloque um logo e salve.
Até mais.
Sennior

[Yugi Mouto]

Ele ja está ativo, so que o menu fica por cima dele, tenho retirar o outro

[Sennior]

Meu querido, encontrei o problema!
Basta colocar este outro código no inicio de teu CSS:

Código:

a[href="/forum"] {display: block!important;}

E aí, resultou?
Até mais.

[Yugi Mouto]

Resolveu quase tudo mas o menu ficou em cima do logo e o menu original ainda está.

[Sennior]

Agora, adicione mais estes códigos:

Código:

div#cssmenu {
  position: relative!important;
  top: 32pc!important;
}
a.mainmenu {
  display: none;
}

Até mais.

[Yugi Mouto]

perfeito cara, muito obrigado!!

[Sennior]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.