Hitskin.comIsto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
ArtigosCriar menu com abas
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Flash Thunder- ***
- Membro desde : 15/04/2011
Mensagens : 138
Pontos : 220 -
Re: Criar menu com abas
por seender 27.07.11 2:55
Olá!
Crie um novo widget e insira o seguinte código:
Agora adicione o código css abaixo:
Painel...-> Visualização -> Imagens e cores -> Cores / Folha estilo CSS
Melhores cumprimentos,
seender
Crie um novo widget e insira o seguinte código:
No local de vermelho insira o título das abas, no local de laranja insira o conteúdo respectivo a cada aba (1 e 2).<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>
Agora adicione o código css abaixo:
- 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;
}
Painel...-> Visualização -> Imagens e cores -> Cores / Folha estilo CSS
Melhores cumprimentos,
seender
seender- Membro Entusiasta
- Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455 -
Re: Criar menu com abas
por Luciano98 27.07.11 21:20
Olá!
Poderá somente confirmar se sua dúvida está resolvida?
Caso necessite de suporte adicional, por favor informe-nos!
Até mais.
Poderá somente confirmar se sua dúvida está resolvida?
Caso necessite de suporte adicional, por favor informe-nos!
Até mais.
Luciano98- Membro Entusiasta
- Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049 -
Flash Thunder- ***
- Membro desde : 15/04/2011
Mensagens : 138
Pontos : 220 -
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos