Chongas
Menu CSS Menu Maker |
--> Tutoriais, dicas e astúcias <--
Menu CSS Menu Maker
Menu CSS Menu Maker
1º - 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.
2º - 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.
3º - 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.
4º - 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.
5º - 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 |