[Tutorial] Sub-links nos itens do menu

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

avatar
Admin
Administrador
Tempo Online : 250d 6h 21m 59s
Mensagens : 693
Reputação : 4
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Qui Set 29, 2016 6:31 pm

Informações:

Autor: Desconhecido
Versões: Todas as versões
Introdução: Sub-links nos itens do menu

Instalação:

Acesse:
Painel de controle -> Modulos -> HTML & Javascripts -> Gestão dos códigos Javascripts
Então crie um novo javascript com investimento em todas as paginas com esse código:
Código:
jQuery(document).ready(function(){
    jQuery("#prof-content").appendTo("li:has(a[href$='profile?mode=editprofile'])");
    });

Explicação:

O javascript pode ser editado para o endereço que você deseja. Contudo, tenha atenção para não colocar nos links incorretos.
No lugar de profile?mode=editprofile coloque o endereço do link do menu que você deseja que os sub-links apareçam.

Adicionando o CSS para uma melhor aparência

Acesse:
Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS
E Adicione esse código css á sua Folha de Estilo:
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;
    }


  • Resultado:

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

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

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