Eu gostaria de ter um Menu CSS Maker
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
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 ?
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 ?
Re: Eu gostaria de ter um Menu CSS Maker
Olá @Mywhalei!
Vamos lá então:
Painel de Controle ->> Visualização ->> Cores ->> Folha de estilos CSS
Adicione o seguinte código:
Agora vamos em:
Painel de Controle ->> Módulos ->> Gestão dos códigos Javascript
E adicione este código.
O investimento deve ser em todas as páginas.
Deseja alguma alteração no menu?
Cumprimentos.
Fraise
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
Re: Eu gostaria de ter um Menu CSS Maker
Não funcionou @Fraise,
Eu botei o CSS também e não funcionou.
Meu fórum: www.mebelay.forumeiros.com
Tchau,
Eu botei o CSS também e não funcionou.
Meu fórum: www.mebelay.forumeiros.com
Tchau,
Re: Eu gostaria de ter um Menu CSS Maker
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
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
Re: Eu gostaria de ter um Menu CSS Maker
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
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
Re: Eu gostaria de ter um Menu CSS Maker
Olá novamente!
Eu testei aqui e funcionou na perfeição. Queira tentar novamente, pode ter errado alguma coisa.
Cumprimentos.
Fraise
Eu testei aqui e funcionou na perfeição. Queira tentar novamente, pode ter errado alguma coisa.
Cumprimentos.
Fraise
Re: Eu gostaria de ter um Menu CSS Maker
@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
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
Re: Eu gostaria de ter um Menu CSS Maker
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
Localize no template por este código e altere para o que passei acima.
Resulta?
Até mais.
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>
Resulta?
Até mais.
Re: Eu gostaria de ter um Menu CSS Maker
Não deu e eu dei + e salvei e publiquei e não deuTroubleshoot 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.Salve o template e publique-o
- Código:
<div id="pun-head">
<div id="pun-navlinks">
<ul class="clearfix">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
</div>
Resulta?
Até mais.
Algum solução @JScript e @Fraise e @Raffy
Re: Eu gostaria de ter um Menu CSS Maker
@Mywhalei
Me desculpe, passei o código incompleto...
Edite o template por este:
Até mais.
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.
Re: Eu gostaria de ter um Menu CSS Maker
Não funcionouTroubleshoot 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.
@Raffy alguma solução?
To precisando de ajuda ainda,
Grata,
Re: Eu gostaria de ter um Menu CSS Maker
Olá @Mywhalei!
De certeza que publicou? Ou só salvou?
Queira confirmar se clicou no para publicar.
Cumprimentos.
Fraise
De certeza que publicou? Ou só salvou?
Queira confirmar se clicou no para publicar.
Cumprimentos.
Fraise
Re: Eu gostaria de ter um Menu CSS Maker
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
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
Re: Eu gostaria de ter um Menu CSS Maker
Olá!
O problema foi resolvido visto que apenas tinha o código desalinhado. Se possível @Mywhalei queira confirmar que foi resolvido.
Cumprimentos.
Fraise
O problema foi resolvido visto que apenas tinha o código desalinhado. Se possível @Mywhalei queira confirmar que foi resolvido.
Cumprimentos.
Fraise
Re: Eu gostaria de ter um Menu CSS Maker
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Tópicos semelhantes
» Instalar menu feito no css menu maker
» Css menu maker
» CSS Menu Maker
» Css menu maker
» Alterações no menu CSS Maker.
» Css menu maker
» CSS Menu Maker
» Css menu maker
» Alterações no menu CSS Maker.
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos