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!
Início
PublicaçõesSub-Menu
Página 1 de 1 • Compartilhe
Sub-Menu
por EduardoWenes Seg 11 Jun - 11:59
Veja este fórum: http://spdesign.ativoforum.com/
Passa o mouse encima do menu Portal.. Buscar.. Perfil.. Inicio
Como fazer isto com o meu menu?
Passa o mouse encima do menu Portal.. Buscar.. Perfil.. Inicio
Como fazer isto com o meu menu?
EduardoWenes- Sou novo
-
Idade : 26
PointActif's : 4416
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012
-
Re: Sub-Menu
por Nak Seg 11 Jun - 14:17
Olá,
O senhor poderia me informar a versão do seu Fórum?
Até mais.
Izzy suporte Actif.
O senhor poderia me informar a versão do seu Fórum?
Até mais.
Izzy suporte Actif.
Nak- Membro em destaque
-
Idade : 27
PointActif's : 4567
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012
EduardoWenes- Sou novo
-
Idade : 26
PointActif's : 4416
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012
-
Shek- Administrador
-
Idade : 30
PointActif's : 7453
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
Re: Sub-Menu
por GabrielS. Ter 12 Jun - 10:51
Olá,
Gostaria de saber o código, tenho um fórum de testes em PunBB.
Cordialmente
Skyline
Gostaria de saber o código, tenho um fórum de testes em PunBB.
Cordialmente
Skyline
GabrielS.- Colaborador Actif
-
Idade : 24
PointActif's : 4962
ReputActifs : 21
Mensagens : 407
Inscrição : 03/04/2012
Localização : Shiftactif & SuporteDesign
-
Re: Sub-Menu
por EduardoWenes Ter 12 Jun - 11:52
Já tive este código em meu fórum phpbb3, mais eu removi e não me lembro mais.
É CSS COM JAVASCRIPT.
É CSS COM JAVASCRIPT.
EduardoWenes- Sou novo
-
Idade : 26
PointActif's : 4416
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012
-
Re: Sub-Menu
por Nak Ter 12 Jun - 13:36
EduardoWenes escreveu:Já tive este código em meu fórum phpbb3, mais eu removi e não me lembro mais.
É CSS COM JAVASCRIPT.
Boa Tarde!
Prezado EduardoWenes, os códigos são para a Versão PunBB. No caso, siga os passos:
<script src="http://lervisc.noads.biz/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
</head>
<body><div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Título 1</li>
<li class="TabbedPanelsTab" tabindex="0">Título 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Conteúdo 1</div>
<div class="TabbedPanelsContent">Conteúdo 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
No valor em vermelho insira o título das abas, no local de laranja insira o conteúdo respectivo a cada aba (1 e 2).
Agora adicione o código css abaixo:
Código:
- Código:
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
.TabbedPanelsTabHover {
background-color: #CCC;
}
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
}
.TabbedPanelsTab a {
color: black;
text-decoration: none;
}
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
}
.TabbedPanelsContent {
padding: 4px;
}
.TabbedPanelsContentVisible {
}
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}
Adicione em:
cPainelVisualização
Caso da maneira acima não funcionar, peço que delete tudo e faça com os seguintes passos abaixo:
Passo 1: Agora o HTML; cPainel Portal & Widgets Gestão dos Widgets do Fórum ou do Portal 
Criar um novo widget personalizado Mas vamos tentar o seguinte;
- Código:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menu Drop Down</title>
<link rel="stylesheet" type="text/css" href="menu.css"/>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<ul id="nav-menu">
<li><a href="">Página Inicial</a></li>
<li><a href="">Serviços</a></li>
<li class="submenu">
<span>Portfólio</span>
<ul>
<li><a href="">Lorem Ipsun</a></li>
<li><a href="">Lorem Ipsun</a></li>
<li><a href="">Lorem Ipsun</a></li>
</ul>
</li>
<li class="submenu">
<span>Quem Somos</span>
<ul>
<li><a href="">Lorem Ipsun</a></li>
<li><a href="">Lorem Ipsun</a></li>
<li><a href="">Lorem Ipsun</a></li>
</ul>
</li>
<li><a href="">Contato</a></li>
</ul>
<script type="text/javascript">
//Cria um objeto menu, passando como paramentro o ID da UL da
// navegação principal.
var menu = new Menu('nav-menu');
</script>
</body>
</html>
No final do HTML é só instanciar um novo objeto Menu passando como parâmetro o id do menu de navegação principal.
Obs: Por nos 'LI's que servirão de submenus a classe submenu.
ID Navegação Principal -> nav-menu
Classe para submenu -> submenu
Passo 2: Agora o CSS; cPainel Visualização Imagens e Cores Cores Folha de Estilo CSS/* ESTRUTURA */
*{
margin:0;
padding:0;
}
#nav-menu{
overflow: hidden;
}
#nav-menu li{
display:inline-block;
float:left;
}
#nav-menu li a, #nav-menu li span{
padding:10px;
display:block;
text-decoration: none;
cursor:pointer;
}
#nav-menu li.submenu ul{
position: absolute;
display:block;
width:220px;
display:none;
}
#nav-menu li.submenu ul li{
float:none;
display:block;
}
/* DESIGN */
/* Cor de fundo do Menu Principal de Navegação*/
#nav-menu{
background: red;
}
/*Cor da fonte do menu*/
#nav-menu a, #nav-menu span{
color:#FFF;
}
#nav-menu a:hover, #nav-menu span:hover, #nav-menu li:hover{
background: #750000;
color: #FF4848;
}
/* Cor de fundo do submenu */
#nav-menu li.submenu ul{
background: #FF4848;
}
/*Cor da fonte do submenu*/
#nav-menu li.submenu a{
color:#750000;
}
#nav-menu li.submenu a:hover{
background:#FF1C1C;
color:#FFF;
}
Passo 3: Agora o JS; cPainel Módulos HTML & JAVASCRIPT Gestão dos Códigos JavaScript e 
Criar um novo javascript - Código:
function Menu(id){
//Id do menu de navegação
this.id = id;
//Tag que irá servir de titulo do submenu
this.submenuTitleTag = 'span';
//Classe usada no LI para dizer que é um submenu
this.submenuClass = 'submenu';
//Funções e operações iniciadas ao criar o objeto
this.construtor = function(){
this.submenuTitleTag = this.submenuTitleTag.toUpperCase();
this.getmenu();
}
//Seleciona e adiciona os eventos aos submenus
this.getmenu = function (){
//Seleciona todos os LI do menu de navegação
var tags = document.getElementById(this.id).getElementsByTagName("li");
//Verifica um por um pra saber se possui submenu ou não
for(var i=0;i<tags.length;i++){
if(tags[i].className == this.submenuClass){
tags[i].onmouseover = function(){
this.getElementsByTagName('ul')[0].style.display = "block";
}
tags[i].onmouseout = function(){
this.getElementsByTagName('ul')[0].style.display = "none";
}
}
}
}
//Inicializa o objeto
this.construtor();
}
Atenciosamente,
Izzy.
Nak- Membro em destaque
-
Idade : 27
PointActif's : 4567
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012
Re: Sub-Menu
por EduardoWenes Ter 12 Jun - 13:47
Eu não entendi foi nada desse primeiro passo, os outros passos ja fiz tudo.
Teria como me detalhar o primeiro passo?
Teria como me detalhar o primeiro passo?
EduardoWenes- Sou novo
-
Idade : 26
PointActif's : 4416
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012
-
Re: Sub-Menu
por Nak Ter 12 Jun - 16:38
Olá EduardoWenes,
O primeiro código do primeiro exemplo, deve estar dentro de um novo Widget.
Para isto, crie um novo widget:
cPainel Módulos Widgets Gestão dos Widgets do Fórum ou do Portal Criar um novo widget personalizado. No conteúdo, adicione o primeiro código do primeiro exemplo de fazer o tipo de sub-menu desejado.
Atenciosamente,
Izzy.
O primeiro código do primeiro exemplo, deve estar dentro de um novo Widget.
Para isto, crie um novo widget:
cPainel
Módulos Widgets Gestão dos Widgets do Fórum ou do Portal Criar um novo widget personalizado. No conteúdo, adicione o primeiro código do primeiro exemplo de fazer o tipo de sub-menu desejado. Atenciosamente,
Izzy.
Nak- Membro em destaque
-
Idade : 27
PointActif's : 4567
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012
EduardoWenes- Sou novo
-
Idade : 26
PointActif's : 4416
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012
-
Re: Sub-Menu
por Firenando Ter 12 Jun - 20:46
Olá, posso lhe ajudar, e sim, existe o código para PHPBB 3.
Se querer, só avisar, pois não sei se mudou a versão.
Obrigado.
Se querer, só avisar, pois não sei se mudou a versão.
Obrigado.
Firenando- Membro iniciante
-
Idade : 27
PointActif's : 4427
ReputActifs : 1
Mensagens : 40
Inscrição : 16/05/2012
-
Re: Sub-Menu
por cyllaz Ter 12 Jun - 21:19
Firenando escreveu:Olá, posso lhe ajudar, e sim, existe o código para PHPBB 3.
Se querer, só avisar, pois não sei se mudou a versão.
Obrigado.
Você irá passar o meu código Firenando ?
As intenções de Izzi são as melhores, pois ele esta criando um código novo, e de autoria dele
passar o meu código seria contra o acordo que eu faço, para lhes passar o código de bom grado...
não se esqueça disso...
obrigado.
cyllaz- Membro iniciante
-
Idade : 34
PointActif's : 4478
ReputActifs : 1
Mensagens : 55
Inscrição : 18/04/2012
-
Re: Sub-Menu
por Firenando Ter 12 Jun - 21:22
cyllaz escreveu:Firenando escreveu:Olá, posso lhe ajudar, e sim, existe o código para PHPBB 3.
Se querer, só avisar, pois não sei se mudou a versão.
Obrigado.
Você irá passar o meu código Firenando ?
As intenções de Izzi são as melhores, pois ele esta criando um código novo, e de autoria dele
passar o meu código seria contra o acordo que eu faço, para lhes passar o código de bom grado...
não se esqueça disso...
obrigado.
Não, Cyllaz, tenho um código, que não é seu, se for, não sei quem o publicou, pois o seu, é totalmente diferente do meu.
Firenando- Membro iniciante
-
Idade : 27
PointActif's : 4427
ReputActifs : 1
Mensagens : 40
Inscrição : 16/05/2012
-
EduardoWenes- Sou novo
-
Idade : 26
PointActif's : 4416
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012
-
Re: Sub-Menu
por Nak Ter 12 Jun - 22:44
Olá,
De primeira visão, o código é para a Versão PunBB. O código em que lhes indiquei é para fazer um sub-menu totalmente padrão e que não seja copia de ninguém. Aqui não é permitido copias de outros fóruns, caso os mesmo sejam copiados, terei de agir e enviar para à Direção ShiftActif.
Atenciosamente,
Izzy.
De primeira visão, o código é para a Versão PunBB. O código em que lhes indiquei é para fazer um sub-menu totalmente padrão e que não seja copia de ninguém. Aqui não é permitido copias de outros fóruns, caso os mesmo sejam copiados, terei de agir e enviar para à Direção ShiftActif.
Atenciosamente,
Izzy.
Nak- Membro em destaque
-
Idade : 27
PointActif's : 4567
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012
EduardoWenes- Sou novo
-
Idade : 26
PointActif's : 4416
ReputActifs : 1
Mensagens : 8
Inscrição : 04/04/2012
-
Re: Sub-Menu
por Consolado Sex 15 Jun - 14:10
Olá,
Faça o menu que der ao gosto e hospede as imagens e arquivos conforme é dado quando os mesmos são baixados. Use este website que oferece os menus personalizados prontos.
http://cssmenumaker.com/horizontal_css_menu.php
Faça o menu que der ao gosto e hospede as imagens e arquivos conforme é dado quando os mesmos são baixados. Use este website que oferece os menus personalizados prontos.
http://cssmenumaker.com/horizontal_css_menu.php
Consolado- Colaborador Actif
- PointActif's : 4694
ReputActifs : 28
Mensagens : 243
Inscrição : 19/04/2012
-
Conteúdo patrocinado
Tópicos semelhantesPágina 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|
Facebook
Twitter
Youtube
