ShiftActif fórum

[TUTORIAL] Sub-links nos menus (PHPBB3) Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Sub-links nos menus (PHPBB3) 405374159 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!!! [TUTORIAL] Sub-links nos menus (PHPBB3) 1660898911

[TUTORIAL] Sub-links nos menus (PHPBB3)

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

[TUTORIAL] Sub-links nos menus (PHPBB3) Empty [TUTORIAL] Sub-links nos menus (PHPBB3)

Mensagem por Magnus em Seg 15 Out - 15:36


[TUTORIAL] Sub-links nos menus (PHPBB3) Menu10

Lista de links


Uma lista de links torna-se fundamental para o desenvolvimento do website, porque através desta lista o internauta pode acessar várias páginas rapidamente, gerando conforto e principalmente tráfego. Neste tutorial, vamos aplicar de forma elegante de menu com links em lista.


--> Tutoriais <--
Sub-links nos menus



- Código CSS:
Vamos adicionar o código CSS em um widget personalizado, ou na sua folha de estilo CSS.
Painel de controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS >
Código:
ul.linklist li {
    position: relative;
    }
   
    li:hover #prof-content {
    opacity: 1;
    visibility: visible;
    margin-top: -5px;
    }
   
    #prof-content {
    margin-top: 5px;
      margin-left: 1450%;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 29px;
    z-index: 999;
    background-color: #fff;
    padding: 5px;
    -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
    -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
    box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    }
   
    #prof-content a {
    display:block;
    width: 150px;
    text-align: left !important;
    margin-left: 5px;
    }
    </style>

Agora, vamos aplicar o código JavaScript.

- Aplicação do javascript:
O javascript pode ser editado para o endereço que você deseja. Contudo, tenha atenção para não colocar nos links incorretos.
Código:
jQuery(document).ready(function(){
    jQuery("#prof-content").appendTo("li:has(a[href$='profile?mode=editprofile'])");
    });
No lugar de profile?mode=editprofile coloque o endereço do link do menu que você deseja que os sub-links apareçam.


- HTML no widget:
Muitos efeitos precisam de um HTMl para funcionar. Você precisará adicionar o HTML em um widget personalizado ou em algum local que esteja habilitado para aparecer em todas as suas páginas. Vamos supor então que você tem um widget.
Painel de Controle > Módulos > Portal e WIdgets > Gestão dos widgets do fórum > Criar um widget personalizado > e desmarque o Table-type para que o widget fique invisível. Vamos colar e modificar o código abaixo:
<div style="display:none"><div id="prof-content">
<a href="ENDERECO">NOME_DO_LINK</a>
</div>
</div>

  • Resultado previsto:
    [TUTORIAL] Sub-links nos menus (PHPBB3) Result14





© ShiftActif


[TUTORIAL] Sub-links nos menus (PHPBB3) Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Sub-links nos menus
Magnus

Magnus
Moderactif
Moderactif

Masculino
Idade : 39
PointActif's : 2809
ReputActifs : 4
Mensagens : 52
Inscrição : 04/04/2012

100%

https://shift.forumactif.com/

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