ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Sou novo
Masculino
Idade : 19
PointActif's : 1919
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012

100%
Ver perfil do usuáriohttp://www.forum-webpixel.net

Resolvido Sub-Menu

em Seg 11 Jun - 11:59
Veja este fórum: http://spdesign.ativoforum.com/

Passa o mouse encima do menu Portal.. Buscar.. Perfil.. Inicio

Como fazer isto com o meu menu?
avatar
Membro em destaque
Masculino
Idade : 20
PointActif's : 2070
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012

100%
Ver perfil do usuário

Resolvido Re: Sub-Menu

em Seg 11 Jun - 14:17
Olá,

O senhor poderia me informar a versão do seu Fórum?

Até mais.
Izzy suporte Actif.
avatar
Sou novo
Masculino
Idade : 19
PointActif's : 1919
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012

100%
Ver perfil do usuáriohttp://www.forum-webpixel.net

Resolvido Re: Sub-Menu

em Seg 11 Jun - 21:36
phpbb3
avatar
Adminactif
Adminactif
Masculino
Idade : 23
PointActif's : 4814
ReputActifs : 97
Mensagens : 2707
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%
Ver perfil do usuáriohttp://www.shiftactif.com/

Resolvido Re: Sub-Menu

em Ter 12 Jun - 10:47
O efeito está disponível somente para fóruns Punbb! Piscada



Staff Shiftactif

Bem vindo ao fórum ShiftActif. Aconselhamos que você veja alguns subfóruns e regras para iniciar sua carreira na comunidade.
Regulamento e informações afins:
Seta verde   Condições gerais de uso & equipe voluntária.
Seta verde Necessidade de um Adminactif ou Deveolper?
Seta verde Lista de tutoriais.
Seta verde Aumente a segurança do seu fórum.
Fóruns interessantes:
Seta verde Tutoriais especiais.
Seta verde JuriActif.
Seta verde Suporte ao usuário ShiftActif.
Seta verde Sugestões & Melhoras.
Serviços extras:
Seta verde Exclusão de temas do Hitskin.
Seta verde Desinscrever-se de um fórum.
Seta verde Temas grátis para Download.
avatar
Colaborador Actif
Masculino
Idade : 18
PointActif's : 2464
ReputActifs : 20
Mensagens : 407
Inscrição : 03/04/2012

Localização : Shiftactif & SuporteDesign
100%
Ver perfil do usuáriohttp://www.suportedesign.net

Resolvido Re: Sub-Menu

em Ter 12 Jun - 10:51
Olá,
Gostaria de saber o código, tenho um fórum de testes em PunBB.

Cordialmente
Skyline
avatar
Sou novo
Masculino
Idade : 19
PointActif's : 1919
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012

100%
Ver perfil do usuáriohttp://www.forum-webpixel.net

Resolvido Re: Sub-Menu

em Ter 12 Jun - 11:52
Já tive este código em meu fórum phpbb3, mais eu removi e não me lembro mais.

É CSS COM JAVASCRIPT.
avatar
Membro em destaque
Masculino
Idade : 20
PointActif's : 2070
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012

100%
Ver perfil do usuário

Resolvido Re: Sub-Menu

em Ter 12 Jun - 13:36
EduardoWenes escreveu:Já tive este código em meu fórum phpbb3, mais eu removi e não me lembro mais.

É CSS COM JAVASCRIPT.

Boa Tarde!

Prezado EduardoWenes, os códigos são para a Versão PunBB. No caso, siga os passos:

<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 valor em 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:
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:
cPainel Ajudantes Visualização Ajudantes Imagens e Cores Ajudantes Cores Ajudantes Folha de estilos CSS

Caso da maneira acima não funcionar, peço que delete tudo e faça com os seguintes passos abaixo:

Ajudantes Passo 1: Agora o HTML; cPainel Ajudantes Portal & Widgets Ajudantes Gestão dos Widgets do Fórum ou do Portal Ajudantes Configuração Criar um novo widget personalizado
Mas vamos tentar o seguinte;

