Menu retrátil em dropdown

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Menu retrátil em dropdown

Mensagem por freiz em 19/09/11, 09:01 pm

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.
http://img810.imageshack.us/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.
http://img810.imageshack.us/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:
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 21/09/11, 11:45 am

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.
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por Bructus em 21/09/11, 01:45 pm

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

Tanks
avatar

Bructus
Nível 3

Masculino
Inscrito dia : 18/09/2011
Mensagens : 23
Pontos Ativos : 33

Ver perfil do usuário http://waredit.forumeiros.com/

Resolvido Re: Menu retrátil em dropdown

Mensagem por Dury em 21/09/11, 10:30 pm

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: http://ajuda.forumeiros.com/t43869-

Sua questão está resolvida?

Até mais!
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 22/09/11, 02:15 pm

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.
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 22/09/11, 04:39 pm

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.
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 23/09/11, 05:55 pm

Up

Alguém por favor lance uma luz sobre isso para mim.

Agardeço a atenção e qualquer ajuda.
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por Dury em 23/09/11, 08:16 pm

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
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Menu retrátil em dropdown

Mensagem por Luks_Ponte em 23/09/11, 09:02 pm

@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..
avatar

Luks_Ponte
Nível 10

Masculino
Inscrito dia : 22/10/2010
Mensagens : 276
Pontos Ativos : 411

Ver perfil do usuário http://brasilplaylife.forumeiros.net/forum.htm

Resolvido Re: Menu retrátil em dropdown

Mensagem por Dury em 23/09/11, 09:24 pm

Olá,

Você terá que aplicar o CSS do menu na folha de estilo CSS e o código do menu em algum widget personalizado.
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 23/09/11, 10:55 pm

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
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por Plus em 23/09/11, 11:14 pm

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
avatar

Plus
Nível 5

Masculino
Inscrito dia : 25/08/2011
Mensagens : 47
Pontos Ativos : 63

Ver perfil do usuário http://chdownloads.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por Luks_Ponte em 24/09/11, 12:24 am

@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..
avatar

Luks_Ponte
Nível 10

Masculino
Inscrito dia : 22/10/2010
Mensagens : 276
Pontos Ativos : 411

Ver perfil do usuário http://brasilplaylife.forumeiros.net/forum.htm

Resolvido Re: Menu retrátil em dropdown

Mensagem por Dury em 24/09/11, 10:51 am

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.
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Menu retrátil em dropdown

Mensagem por Luks_Ponte em 24/09/11, 02:01 pm

@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.
avatar

Luks_Ponte
Nível 10

Masculino
Inscrito dia : 22/10/2010
Mensagens : 276
Pontos Ativos : 411

Ver perfil do usuário http://brasilplaylife.forumeiros.net/forum.htm

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 24/09/11, 10:59 pm

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.
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por Dury em 25/09/11, 08:23 pm

Olá,

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

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 27/09/11, 09:37 pm

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.
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 28/09/11, 04:30 pm

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.
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por Dury em 29/09/11, 11:13 am

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.
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 30/09/11, 11:37 am

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.
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por Dury em 30/09/11, 07:19 pm

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

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 02/10/11, 12:38 am

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

Até breve....
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por Cream em 03/10/11, 03:05 pm

Olá,

Poderia nos dizer se sua dúvida ainda persiste?
Caso sim diga-nos para podermos ajudá-lo.

Até mais.
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 03/10/11, 03:28 pm

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.
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por Luciano98 em 05/10/11, 02:54 pm

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.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por freiz em 05/10/11, 04:00 pm

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.
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Menu retrátil em dropdown

Mensagem por seender em 07/10/11, 07:04 pm

Olá!

Veja este tópico: http://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'
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum