Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Menu 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

Ir para baixo

Tópico resolvido Menu retrátil em dropdown

Mensagem 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:
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem por Bructus 21.09.11 17:45

Aproveitando, tbm to querendoo muitoo esse tipo de menu *---*

Tanks
Bructus
Bructus
Novo Membro

Membro desde : 18/09/2011
Mensagens : 23
Pontos : 33

http://waredit.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem por Dury 22.09.11 2:30

Olá!

Crie um novo widget e insira o seguinte código:
<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>
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).
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;
}
Adicione em:
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
Dury
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
Menu retrátil em dropdown Exemplom

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
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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
Dury
Dury
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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..
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
Dury
Dury
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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. Chorando ou muito tr
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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
Plus
*

Membro desde : 25/08/2011
Mensagens : 47
Pontos : 63

http://chdownloads.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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..
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
Dury
Dury
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem por Dury 26.09.11 0:23

Olá,

Freiz, mande-me o código do menu e hospede as imagens por favor.
Dury
Dury
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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?
Menu retrátil em dropdown 4+MMPPzx4cP8lAoGJoqKi4uLi27dvC4VChUKh1+ttNpvL5cJq+P8HCqLW1SPsVHIAAAAASUVORK5CYII=

Agradeço toda a atenção e paciência até agora.
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem por Dury 29.09.11 15:13

Olá,

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
Dury
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem por Dury 30.09.11 23:19

Você deve adicioná-lo na mensagem da home page ou em um widget personalizado.
Dury
Dury
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem por freiz 02.10.11 4:38

Agora que ví sua postagem, vou testar neste domingo e volto com o resultado.

Até breve.... Menu retrátil em dropdown 61552
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
Cream
Cream
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
Luciano98
Luciano98
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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.
freiz
freiz
***

Membro desde : 29/10/2010
Mensagens : 126
Pontos : 191

http://iphoneinsides.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu retrátil em dropdown

Mensagem 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'
seender
seender
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

 
Permissões neste sub-fórum
Não podes responder a tópicos