Código:
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Menu Drop Down</title> 
        <link rel="stylesheet" type="text/css" href="menu.css"/>
        <script type="text/javascript" src="menu.js"></script>
    </head>
    <body>
        <ul id="nav-menu">
            <li><a href="">Página Inicial</a></li>
            <li><a href="">Serviços</a></li>
            <li class="submenu">
                <span>Portfólio</span>
                <ul>
                    <li><a href="">Lorem Ipsun</a></li>
                    <li><a href="">Lorem Ipsun</a></li>
                    <li><a href="">Lorem Ipsun</a></li>
                </ul>
            </li>
            <li class="submenu">
                <span>Quem Somos</span>
                <ul>
                    <li><a href="">Lorem Ipsun</a></li>
                    <li><a href="">Lorem Ipsun</a></li>
                    <li><a href="">Lorem Ipsun</a></li>
                </ul>
            </li>
            <li><a href="">Contato</a></li>
        </ul>     
        <script type="text/javascript">           
           
            //Cria um objeto menu, passando como paramentro o ID da UL da
            // navegação principal.
            var menu = new Menu('nav-menu');                     
           
        </script>
    </body>
</html>


No final do HTML é só instanciar um novo objeto Menu passando como parâmetro o id do menu de navegação principal.

Obs: Por nos 'LI's que servirão de submenus a classe submenu.


ID Navegação Principal -> nav-menu
Classe para submenu -> submenu


Ajudantes Passo 2: Agora o CSS; cPainel Ajudantes Visualização Ajudantes Imagens e Cores Ajudantes Cores Ajudantes Folha de Estilo CSS

/* ESTRUTURA */

*{
margin:0;
padding:0;
}

#nav-menu{
overflow: hidden;
}

#nav-menu li{
display:inline-block;
float:left;
}

#nav-menu li a, #nav-menu li span{
padding:10px;
display:block;
text-decoration: none;
cursor:pointer;
}

#nav-menu li.submenu ul{
position: absolute;
display:block;
width:220px;
display:none;
}

#nav-menu li.submenu ul li{
float:none;
display:block;
}

/* DESIGN */

/* Cor de fundo do Menu Principal de Navegação*/
#nav-menu{
background: red;
}

/*Cor da fonte do menu*/
#nav-menu a, #nav-menu span{
color:#FFF;
}

#nav-menu a:hover, #nav-menu span:hover, #nav-menu li:hover{
background: #750000;
color: #FF4848;
}

/* Cor de fundo do submenu */
#nav-menu li.submenu ul{
background: #FF4848;
}

/*Cor da fonte do submenu*/
#nav-menu li.submenu a{
color:#750000;
}

#nav-menu li.submenu a:hover{
background:#FF1C1C;
color:#FFF;
}

Ajudantes Passo 3: Agora o JS; cPainel Ajudantes Módulos Ajudantes HTML & JAVASCRIPT Ajudantes Gestão dos Códigos JavaScript e Adicionar Criar um novo javascript

Código:
function Menu(id){
    //Id do menu de navegação
    this.id = id;
    //Tag que irá servir de titulo do submenu
    this.submenuTitleTag = 'span';
    //Classe usada no LI para dizer que é um submenu
    this.submenuClass = 'submenu';
               
    //Funções e operações iniciadas ao criar o objeto
    this.construtor = function(){
        this.submenuTitleTag = this.submenuTitleTag.toUpperCase();
        this.getmenu();
    }
               
    //Seleciona e adiciona os eventos aos submenus
    this.getmenu = function (){                   
        //Seleciona todos os LI do menu de navegação
        var tags = document.getElementById(this.id).getElementsByTagName("li");
        //Verifica um por um pra saber se possui submenu ou não
        for(var i=0;i<tags.length;i++){
            if(tags[i].className == this.submenuClass){
                           
                tags[i].onmouseover = function(){
                    this.getElementsByTagName('ul')[0].style.display = "block";                     
                }
                           
                tags[i].onmouseout = function(){
                    this.getElementsByTagName('ul')[0].style.display = "none";                     
                }                                                     
            }
        }
    }
               
    //Inicializa o objeto
    this.construtor();         
               
}

Atenciosamente,
Izzy.
avatar
Sou novo
Masculino
Idade : 19
PointActif's : 1919
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012

100%
Ver perfil do usuáriohttp://www.forum-webpixel.net

Resolvido Re: Sub-Menu

em Ter 12 Jun - 13:47
Eu não entendi foi nada desse primeiro passo, os outros passos ja fiz tudo.

Teria como me detalhar o primeiro passo?
avatar
Membro em destaque
Masculino
Idade : 20
PointActif's : 2070
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012

100%
Ver perfil do usuário

Resolvido Re: Sub-Menu

em Ter 12 Jun - 16:38
Olá EduardoWenes,

