LF Design
Olá,

Seja bem vindo ao LF Design se registra no fórum estamos com muitas vagas e o melhor conteúdo para você

Até
LF Design
Olá,

Seja bem vindo ao LF Design se registra no fórum estamos com muitas vagas e o melhor conteúdo para você

Até
LF Design
Últimos assuntos
» Mundo dos Fóruns
[Tutorial] Adicionando um Menu do CSS Menu Maker EmptySex Abr 18, 2014 7:17 am por JQuery

»  Arte Library®
[Tutorial] Adicionando um Menu do CSS Menu Maker EmptySex Mar 28, 2014 10:35 am por Wiliam.

» Poderia me fazer uma HTML Veja
[Tutorial] Adicionando um Menu do CSS Menu Maker EmptySáb maio 11, 2013 3:46 pm por Quakeline

» Star Forum - Mais que um forum, uma familia
[Tutorial] Adicionando um Menu do CSS Menu Maker EmptySáb maio 11, 2013 9:56 am por Quakeline

» Sitio Marado - Tudo que tu procuras em um só fórum!
[Tutorial] Adicionando um Menu do CSS Menu Maker EmptySex maio 10, 2013 7:58 am por Quakeline

» Ultra Gaming
[Tutorial] Adicionando um Menu do CSS Menu Maker EmptyQua maio 08, 2013 8:03 pm por -Matt

» SUPERAntiSpyware
[Tutorial] Adicionando um Menu do CSS Menu Maker EmptyQua maio 08, 2013 7:25 pm por -Matt

» Como fazer isso
[Tutorial] Adicionando um Menu do CSS Menu Maker EmptyQua maio 01, 2013 12:28 pm por Quakeline

» [VIP] Compre VIP
[Tutorial] Adicionando um Menu do CSS Menu Maker EmptySeg Abr 29, 2013 8:58 pm por Quakeline

Os membros mais ativos do mês
Nenhum usuário


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

Chongas

Chongas
Programador

[Tutorial] Adicionando um Menu do CSS Menu Maker Config10

Menu CSS Menu Maker




--> Tutoriais, dicas e astúcias <--
Menu CSS Menu Maker



- Gerando menu
Bom, vamos começar.
Primeiramente vá até esse site e escolha o menu que deseja:
http://cssmenumaker.com/
Depois de ter escolhido, e ter clicado em customizar irá aparecer uma seguinte página:
[Tutorial] Adicionando um Menu do CSS Menu Maker 6uIMEQo
Lá você vai estruturar o seu menu. Colocando os sub-menus, e para onde ele irá redirecionar.


- Conhecendo as guias importantes
Ao terminar de estruturar o menu perceba que a três abas na página de estrutura, que são essas:
[Tutorial] Adicionando um Menu do CSS Menu Maker 21309f89b71045a9b405450
Bom estas guias são as mais importantes para dar vida ao seu menu.


- Conhecendo o código
Bom neste tutorial usaremos um código JavaScript.
Vamos ao que importa.
O código a ser usado será:
Código:
jQuery(document).ready(function(){
jQuery("#page-header .navbar, body table.bodylinewidth tbody tr td.bodyline table tbody tr td a:eq(0), #pun-head #pun-navlinks, #submenu").before("<div class='novomenu'></div>");
jQuery("#page-header .navbar, body table.bodylinewidth tbody tr td.bodyline table tbody tr td a:eq(0), #pun-head #pun-navlinks, #submenu").css({"display":"none"});});
jQuery(document).ready(function(){if(jQuery('#logout').length){var m="MENU_LOGADO"}else{var m="HTML_DESLOGADO"};jQuery('.novomenu').replaceWith(m)});

OBS: Onde esta MENU_LOGADO:Você deverá colocar o menu para aparecer a um membro que esta conectado em seu forum. E o MENU_DESLOGADO para um membro que se encontra deslogado, ou também um convidado.

OBS²: O envestimento do javascript deverá ser Todas as Páginas.
[Tutorial] Adicionando um Menu do CSS Menu Maker 1439984817


- Código CSS a ser adicionado
Use o código css do menu feito por você no CSS MENU MAKER, que esta localizado na guia CSS.


- Exemplo
Um exemplo deste código e:
[Tutorial] Adicionando um Menu do CSS Menu Maker 303925513
Código:
jQuery(document).ready(function(){
jQuery("#page-header .navbar, body table.bodylinewidth tbody tr td.bodyline table tbody tr td a:eq(0), #pun-head #pun-navlinks, #submenu").before("<div class='novomenu'></div>");
jQuery("#page-header .navbar, body table.bodylinewidth tbody tr td.bodyline table tbody tr td a:eq(0), #pun-head #pun-navlinks, #submenu").css({"display":"none"});});
jQuery(document).ready(function(){if(jQuery('#logout').length){var m="<div id='cssmenu'>
<ul>
  <li><a href='/forum'><span>Início</span></a></li>
  <li><a href='/faq'><span>FAQ</span></a></li>
  <li><a href='/members'><span>Membros</span></a></li>
  <li><a href='/groups'><span>Grupos</span></a></li>
  <li><a href='/privmsg?folder=inbox'><span>MP's</span></a></li>
  <li><a href='/profile?mode=editprofile'><span>Perfil</span></a></li>
  <li class='last'><a href='/login?logout=1&tid=170aceecb402386708ed3f89f147eb0d&key=79db9b'><span>Sair</span></a></li>
</ul>
</div>"}else{var m="div id='cssmenu'>
<ul>
  <li><a href='/forum'><span>Início</span></a></li>
  <li><a href='/faq'><span>FAQ</span></a></li>
  <li><a href='/members'><span>Membros</span></a></li>
  <li><a href='/groups'><span>Grupos</span></a></li>
  <li><a href='/register'><span>Registrar</span></a></li>
  <li class='last'><a href='/login'><span>Conectar</span></a></li>
</ul>
</div>"};jQuery('.novomenu').replaceWith(m)});

E o CSS:
Código:
/*---- Menu ----*/
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);

#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }

#cssmenu {
  background: #333;
  border-bottom: 4px solid #1b9bff;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px;
}

  #cssmenu > ul { *display: inline-block; }

  #cssmenu:after, #cssmenu ul:after {
    content: '';
    display: block;
    clear: both;
}

#cssmenu a {
    background: #333;
    color: #CBCBCB;
    padding: 0 20px;
}
#cssmenu ul { text-transform: uppercase; }

    #cssmenu ul ul {
      border-top: 4px solid #1b9bff;
      text-transform: none;
      min-width: 190px;
}
      #cssmenu ul ul a {
        background: #1b9bff;
        color: #FFF;
        border: 1px solid #0082e7;
        border-top: 0 none;
        line-height: 150%;
        padding: 16px 20px;
}
      #cssmenu ul ul ul { border-top: 0 none; }

      #cssmenu ul ul li { position: relative }

#cssmenu > ul > li > a { line-height: 48px;  }

#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
        #cssmenu ul ul li:hover > a { background: #35a6ff; }

        #cssmenu ul ul li:last-child > a {
          border-radius: 0 0 3px 3px;
          box-shadow: 0 1px 0 #1b9bff;
}
        #cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }

        #cssmenu ul ul li.has-sub > a:after {
          content: '+';
          position: absolute;
          top: 50%;
          right: 15px;
          margin-top: -8px;
}

    #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
      background: #1b9bff;
      color: #FFF;
}
    #cssmenu ul li.has-sub > a:after {
      content: '+';
      margin-left: 5px;
}
    #cssmenu ul li.last ul {
      left: auto;
      right: 0;
}
      #cssmenu ul li.last ul ul {
        left: auto;
        right: 99.5%;
}
.

Exemplo:
[Tutorial] Adicionando um Menu do CSS Menu Maker KZHJrg4


  • Esse código funciona em que versão??
    Este código funciona nas seguintes versões: [Tutorial] Adicionando um Menu do CSS Menu Maker 1695074684 [Tutorial] Adicionando um Menu do CSS Menu Maker 79176910 [Tutorial] Adicionando um Menu do CSS Menu Maker 3808864263


  • Funciona em Invision??
    Eu nunca testei.



[Tutorial] Adicionando um Menu do CSS Menu Maker Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Menu CSS Menu Maker

BabyLoves

BabyLoves
Fundador
Tutorial Aprovado !.

RONILSON MAIA [BANIDO]

RONILSON MAIA [BANIDO]
Banido
Muito Bom Tutorial Chongas Parabens Wink

O autor desta mensagem foi banido do fórum - Mostrar mensagem

Chongas

Chongas
Programador
Obrigado ShkTar!

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

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