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
Sex Abr 18, 2014 7:17 am por JQuery

»  Arte Library®
Sex Mar 28, 2014 10:35 am por Wiliam.

» Poderia me fazer uma HTML Veja
Sab Maio 11, 2013 3:46 pm por Quakeline

» Star Forum - Mais que um forum, uma familia
Sab Maio 11, 2013 9:56 am por Quakeline

» Ultra Gaming
Qua Maio 08, 2013 8:03 pm por -Matt

» SUPERAntiSpyware
Qua Maio 08, 2013 7:25 pm por -Matt

» Como fazer isso
Qua Maio 01, 2013 12:28 pm por Quakeline

» [VIP] Compre VIP
Seg Abr 29, 2013 8:58 pm por Quakeline

Os membros mais ativos do mês


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

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

Chongas

avatar
Programador


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:

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:

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.



- 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:

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:



  • Esse código funciona em que versão??
    Este código funciona nas seguintes versões:


  • Funciona em Invision??
    Eu nunca testei.



Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Menu CSS Menu Maker

BabyLoves

avatar
Fundador
Tutorial Aprovado !.

RONILSON MAIA [BANIDO]

avatar
Banido
Muito Bom Tutorial Chongas Parabens Wink

O autor desta mensagem foi removido do fórum - Ver a mensagem

Chongas

avatar
Programador
Obrigado ShkTar!

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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