O primeiro código do primeiro exemplo, deve estar dentro de um novo Widget.
Para isto, crie um novo widget:
cPainel Ajudantes Módulos Ajudantes Widgets Ajudantes Gestão dos Widgets do Fórum ou do Portal Ajudantes Configuração Criar um novo widget personalizado. No conteúdo, adicione o primeiro código do primeiro exemplo de fazer o tipo de sub-menu desejado.

Atenciosamente,
Izzy.
avatar
Sou novo
Masculino
Idade : 19
PointActif's : 1919
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012

100%
Ver perfil do usuáriohttp://www.forum-webpixel.net

Resolvido Re: Sub-Menu

em Ter 12 Jun - 18:51
Não aparece nada :s
avatar
Membro iniciante
Masculino
Idade : 20
PointActif's : 1930
ReputActifs : 1
Mensagens : 40
Inscrição : 16/05/2012

100%
Ver perfil do usuáriohttp://br-designerforever.forumeiros.com/

Resolvido Re: Sub-Menu

em Ter 12 Jun - 20:46
Olá, posso lhe ajudar, e sim, existe o código para PHPBB 3.

Se querer, só avisar, pois não sei se mudou a versão.

Obrigado.
avatar
Membro iniciante
Masculino
Idade : 27
PointActif's : 1981
ReputActifs : 1
Mensagens : 55
Inscrição : 18/04/2012

100%
Ver perfil do usuáriohttp://spdesign.ativoforum.com/

Resolvido Re: Sub-Menu

em Ter 12 Jun - 21:19
Firenando escreveu:Olá, posso lhe ajudar, e sim, existe o código para PHPBB 3.

Se querer, só avisar, pois não sei se mudou a versão.

Obrigado.

Você irá passar o meu código Firenando ?
As intenções de Izzi são as melhores, pois ele esta criando um código novo, e de autoria dele
passar o meu código seria contra o acordo que eu faço, para lhes passar o código de bom grado...
não se esqueça disso...
obrigado.
avatar
Membro iniciante
Masculino
Idade : 20
PointActif's : 1930
ReputActifs : 1
Mensagens : 40
Inscrição : 16/05/2012

100%
Ver perfil do usuáriohttp://br-designerforever.forumeiros.com/

Resolvido Re: Sub-Menu

em Ter 12 Jun - 21:22
cyllaz escreveu:
Firenando escreveu:Olá, posso lhe ajudar, e sim, existe o código para PHPBB 3.

Se querer, só avisar, pois não sei se mudou a versão.

Obrigado.

Você irá passar o meu código Firenando ?
As intenções de Izzi são as melhores, pois ele esta criando um código novo, e de autoria dele
passar o meu código seria contra o acordo que eu faço, para lhes passar o código de bom grado...
não se esqueça disso...
obrigado.

Não, Cyllaz, tenho um código, que não é seu, se for, não sei quem o publicou, pois o seu, é totalmente diferente do meu.
avatar
Sou novo
Masculino
Idade : 19
PointActif's : 1919
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012

100%
Ver perfil do usuáriohttp://www.forum-webpixel.net

Resolvido Re: Sub-Menu

em Ter 12 Jun - 22:02
Firenando, teria como me passar por MP, amigo? Piscada
avatar
Membro em destaque
Masculino
Idade : 20
PointActif's : 2070
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012

100%
Ver perfil do usuário

Resolvido Re: Sub-Menu

em Ter 12 Jun - 22:44
Olá,

De primeira visão, o código é para a Versão PunBB. O código em que lhes indiquei é para fazer um sub-menu totalmente padrão e que não seja copia de ninguém. Aqui não é permitido copias de outros fóruns, caso os mesmo sejam copiados, terei de agir e enviar para à Direção ShiftActif.

Atenciosamente,
Izzy.
avatar
Sou novo
Masculino
Idade : 19
PointActif's : 1919
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012

100%
Ver perfil do usuáriohttp://www.forum-webpixel.net

Resolvido Re: Sub-Menu

em Qua 13 Jun - 15:28
Pode fechar, não quero mais tambem isto ¬¬
avatar
Colaborador Actif
PointActif's : 2197
ReputActifs : 28
Mensagens : 243
Inscrição : 19/04/2012

100%
Ver perfil do usuáriohttp://papo-geek.forumado.net/

Resolvido Re: Sub-Menu

em Sex 15 Jun - 14:10
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
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum