InícioMenu retrátil em dropdown
+3
Dury
Bructus
freiz
7 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Menu retrátil em dropdown
por freiz 20.09.11 1:01
Qual é minha questão:
Gostaria muito de adicionar um menu retrátil em um dos menus do meu fórum.
Abaixo um exemplo de imagem um fórum com este recurso.
https://2img.net/r/ihimizer/img810/6659/exemplom.png
O fórum em questão é http://supersims.forumeiros.net/
Medidas que eu tomei para corrigir o problema:
Nem tenho idéia de como fazer isso.
Imagens do meu problema:
Imagem de exemplo do que desejo.
https://2img.net/r/ihimizer/img810/6659/exemplom.png
O fórum em questão é http://supersims.forumeiros.net/
Endereço do meu fórum:
www.iphoneinsides.forumeiros.com
Versão do meu fórum:
Gostaria muito de adicionar um menu retrátil em um dos menus do meu fórum.
Abaixo um exemplo de imagem um fórum com este recurso.
https://2img.net/r/ihimizer/img810/6659/exemplom.png
O fórum em questão é http://supersims.forumeiros.net/
Medidas que eu tomei para corrigir o problema:
Nem tenho idéia de como fazer isso.
Imagens do meu problema:
Imagem de exemplo do que desejo.
https://2img.net/r/ihimizer/img810/6659/exemplom.png
O fórum em questão é http://supersims.forumeiros.net/
Endereço do meu fórum:
www.iphoneinsides.forumeiros.com
Versão do meu fórum:
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por freiz 21.09.11 15:45
Pessoal, assim como diz nas regras, estou dando um UP para ver se alguém ajuda com esta minha dúvida. Por favor, preciso muito disso.
Grato.
Grato.
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por Bructus 21.09.11 17:45
Aproveitando, tbm to querendoo muitoo esse tipo de menu *---*
Tanks
Tanks
Bructus- Novo Membro
- Membro desde : 18/09/2011
Mensagens : 23
Pontos : 33 -
Re: Menu retrátil em dropdown
por Dury 22.09.11 2:30
Olá!
Crie um novo widget e insira o seguinte código:
Agora adicione o código css abaixo:
Painel...-> Visualização -> Imagens e cores -> Cores / Folha estilo CSS
Derivado de: https://ajuda.forumeiros.com/t43869-
Sua questão está resolvida?
Até mais!
Crie um novo widget e insira o seguinte código:
No local de vermelho insira o título das abas, no local de laranja insira o conteúdo respectivo a cada aba (1 e 2).<script src="http://lervisc.noads.biz/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
</head>
<body><div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Título 1</li>
<li class="TabbedPanelsTab" tabindex="0">Título 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Conteúdo 1</div>
<div class="TabbedPanelsContent">Conteúdo 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
Agora adicione o código css abaixo:
- Código:
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
.TabbedPanelsTabHover {
background-color: #CCC;
}
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
}
.TabbedPanelsTab a {
color: black;
text-decoration: none;
}
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
}
.TabbedPanelsContent {
padding: 4px;
}
.TabbedPanelsContentVisible {
}
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}
Painel...-> Visualização -> Imagens e cores -> Cores / Folha estilo CSS
Derivado de: https://ajuda.forumeiros.com/t43869-
Sua questão está resolvida?
Até mais!
Dury- Membro Entusiasta
- Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829 -
Re: Menu retrátil em dropdown
por freiz 22.09.11 18:15
Agradeço amigo.
Acabei de ver sua postagem.
Peço que segure mais um pouco apenas para poder testar um pouco mais tarde.
Verei isso entre hoje e amanhã. Logo posto o resultado.
Até breve.
Acabei de ver sua postagem.
Peço que segure mais um pouco apenas para poder testar um pouco mais tarde.
Verei isso entre hoje e amanhã. Logo posto o resultado.
Até breve.
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por freiz 22.09.11 20:39
Amigo(s).
Fiz o teste aqui, mas não ficou como no exemplo da imagem abaixo, e que eu também disse acima.
Ele foi adicionado como widget ao lado esquerdo do meu fórum e sem o efeito de menu citado.
Poderiam ajudar?
Este código serve para fazer igual ao da imagem do exemplo?
Vejam no meu fórum como ficou logo abaixo do Widget de desenvolvedores.
Grato a atenção.
Fiz o teste aqui, mas não ficou como no exemplo da imagem abaixo, e que eu também disse acima.
Ele foi adicionado como widget ao lado esquerdo do meu fórum e sem o efeito de menu citado.
Poderiam ajudar?
Este código serve para fazer igual ao da imagem do exemplo?
Vejam no meu fórum como ficou logo abaixo do Widget de desenvolvedores.
Grato a atenção.
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por freiz 23.09.11 21:55
Up
Alguém por favor lance uma luz sobre isso para mim.
Agardeço a atenção e qualquer ajuda.
Alguém por favor lance uma luz sobre isso para mim.
Agardeço a atenção e qualquer ajuda.
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por Dury 24.09.11 0:16
Olá,
Faça o menu que der ao gosto e hospede as imagens e arquivos conforme é dado quando os mesmos são baixados. Use este website que oferece os menus personalizados prontos.
http://cssmenumaker.com/horizontal_css_menu.php
Faça o menu que der ao gosto e hospede as imagens e arquivos conforme é dado quando os mesmos são baixados. Use este website que oferece os menus personalizados prontos.
http://cssmenumaker.com/horizontal_css_menu.php
Dury- Membro Entusiasta
- Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829 -
Re: Menu retrátil em dropdown
por Convidado 24.09.11 1:02
Jeffrey escreveu:Olá,
Faça o menu que der ao gosto e hospede as imagens e arquivos conforme é dado quando os mesmos são baixados. Use este website que oferece os menus personalizados prontos.
http://cssmenumaker.com/horizontal_css_menu.php
Poderia explicar o que fazer depois de pegar o código que o site nos manda?
Eu tentei fazer isso aqui, mas não pegou, ficou sem fundo e só a palavra..
Convidado- Convidado
Re: Menu retrátil em dropdown
por Dury 24.09.11 1:24
Olá,
Você terá que aplicar o CSS do menu na folha de estilo CSS e o código do menu em algum widget personalizado.
Você terá que aplicar o CSS do menu na folha de estilo CSS e o código do menu em algum widget personalizado.
Dury- Membro Entusiasta
- Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829 -
Re: Menu retrátil em dropdown
por freiz 24.09.11 2:55
Desculpe, mas neste site, embora tenha o menu que procuro, na hora de fazer o mesmo, ele não mostra com o efeito de colocar o mouse em cima e ele deslizar e mostrar os sub-menus.
E quando coloquei ele no estilo CSS, ficou na lateral do fórum e não no local dos menus.
E quando coloquei ele no estilo CSS, ficou na lateral do fórum e não no local dos menus.
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por Plus 24.09.11 3:14
Eu fiz 1 mas como coloca no forúm ? eu so recebi uma mensagen no hotmail depois baixei o programa que tava pedindo , baixei e não recebi nada :S
Plus- *
- Membro desde : 25/08/2011
Mensagens : 47
Pontos : 63 -
Re: Menu retrátil em dropdown
por Convidado 24.09.11 4:24
Plus escreveu:Eu fiz 1 mas como coloca no forúm ? eu so recebi uma mensagen no hotmail depois baixei o programa que tava pedindo , baixei e não recebi nada :S
É muito confuso usar esse site cara.
Verifique na sua caixa de spam, veja se tem 1 e-mail do site, será o código.,
O "assunto" será: Your CSS Menu, ele vai mandar 1 donwlaod do seu menu em .rar..
Convidado- Convidado
Re: Menu retrátil em dropdown
por Dury 24.09.11 14:51
Olá,
Poderia enviar-me o código que foi fornecido pelo website que indiquei meu amigo. De preferência, separe o CSS e o código em sí. Se preferir, poderá usar o sistema de anexo para que eu consiga baixá-lo.
Poderia enviar-me o código que foi fornecido pelo website que indiquei meu amigo. De preferência, separe o CSS e o código em sí. Se preferir, poderá usar o sistema de anexo para que eu consiga baixá-lo.
Dury- Membro Entusiasta
- Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829 -
Re: Menu retrátil em dropdown
por Convidado 24.09.11 18:01
Jeffrey escreveu:Olá,
Poderia enviar-me o código que foi fornecido pelo website que indiquei meu amigo. De preferência, separe o CSS e o código em sí. Se preferir, poderá usar o sistema de anexo para que eu consiga baixá-lo.
Acho que ele tá confuso na hora de pegar, pois ao invéz de ir para a caixa de mensagens, o e-mail vai é para a lixeira, mesmo que ele já receba e-mails do site que ficam na caixa de entrada.
Convidado- Convidado
Re: Menu retrátil em dropdown
por freiz 25.09.11 2:59
Infelizmente quando seleciono no site sugerido, ele não faz o efeito em DropDow, ele coloca os menus um em cima do outro na vertical.
Já selecionei alguns modelos diferentes, mas com mesmo resultado.
No caso da imagem do fórum que citei acima, do Sims, ao clicar no menu, ele corre p baixo. Gostaria de fazer muito isso no meu.
Já selecionei alguns modelos diferentes, mas com mesmo resultado.
No caso da imagem do fórum que citei acima, do Sims, ao clicar no menu, ele corre p baixo. Gostaria de fazer muito isso no meu.
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por Dury 26.09.11 0:23
Olá,
Freiz, mande-me o código do menu e hospede as imagens por favor.
Freiz, mande-me o código do menu e hospede as imagens por favor.
Dury- Membro Entusiasta
- Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829 -
Re: Menu retrátil em dropdown
por freiz 28.09.11 1:37
Desculpe amigo, mas não entendi com hospedar as imagens.
Aliás, no site indicado, até acho um modelo que desejo, ma na hora de montar ele, não mostra o efeito que desejo, apenas fica um abaixo do outro.
Aliás, no site indicado, até acho um modelo que desejo, ma na hora de montar ele, não mostra o efeito que desejo, apenas fica um abaixo do outro.
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por freiz 28.09.11 20:30
Olá.
Depois de tentar fazer um por lá personalizado e não conseguir, eu baixei o modelo padrão.
Poderá pegar em http://cssmenumaker.com/menus/065/source.zipSó que eu quero fazer um modelo similar a este com os mesmos nomes.
Como proceder agora?
Agradeço toda a atenção e paciência até agora.
Depois de tentar fazer um por lá personalizado e não conseguir, eu baixei o modelo padrão.
Poderá pegar em http://cssmenumaker.com/menus/065/source.zipSó que eu quero fazer um modelo similar a este com os mesmos nomes.
Como proceder agora?
Agradeço toda a atenção e paciência até agora.
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por Dury 29.09.11 15:13
Olá,
Algo do gênero:
Pode-se colocar na Home Page e configurar o CSS de forma pessoal.
Algo do gênero:
- Código:
<body>
<style>
/ * Menu flutuante */
.bg {background: url(http://i48.servimg.com/u/f48/15/88/72/83/button11.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http://i48.servimg.com/u/f48/15/88/72/83/button12.gif) repeat-x; position:relative; font-family:arial,
verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#FFFFFF; text-decoration:none; font-size:11px; font-weight:bold;
padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url('http://i48.servimg.com/u/f48/15/88/72/83/down10.gif') no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url('http://i48.servimg.com/u/f48/15/88/72/83/button10.gif') no-repeat;}
.menu li a.top_link:hover span {background:url(i'http://i48.servimg.com/u/f48/15/88/72/83/button10.gif') no-repeat right top;}
.menu li a.top_link:hover span.down {background:url('http://i48.servimg.com/u/f48/15/88/72/83/button10.gif') no-repeat right top;}
.menu li:hover > a.top_link {color:#FFFFFF; background: url(http://i48.servimg.com/u/f48/15/88/72/83/button13.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(http://i48.servimg.com/u/f48/15/88/72/83/button13.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(http://i48.servimg.com/u/f48/15/88/72/83/button13.gif) no-repeat right top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index: 999;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000;
text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url('http://i48.servimg.com/u/f48/15/88/72/83/arrow10.gif') 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url('http://i48.servimg.com/u/f48/15/88/72/83/arrow_11.gif') 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url('http://i48.servimg.com/u/f48/15/88/72/83/arrow_10.gif') 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index: 999; height:auto;}
</style><div>
<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>
</div>
</body>
Pode-se colocar na Home Page e configurar o CSS de forma pessoal.
Dury- Membro Entusiasta
- Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829 -
Re: Menu retrátil em dropdown
por freiz 30.09.11 15:37
Olá amigo Jefrrey, agradeço muito a atenção até o momento.
Bem, no fórum de testes que tenho, jogo o código lá no CSS, mas diz que o mesmo foi refeito por ter HTML.
Mesmo assim não entendo nada de códigos, sou muito limitado quanto a isso.
Aí ele não aparece no menu, mas apareceu ao lado esquerdo na barra lateral como se fosse um widget. Mesmo assim não ficou o efeito de dropdown.
O que fazer?
Grato a atenção.
Bem, no fórum de testes que tenho, jogo o código lá no CSS, mas diz que o mesmo foi refeito por ter HTML.
Mesmo assim não entendo nada de códigos, sou muito limitado quanto a isso.
Aí ele não aparece no menu, mas apareceu ao lado esquerdo na barra lateral como se fosse um widget. Mesmo assim não ficou o efeito de dropdown.
O que fazer?
Grato a atenção.
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por Dury 30.09.11 23:19
Você deve adicioná-lo na mensagem da home page ou em um widget personalizado.
Dury- Membro Entusiasta
- Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829 -
Re: Menu retrátil em dropdown
por freiz 02.10.11 4:38
Agora que ví sua postagem, vou testar neste domingo e volto com o resultado.
Até breve....
Até breve....
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por Cream 03.10.11 19:05
Olá,
Poderia nos dizer se sua dúvida ainda persiste?
Caso sim diga-nos para podermos ajudá-lo.
Até mais.
Poderia nos dizer se sua dúvida ainda persiste?
Caso sim diga-nos para podermos ajudá-lo.
Até mais.
Cream- Membro Entusiasta
- Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644 -
Re: Menu retrátil em dropdown
por freiz 03.10.11 19:28
Bem, na menssagem de home page não foi aqui no teste que fiz.
Já no Widget foi, mas gostaria de poder deixar localizado ao lado ou junto aos menus do meu fórum.
Já no Widget foi, mas gostaria de poder deixar localizado ao lado ou junto aos menus do meu fórum.
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por Luciano98 05.10.11 18:54
Olá!
Eu sei fazer esse menu substituir o menu original do fórum, mas antes disso preciso do menu pronto e configurado com os botões principais e sub-botões.
Até mais.
Eu sei fazer esse menu substituir o menu original do fórum, mas antes disso preciso do menu pronto e configurado com os botões principais e sub-botões.
Até mais.
Luciano98- Membro Entusiasta
- Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049 -
Re: Menu retrátil em dropdown
por freiz 05.10.11 20:00
Por favor amigo.
Quais passos devo fazer, não entendo quase nada de códigos, só usei assim como está passado acima.
Do que vc precisa pra me ajudar, diga o caminho das pedras por favor.
Grato a atenção.
Quais passos devo fazer, não entendo quase nada de códigos, só usei assim como está passado acima.
Do que vc precisa pra me ajudar, diga o caminho das pedras por favor.
Grato a atenção.
freiz- ***
- Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191 -
Re: Menu retrátil em dropdown
por seender 07.10.11 23:04
Olá!
Veja este tópico: https://ajuda.forumeiros.com/t46981-menu-dropdown#312545.
Melhores cumprimentos,
seender
Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
Veja este tópico: https://ajuda.forumeiros.com/t46981-menu-dropdown#312545.
Melhores cumprimentos,
seender
Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
seender- Membro Entusiasta
- Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455 -
Tópicos semelhantesFórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
